(P) Swatches element

In this article, you will learn more about the "(P) Swatches" element and how to use it.

(P) Swatches provides a much nicer way to display variations of variable products. You can use (P) Swatches in any type of page as long as it is located inside the Product Module.



(P) Swatches will get the variants from your Shopify product data. If you haven’t added 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 9 main parameters: Swatch Rules, Show Label, Swatch Text, Selected Swatch, Dimension, Spacing, Alignment, Sold Out Mark, and Extra class. 

Swatch rules

Click on  to fine-tune the appearance of each attribute. In the appearing box, you should see the options of the current product. For example, Color and Size are two options of the product in the image.