[V6] (P) Variants element

About the (P) Variants Element

The (P) Variants element is a child element of the Product module, designed to show multiple options of a product such as size, color, materials, etc., to increase your conversion rate.

From the GemPages Dashboard, open your preferred template to edit. You can quickly find the (P) Variants element on the left sidebar of the Editor, under the Product section.

As a child element, the (P) Variants element should be located inside a Product Module to work correctly. Drag & drop the Product Module, then nest the (P) Variants element inside if your page doesn’t have them.

Click on the element to view its configurations in the left sidebar, including Settings and Design tabs.

Configure the Settings Tab

1. Show label

Toggle on this switch to show the labels of the variants.

Click on “More settings” to further customize it.

• Font Weight: Adjust the font weight of the label.
• Font Size: Adjust the font size of the label.
• Color: Enter the hex color code for the color of the price.
• Font: Choose the font for your price from the drop-down menu. Click on “Font manager” to explore more fonts available on GemPages. Check out how to use a custom font here.

2. Dimension

Responsive: Click on the Desktop icon on the right corner, you will be able to control the display of your variants among different devices. It is recommended to make changes in the Desktop version first as other screens will adapt to it.

Width / Height: This feature allows you to manually adjust the drop-down menu width and height by entering values into the fields (in percentage or pixel).

Margin Bottom: Use the slider or enter the number into the box to determine the spacing between the two variants.

3. Display

Style: There are two options you can select at this point – Default and Inline.

• Default: Each variant will be displayed below its label.
• Inline: Each variant will be displayed in the same line with its label.

Columns: Select the number of columns from the drop-down menu.

Group By: You can select between two options:

• Default: All the variants will be combined in one drop-down.
• Separately: Variants will be displayed in different categories.

Blank option: Toggle on this switch and input the message into the “Blank Option Text” field to show the message for the blank option.

4. Show options

Turn on/ off the corresponding switch to show/ hide a specific product option.

5. Alignment

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

6. Extra Class

If you wish to further customize the element with coding, please use this field to add a class name and refer to it in the CSS file.

Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article.

That’s it! Remember to “Save” and “Publish” your page to bring the price to the live store.