• Video Tutorial
  • GemPages Forum
Start For Free
  • Video Tutorial
  • GemPages Forum
homeHow-to and FAQs[V7] How to create color swatches
homeHow-to and FAQs[V7] How to create color swatches

[V7] How to create color swatches

This article will provide a step-by-step guide to help you effectively showcase the product options using color swatches. 

Color swatches are colorful buttons positioned on a product page, replacing the traditional drop-down menu. When customers click on a swatch, they can instantly see the product in the corresponding color, simplifying the selection process.

To create a color swatch with GemPages, please follow the steps below:

Step 1: To begin, from the GemPages Dashboard, open your preferred template to access the Editor.

Step 2: You can easily locate the (P) Variants and Swatches element in the left sidebar, under the Product section. Drag and drop the element inside your Product Module. 

Step 3: You will see the element configuration on the left sidebar of the Editor. Look for the Variant settings, and make sure you choose the “Separate” option.

Go to the “Variant Style” section, where you’ll find a drop-down menu. From this menu, select “Color swatch” and then click on the “Edit” button to proceed with further customization.

Step 4: After that, you will find an open window to manage your swatches.

  • Option Title: Enter the option title exactly as it appears in your Shopify Admin > Products.
  • Option Type: From the dropdown, select “Color.”
  • Option Value: Input the option values individually and choose the corresponding color from the palette. If your product has multiple colors, you can add up to 3 colors at this step.
Make sure that you input the exact option title and value from your Shopify Admin, including capital letters, spaces, or any special characters. For example, if your variant title is “Color,” and it has three color selections – Orange, Pink, and Red, enter “Color” in the Option Title field and add three values: “Red,” “Pink,” and “Orange” to ensure correct recognition by the system.

 

Step 5: By default, the swatches are square-shaped. If you prefer round-shaped color swatches, navigate to the Option value states section and input the corner value into the box to achieve the round shape you want. Make sure to apply this corner value for all states: Normal, Hover, and Active.

To achieve the desired round shape, you may also need to customize the height of the swatch under the “Option size” section. 

Step 6: Don’t forget to hit “Save” and “Publish” the template.

That’s all! If you have any difficulty taking these actions, please let us know directly via email & live chat
to have them answered!

Was this helpful?

Yes  2 No
Related Articles
  • [V7] How to create a sticky section
  • Button Element – FAQs
  • [V7] How to Upload Custom Font
  • Affiliate – FAQs
  • Link your pages to Shopify menu item
  • Add the overlay effect to the hero banner
footer logo
  • Changelog
  • Privacy Policy
  • Terms of Service
  • Community
  • Video Tutorial
© 2017-2023 GemPages. All rights reserved.
Popular Search:Responsive design, Transfer content, Custom code