Product Variants and Swatches Element

About the Product Variants & Swatches element

Unlike the previous version of the Editor, Editor v7 features a single element called (P) Variants and Swatches to display various options of a product, such as size, color, materials, etc., to increase your conversion rate.

In GemPages V7, the Product Variants and Swatches element lets you display all product variant options in a single, customizable interface, from dropdowns to color swatches to image thumbnails.

Common use cases:

• Let customers choose size, color, or material
• Show sold-out status visually
• Use variant images or upload custom swatch visuals

How to add a Product Variant & Swatches element to your page?

Follow these steps to add a Product Variant & Swatches to your page built with GemPages.

Step 1: Go to the Shopify admin > GemPages Builder app > Pages.

Step 2: Click on your target page to locate the editor.

Step 3: From the left sidebar, enter Product Variant & Swatches in the search bar. Then, drag and drop the element to the desired position on your page.

Step 4: Click on the element to open its configuration.

Configure the Settings tab

From here, you can configure the element’s settings, including:

Type

You can select between two options at this point:

• Combined:

All the variants will be consolidated into a single drop-down menu. If you select Combined, you will see the option “Options price” to enable/disable the price for each variant.

• Separated:

Variants will be organized into distinct categories. If you choose “Separated,” click on the “Configure” button to start customizing the style of each variant.

Product source

If you have assigned a product to this template, this product will be automatically synced as the Product source. 

In case you want to assign another product, click the pen icon to Edit the product source. From here, you can manually pick your preferred product.

Option gap

Adjust the spacing between each option by entering an exact number in the box or dragging the slider.

Option title

Under the Option title section, select the title position: vertical or horizontal. Also, adjust the gap between the title and text option for better readability.

Click the box next to Text style to open the text style configuration panel. From here, you can modify the text style, font, text size, text color, and letter spacing, or add a shadow effect.

Option: Color

Under this section, you can configure all the color options of this element.

Let’s break down each setting option:

• Style: Choose from these available options, including Dropdown, Button selection, Shopify image, Color Swatch, or Upload image. Click Edit color to open the Configure variants style panel.

• Width & Height: Adjust the width and height of the color option.

• Value gap: Change the spacing between each option.

• Border: Add the border for color options, and change the border color, thickness, and stroke as you prefer.

• Corner: Adjust the corner radius. For example, if you want to display rounded color options, set the radius to 999999.

• Shadow: To enhance the UI, you can add a shadow effect for the color options.

• Hover: Click the Style box next to the Hover to open its settings, where you can modify the hover effect.

• Active: Customize the active color option to make it different from the others.

Option value text

Within this section, you can edit the text value for color options from styles, font, size, font weight, line height, letter spacing, and transform.

Note: The Option value text configurations only work if you choose the style of the Option: Color as Dropdown (show text).

Sold out style

Choose the visual style when a color option is sold out:

• None: No signal for sold-out color option.
• Unclickable: Visitors can not click on the sold-out color option.
• Cross out: The sold-out color option will be crossed out.

Shape

Under the Shape section, you can add the border, adjust the corner radius, and add the shadow effect for the entire element.

Display option

• Default variant = Yes: Show the color option’s name next to the Color.
• Default variant = No: Hide the color option’s name.

Tip: Change the product source in the Product Module to “Manually Pick” to the custom default variant. Learn more.

Align

Set the alignment for this element: left-aligned, center-aligned, or right-aligned.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

Troubleshooting Color Variant Issues

If one of your color swatches isn’t functioning correctly in GemPages, here are some steps to troubleshoot and resolve the issue:

Variant Configuration in Shopify

Ensure that your product variants are properly set up in Shopify:

• Active Status: Verify that the product and its variants are active and available on your online store.
• Sales Channels: Confirm that the “Online Store” sales channel is selected for the product.
• Variant Setup: Check that each variant has a unique combination of options, such as color and size.

Examine Product Module Settings

• In the GemPages Editor, click on the Product Module.
• Under the Select Product section, ensure that the correct product is assigned.

FAQs

1. Can I display each product variant as a separate product page?

Shopify does not support showing variants as separate product pages by default.

However, a common workaround is to create separate products for each variant, then manually link them together as a “variant group” using metafields or a custom section.

2. What’s the difference between variants and separate products?

Variants share the same product page and use swatches/dropdowns to switch between options (e.g., sizes, colors).

Separate products have unique product pages and URLs. This is often used when each variation has very different photos, pricing, or descriptions.

3. How do I link separate product pages together like variants?

You can use:

• Manual linking in product descriptions or custom blocks (e.g., “Also available in…”)
• Product recommendation apps
• Custom Liquid sections or metafields (requires some Shopify knowledge)