Color swatches are colorful buttons positioned on a product page, replacing the traditional drop-down menu. When customers click on a swatch, they can instantly see the product in the corresponding color, simplifying the selection process.
To create a color swatch with GemPages, please follow the steps below:
Step 1: To begin, from the GemPages Dashboard, open your preferred template to access the Editor.
Step 2: You can easily locate the (P) Variants and Swatches element in the left sidebar, under the Product section. Drag and drop the element inside your Product Module.
Step 3: You will see the element configuration on the left sidebar of the Editor. Look for the Variant settings, and make sure you choose the “Separate” option.
Go to the “Variant Style” section, where you’ll find a drop-down menu. From this menu, select “Color swatch” and then click on the “Edit” button to proceed with further customization.
Step 4: After that, you will find an open window to manage your swatches.
- Option Title: Enter the option title exactly as it appears in your Shopify Admin > Products.
- Option Type: From the dropdown, select “Color.”
- Option Value: Input the option values individually and choose the corresponding color from the palette. If your product has multiple colors, you can add up to 3 colors at this step.
Step 5: By default, the swatches are square-shaped. If you prefer round-shaped color swatches, navigate to the Option value states section and input the corner value into the box to achieve the round shape you want. Make sure to apply this corner value for all states: Normal, Hover, and Active.
To achieve the desired round shape, you may also need to customize the height of the swatch under the “Option size” section.
Step 6: Don’t forget to hit “Save” and “Publish” the template.
That’s all! If you have any difficulty taking these actions, please let us know directly via email & live chat
to have them answered!