How to display product variants with (P) Swatches and (P) Variants

This article will show you the simplest method to display product variants on product pages.

What do variants mean in GemPages?

A specific item that is bundled with various purchase options for products such as sizes, colors, materials. Each combination of options for a product is a variant for that item. For example, suppose that you sell T-shirts with two options: size and color. The size option has three values: small, medium, and large. The size is a type of variant.

Add variants for products on Shopify 

Before you can display product variants on GemPages pages, it is a must to add variants while you are creating a product on Shopify. Follow the instruction from Shopify right here.

You can create up to 100 variants for a product. Each product can have up to 3 options. The options can be different from product to product. 

Use GemPages elements to display the variants on GemPages pages

There are two elements in GemPages allowing to display product variants in GemPages. In the editor page, you can easily find them out on the left sidebar by using the search box.


  • (P) Swatches: Show options of each variant as box-list horizontally. Find out more about (P) Swatches settings, click here.

  • (P) Variants: Show options of each variant as a drop-down list. Find out more about (P) Variants settings, click here.