adartstudio

Color swatches & Drop-down options for product variants

Aries provides 2 types of variant selector: Color swatches or Drop-down options.
(Read here to know how to set product variants).

Color swatches

This feature lists all options of your variants as buttons.

  • Advantage:
    • show all available variants for customers to know
    • show sample of color instead of color name
  • Disadvantage:
    • 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 color, 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 settingsSwatches 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.


  • Advantage:
    • create a clean and neat product page
    • suitable for store having a huge number of variants
    • avoid the missing color in color swatches
  • Disadvantage:
    • 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.



    • Related Articles

    • Product Page settings

      Global settings Navigate to Theme settings > Product pages settings to customize all product pages. Product Gallery  You can change the position of gallery (top/left/right) in Product page layout.   Product Details Information There are 2 types to ...
    • Product badges (labels)

      Badge appears on the top left corner of a product item, based on some conditions. Aries supports these badges: Sold out: auto appear on a sold-out product (product inventory = 0) Sale percentage (auto calculated %): appear on a product having ...
    • Product Detail page

      Online Store > Themes > Customize Theme > General Settings tab > Product pages Product Gallery position: You can place it left side, right side or on top of content.   Details Information Togglable Tabs: After choosing Togglable tabs in Product pages ...
    • Product Detail page

      Online Store > Themes > Customize Theme > General Settings tab > Product pages Product Gallery position: You can place it left side, right side or on top of content.   Details Information Togglable Tabs: After choosing Togglable tabs in Product pages ...
    • Theme Configuration - General Settings

      General Settings The first section in this tab is “General”, where many general settings can be edited. Here you can edit these options: Back to top button: enable/disable Wishlist page: select the name of the page that uses "page.wishlist" template ...