Product Variants and Swatches Element

About the (P) Variants and 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., with the aim of increasing your conversion rate.

To begin, access your desired template for editing from the GemPages Dashboard. You can easily locate the (P) Variants and Swatches element in the left sidebar of the Editor, under the Product section. Darg and drop the element to the position you prefer. To ensure proper functionality, the (P) Variants and Swatches element should be placed within a Product Module as a child element. If your page does not contain one, simply drag and drop the Product Module and nest the (P) Variants and Swatches element inside it.

Configure the Settings tab

Variant Settings

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.

Sold out mark: Toggle on the option to display the sold-out badge for the sold-out variant.  

Variant Style

If you select the Combined type in the previous section, the style will appear as the default drop-down. However, if you select “Separated,” you’ll gain access to the Variant Style section, which allows you to personalize the style for each option individually.

To select your desired style, simply click on Edit > Select style and choose from the following options:

1. Dropdown: This is the default style, represented as a dropdown list.
2. Button selection: The option will be displayed as buttons for easy selection.
3. Color Swatch: The option will be showcased as colorful buttons, allowing customers to view the product in the corresponding color by clicking on the swatch. Please note that configuring the color swatch may require a more complicated setup, and you can find instructions in this article.
4. Shopify Image: Your Shopify product variant images will be displayed instead of color options.
5. Upload Image: You have the option to upload a unique image for each variant instead of using Shopify’s default variant images.

Title text

Enable the switch to display option labels. Following that, you can customize various aspects of the label typography such as the font, font size, line height, color, and more.

Arrangement: Select the position for the title – Below or Beside the options.

Gap: To control the spacing between the option title and value, input your preferred gap value in pixels.

Option value text

You will be able to customize the option value typography at this point. 

Pre-selected option 

Enable this option if you want a variant to be pre-selected.

Otherwise, turn it off and you can be able to input the message into the “Blank Option Text” field to show the message for the blank option.

Size

Enable the switch to make the dropdown stretch to both edges. Otherwise, input your preferred width value in pixels or percentages. 

Besides, you can find the option to adjust the spacing between the variant options here.

Option size

Modify the dimensions of the swatches and variants, including height, width, and spacing. 

Option value states

Customize the appearance of the swatches and variants in different states, such as normal, hover, and active. 

Align

This parameter allows you to determine how the image is positioned on your page. There are three options to choose including left-aligned, centered, and right-aligned.

Advanced Tab

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