Aries provides 2 types of variant selector: Color swatches or Drop-down options.
to know how to set product variants).
This feature lists all options of your variants as buttons.
- show all available variants for customers to know
- show sample of color instead of color name
- not suitable for store having many variants
- some colors turn gray because they're not supported (read solutions below)
Aries supports colors from this list: colors.commutercreative.com/grid/
If a color is not in the list, it will show as gray. There're some solutions to solve a missing color:
1. Go to the color list to find a related colo
r, then change the color name in your product variant to the same name as that color.
For example: your product has a color named "Brown Red", but this color is not supported. You should change the color name to "Maroon" - which is a related color supported in the list.
2. Upload an image to replace a color
If you want to replace default color by an image color, you need to upload an image with relevant color name into Theme's assets.
- Open Online store > Themes > Actions > Edit code
- Find folder Assets > Add a new asset > Upload your image (eg. "navy.png", "black.jpg"...)
Then this image will replace all color with the same name.
There are some rules for the uploaded image:
- Image's name should be written in lowercase. So for example if your product color is "Gold" then the image's name must be written as "gold.png", not "Gold.png".
- The color swatches identify spacing between words by hyphens, so if you want to replace a color named "black and gold", then the uploaded image should be named "black-and-gold.png".
- All images should be in the same format: png or jpg.
- Set the option of image type in Theme settings > Swatches settings. If you uploaded a png image, then this option must set in PNG, not JPEG.
3. Change to Drop-down options
If there're too many missing colors, you can change from Color swatch to Drop-down option.
Read here to know how to change it.
This feature collapses all available variants in a drop-down selector.
- create a clean and neat product page
- suitable for store having a huge number of variants
- avoid the missing color in color swatches
- only show color name, can't show color picture
- need to click on the drop-down to see all available variants
How to change variant selector type
Variant selector shows up on product page, quick shop and quick view.
To change variant selector on product page
: go to Theme settings > Product pages settings > Extras > Variant selector type
To change variant selector on quick shop: go to Theme settings > Product item settings > Quickshop Box settings > Variant selector type inside quickshop box.
To change variant selector on quick view
: go to Theme settings > Product item settings > Quick view modal settings > Variant selector type inside quickview modal.