- Encourage customers to click through to the product page and see more Color options
- Tell customers that more colors are available – not only the one in the photo
Here’s what it will look like once you’re done adding “More Colors” to your collection grid on your Shopify store:
Step 1: Open Your Theme Editor In The Shopify Store
Firstly, do a backup of your theme. Next go to Online Store > Themes > Click Edit HTML/CSS (tutorial here). This will open your theme editor.
Step 2: Find Your Product Loop
Inside your theme, there’ll be a product loop file. What this does is a loop through all the products wherever you see a product grid. For example, on your homepage, on collection pages, in Related Products, and so-on.
It depends on the theme, but normally it will be located under the Snippets folder, and will usually be called something like:
- product-grid.liquid
- product-listing.liquid
- product-thumbnail.liquid
Or similar. Find that file, and open it up.
Step 3: Insert The Code (Below)
Once you’ve found it, you need to find where the price is being shown, so we can insert the code underneath it. That is, if you want it to look like the screenshot above. (If you want it somewhere else, e.g. above the price, you could do that too, just change where you paste it). For now, let’s assume we want the “Other colors” link to show underneath the price in the product grid, like the screenshot above.
In that case, look for {{ product.price }} or {{ product.price_min }} in your file by using CTRL+F to find. (Or you could just look for ‘price’ and it will likely show up as well.)
Once you’ve found it, insert the code below:
{% assign option_index = 0 %} {% for option in product.options %} {% capture downcased_option %}{{ option | downcase }}{% endcapture %} {% assign option_index = forloop.index0 %} {% assign how_many_options = 0 %} {% assign current_options = '' %} {% for variant in product.variants %} {% assign current_option = variant.options[option_index] %} {% unless current_options contains current_option %} {% if how_many_options > 0 %} {% assign current_options = current_options | join: '|' | append: '|' %} {% endif %} {% assign current_options = current_options | append: current_option %} {% assign current_options = current_options | split: '|' | sort %} {% assign how_many_options = current_options | size %} {% endunless %} {% endfor %} {% unless option == "Title" %} {% if current_options.size > 1 and option contains "Colo"%} More Colors > {% endif %} {% endunless %} {% endfor %} Step 4: Save.
Save the file. Then refresh your collection grid (e.g. by going to YOURSHOP.com/collections/all) and you should see it there.
Notes:
- You can change “More Colors >” to whatever text you want, e.g. “Show more colors”, “See other options”, etc.
- We check for “Colo” above, to account for both Color (American English) and ColoUr (British/Australian English).
We invite to check out our other great Blog posts on Shopify Responsive Checkout we have other tutorials on backing-up your Shopify Store. Lastly, we would love for you to visit our services page! We can help you explode your sales!
—
Questions? Happy to answer in the comments. Thank you again for following our Shopify Insider Blog @ Blackbelt Commerce, we have many other valuable and informative posts that will help you to continue to optimize your website: here are our top recommendations; How To Back up Your Shopify Store, the importance of e-commerce stores, 4 social media tricks for your e-commerce store, and How To Show Percentage Cheat Sheet. Make sure to check out all of our customer reviews. Also, you can learn all about who are the Shopify Experts at Blackbelt Commerce. Kizunaquant 評判
