What Does the Variant Swatches Widget Do?
The Variant Swatches Widget is a feature that allows you to display product variants, such as colors and sizes, in a visually engaging manner. These visual representations make it easier for customers to identify and select their desired product variations quickly and intuitively. By using the Variant Swatches Widget, you can create a more interactive and user-friendly shopping experience, helping customers make informed choices with ease.
📌 In Debutify Theme Version 8, "Color Swatches" has been renamed to "Variant Swatches".
How to Enable the Variant Swatches
STEP 1
Access your Shopify Admin's Theme Library to open the theme customizer.
STEP 2
Click on the Theme settings icon.
STEP 3
Open the Variant Swatches tab and toggle the Variant Swatches option.
How to Set Up Native Swatches
Native swatches allow you to display product color options automatically based on your Shopify product settings. Follow this guide to configure and add variants for native swatches in your store.
How to Set Up Native Swatches
STEP 1
Open the Variant Swatches tab.
STEP 2
Ensure that the priority is set to "Native swatches."
How to Add Variants for the Native Swatches
STEP 1
Access your Shopify admin and go to Products.
STEP 2
From the Products page, click Add product or select an existing product.
STEP 3
With the product open, scroll down to the Media section and add a Category to your product.
STEP 4
This will enable a new option in your product settings: Category Metafields. Add the required Meta Object and its corresponding entries.
STEP 5
Ensure the same option is added under the Variant section.
This will automatically apply the metafields created earlier.
STEP 6
Click Save to confirm your changes.
How to Set Up Custom Color Swatches
Custom color swatches differ from native swatches by allowing you to set up specific variants to your preference. You can assign a specific image to a variant option, showcasing its details beyond just a color.
How to Add Variants for the Custom Color Swatches
STEP 1
Open the Variant Swatches tab.
STEP 2
Ensure that the priority is set to "Custom Color Swatches".
STEP 3
Make sure the Option Name matches the variants you want to modify.
If your products were set up with the option name "Color" or "Farbe", ensure this is added.
If you want to apply color swatches to multiple options, separate them with a comma, e.g., "Color, Size".
STEP 4
Head over to Sections and open the Debutify Widgets section. Add the block Variant Swatches.
STEP 5
Within the Variant Swatches section, add a new Variant Swatch block.
Assign a block name for identification, such as
"Variant Color - Pink".Ensure the color name matches the exact variant name in your product listings. For example, if your variant is "Pink", enter "Pink" here. This also applies to other variant types like size ("XL").
Use the color picker to select a color or upload an image representing the color, product, or symbol you want to display.
STEP 6
Click Save to confirm your changes.
Disclaimer for Using Debutify Theme Widgets
When using widgets in the Debutify Theme, you are fully responsible for their configuration, content, and compliance with applicable laws and regulations. Debutify is not liable for any outcomes or consequences resulting from their use.
For the full disclaimer and additional details, please read the complete article here: Disclaimer for Using Debutify Theme Widgets.
Your commitment to transparency and ethical practices is crucial for building trust and maintaining a compliant online presence.