Shopify themes, liquid, logos, and UX
I want to add something like 'more colours available' on the collection page by a product when that product has colour variants. What is the code for this and where does it need to be added for debut theme? Additionally but not as important id like the text of 'more colours available' to be a certain colour (Blue) (#1878B9). Any help would be greatly appreciated.
Solved! Go to the solution
This is an accepted solution.
1. If just 'more colours available'
+ If you're using Debut theme, from this file assets/product-card-grid.liquid. Add these line of code to detect if product has many colors
{% for product_option in product.options_with_values %}
{% if product_option.name == 'Color' or product_option.name == 'Colour' %}
{% if product_option.values.size > 1 %}
<p>More colours available</p>
{% endif %}
{% endif %}
{% endfor %}
Result should be like this
2. If you want showing color swatches
+ You can follow this document if you are familiar with code https://avada.io/shopify/docs/add-color-swatches-on-collection-page.html or search with keyword: 'Shopify show color swatch on collection page'
+ If not, you should hire a developer to do it for you. This would take about 4-6 hours to make.
This is an accepted solution.
1. If just 'more colours available'
+ If you're using Debut theme, from this file assets/product-card-grid.liquid. Add these line of code to detect if product has many colors
{% for product_option in product.options_with_values %}
{% if product_option.name == 'Color' or product_option.name == 'Colour' %}
{% if product_option.values.size > 1 %}
<p>More colours available</p>
{% endif %}
{% endif %}
{% endfor %}
Result should be like this
2. If you want showing color swatches
+ You can follow this document if you are familiar with code https://avada.io/shopify/docs/add-color-swatches-on-collection-page.html or search with keyword: 'Shopify show color swatch on collection page'
+ If not, you should hire a developer to do it for you. This would take about 4-6 hours to make.
Thank you very much, that worked perfectly. I also added <p style="color: #1878B9;">More Colours Available</p>
Thats the finished result
Thank You for your help. how can i now do the same thing but for venture theme. Thank you in advance
User | RANK |
---|---|
135 | |
91 | |
77 | |
66 | |
51 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022