If you're not comfortable making code changes to your theme, we highly recommend working with one of our partners who specialize in theme customizations. Our support is limited to this guide.
We cache color swatch files so they load faster since they won't change often. The trade off is that if you decide to change the swatch it won't be updated right away.
To force your swatches to update to the new image you've uploaded, you'll need to jump into the code briefly.
First, open up your theme code editor by navigating to Online store > Themes , and then click on ••• beside your theme, and select Edit code.
-
Impulse
Open these three files:
• snippets/product-grid-item.liquid
• snippets/variant-button.liquid
• snippets/collection-grid-filters-form.liquid
-
Motion
Open these three files:
• snippets/product-grid-item.liquid
• snippets/variant-button.liquid
• snippets/collection-sidebar-filters.liquid
-
Streamline
Open these three files:
• snippets/product-grid-item.liquid
• snippets/variant-button.liquid
• snippets/collection-filters.liquid
-
Expanse / Fetch / Gem
Open these files:
• snippets/product-grid-item.liquid
• snippets/variant-button.liquid
• snippets/collection-grid-filters.liquid
• snippets/collection-sidebar.liquid
For Expanse 7.0, Fetch 4.0 and Gem 4.0, open these files:
• snippets/swatches.liquid
• snippets/variant-button.liquid
• snippets/text-filter.liquid
For Expanse 8.0, Fetch 5.0, Gem 5.0, open this file:
• snippets/block.product-variant-picker.button.liquid
For Expanse 9.0 or later versions, open these files:
• snippets/block.product-variant-picker.button.liquid
• snippets/list.product-card.swatches.liquid
You'll need to remove some code that needs to be done carefully, so it's best you back up the file first. If something goes wrong, you can always follow these steps to revert the file.
Search and delete | split: '?' | first in these files and you're all set. The code should now look like this:
assign color_image = color_file_name | file_img_url: '50x50' | prepend: 'https:'