About the Custom Field element
The Product Custom Field element is designed to gather information from customers regarding their orders. With various input field styles like Text boxes, Dropdowns, and Checkboxes, it can collect different types of data. This information is then included with their order and sent to your Shopify Admin > Orders once the order is confirmed.
To add the Custom field element to your page, please follow the steps below.
Since the Custom field is a child element of the Product module, it has to be nested inside a Product module to function correctly.
Step 1: In the GemPages Dashboard, select your page to work on the enter the Editor.
Step 2: If you don’t have a Product module, drag & drop one onto your page.
Step 3: Drag & drop the Custom field element inside the Product module, on your preferred spot.
Clicking on the element, you will notice the settings configuration displayed on the left sidebar. It consists of two primary tabs: Settings and Advanced.
Configure the Settings Tab
Field
Type: Choose your preferred style for the custom field from the 6 types available.
- Text: Provide an area for the customer to input comments or information.
- Text Area: Functions the same as the text field but provides a more extensive area.
- Email: Enable customers to enter their email addresses.
- Checkbox: Permit users to pick from various choices.
- Radio: Allow the user to select one option from a group of options. Unlike check boxes where a user is allowed to select multiple boxes, a user may only choose a single option for a radio button.
- Dropdown: This style also allows users to choose only one option, but can hide or reveal the option box.
Required: Activate this switch to prevent users from bypassing this information.
Number only: Enable this choice to exclusively allow number inputs.
Min/Max character(s): Use the slider to adjust the minimum and maximum permissible characters as desired.
Label text
Content: Enter the label for the custom field into the box. This label will be displayed above the input field.
Style: Select a style for the label from the available pre-determined styles.
Font: Choose the font for your text label from the drop-down menu. In case, you would like to use other fonts, check out how to use a custom font here.
Sizes: Determine your preferred font size.
Color: Choose a color from the palette or input the color hex code.
Click on the “Show more” button to reveal more customization options.
Font Weight: Choose your desired font weight from the provided drop-down menu.
Line Height: Adjust the height of the text by specifying a percentage value.
Letter Spacing: Modify the spacing between letters by inputting a value in pixels.
Text transform: Transform the text to uppercase, lowercase, or capitalize as desired.
Input value text – Option content text
Placeholder: This content will be visible when you select the “Text,” “Text area,” or “Email” option. Enter the desired text to be displayed within the input field.
Field Name: Input the field name in the provided box. This field name will solely appear in the order and will not be visible on your live page.
Additionally, you will have the flexibility to personalize the styles, font, or size of the text input as per your preferences. In case you choose “Checkbox”, “Radio”, and “Dropdown” you will be able to customize how the option looks at this point.
Input states – Option content states
Upon selecting the “Text,” “Text area,” or “Email” field options, you’ll have the ability to tailor the look of the input box across three distinct states: Normal, Hover, and Focus (when the user clicks on the box to initiate data input).
Alternatively, if you opt for the “Checkbox,” “Radio,” or “Dropdown” field choices, your customization scope will be focused solely on the input text color across three states: Normal, Hover, and Active.
Size
Full-width: By enabling this option, the element will expand to occupy the entire width, stretching from one edge to the other.
Otherwise, you can input your preferred width and height into the corresponding box.
Align
This parameter allows you to determine how the element is positioned on your page. There are three options to choose from: left-aligned, centered, and right-aligned.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
And there you have it! If you need any further assistance along the way, our GemPages Support Team is always here for you!