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 > Select Style section, and choose the option “Color swatch”.
Next, click on the “Configure option” button.
Step 4: After that, you will find an open window to manage your color swatches.
Click on each variant to pick your desired color from the palette or manually enter the color hex code. Hit “Apply for all products” when finished.
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.