Yuva Knowledge base
  • Sections
    • 💡How to set up the swatches
    • ✨Recommended image sizes
    • ✨How to show social media icons in the footer
    • ✨How to hide the product description from the product page
    • ✨How to display sticky add to cart bar on the product page
    • ✨How to show different content on different pages/collections
    • ✨How to show size guide on PDP
    • ✨How to add custom badges
    • ✨How to setup the product variations
    • ✨Upgrade a theme
    • ✨Microdata schema
  • How to setup the presets
    • Set up the demo layouts
  • Amaze home page json
  • Amaze product page json
  • Amaze settings data json
  • Woofy home page json
  • Woofy product page json
  • Woofy settings data json
  • Classic home page json
  • Classic product page json
  • Classic settings data json
  • Bold home page json
  • Bold product page json
  • Bold settings data json
  • Elegant home page json
  • Elegant product page json
  • Elegant settings data json
Powered by GitBook
On this page
  1. Sections

How to set up the swatches

Please follow the below steps to set up the swatches on product page and filters. Also note that color swatches are not available in the product grids of collection pages.

NextRecommended image sizes

Last updated 1 year ago

  • Upon logging in, navigate to your Shopify dashboard and pick the Online Store > Themes tab.

  • When you click the Action button, a tiny drop-down box will appear. Press Edit code.

  • You are now on the page for the template editor. Go to the Assets folder → Add a new asset.

  • Repeat the above steps to upload the images for your color swatch.

Rules to follow for image upload for color swatch:

  • Size: You must upload an image with a size of roughly 20 × 20 pixels.

  • Extension: There must be a “.png extension.”

  • Naming conventions: The image's name must reflect the color option and be all lowercase with no spaces.

Here is a collection of examples:

  • If your color is "Light Blue," upload the image with the filename light-blue.png.

  • If your color is "Blue/Gray," upload the image with the filename blue-gray.png.

  • If your color is "Blue," upload the image with the filename blue.png.

Note: In case the theme is updated to the new version, all the existing swatch images uploaded will need to be uploaded again following the above procedure.

A problem: The assets have been updated, but the color swatches are still not showing.

To solve this, please make sure that the product option name is added in the theme editor. To know how to do that, follow the below procedure:

The problem is:

Go to the theme settings> Product> Color options name and add the option's label name, as shown below:

Adding the label name will connect the colors with that specific option name and the color swatches with start showing, as shown above. so the problem is solved.

💡