How to manage variant swatch?

How to manage variant swatch?

The following tutorial is going to show how to manage variant swatch.

First of all, we would like the thank you for using our theme.

Apollotheme - a website where you can find the best shopify theme and Extensions as well. We are proud of our professional themes, extensions. With long-term experience working on Opensource, we have created a number of great extensions for Shopify like: Apollo Shopify Framework, Apollo Shopify Megamenu Module ...

Apollotheme is also famous for custom work, if you encounter trouble or need help with your website, coding, .... you can find us on Apollotheme.com then we will support you or give you suggestions.

Demo

1/ Variant drop-down & Variant swatch.

A/ Variant drop-down


B/ Variant swatch

2/ Variant swatch color

A/ Swatch color with background is a standard color

Standard color can be used with CSS code, in English. You can refer here


B/ Swatch color with background is image

In case you don't like standard color, you want to add new colors, such as : RedCaro, BlueSmart, GreenTea,... => you need upload images with name: redcaro.png, bluesmart.png, greentea.png

You can use the photo editor to create images or search photo from internet. Normal, we use images size at 35 x 35 pixels

You can check the location where you need upload the images as belows:

Go to Theme -> HTML/CSS -> Swatch.liquid -> find append: file_extension and you can see the letter following it.

If text is file_url: you need upload image in Admin -> Settings -> Files

If text is asset_url: you need upload image in Themes -> HTML/CSS -> Assets -> Add a new asset

Recommendation

Hope this tutorial is helpful for you while developing your e-Commerce Shopify site. Access Forum or send us email through the Contact Form. We will try to solve your issues as soon as possible (within 2 days).