Show product options with (P) Variants element

This article will let you know more about the functions and settings of (P) Variants

The (P) Variants element allows you to display multiple options of a product such as size, color, materials, etc. in order to increase your conversion rate. You can use the (P) Variants in any type of page as long as it is located inside the Product Module


(P) Variants helps to display all variants of your Shopify products. If you haven’t added any variants for your product yet, you can follow the instructions of Shopify here.


It is easy to find this element in the left sidebar by using the Search box on the upper right of the GemPages editor page.



Settings of this element include 6 main parameters: Show Label, Dimension, Display, Alignment, Sold out text, and Extra class.

Show label


If you toggle this feature on, the label of variants will be displayed. Click on "More settings" to be able to adjust the style and color of the label. 


The responsive web design feature will save your time to modify the parameters of the label. Just by clicking on the icon at the top right corner of the setting box, it will show you different settings for 4 screen modes.


In this setting, you can adjust the width, height, and margin of dropdown boxes for variant option values.