Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi
I am trying to add a "more colours available" text to my websites product pages. Any advice on what code needs to be added? Ive tried a few coding pieces that vie found on the community but unfortunately they haven't worked. Thanks in advance
Where would you like the text to appear on the product page and what theme are you running?
Hi. Thanks for getting back to me. I am running a DAWN 15 theme and I would like this to appear underneath the product name or underneath my products price just to highlight that there are more items available 🙂
Hi there! To add the desired text open the customize tool for the specific theme you are working in. Navigate to your product template. On the left you'll see Template > Product information. At the bottom of the Product information you'll see "Add block" click this and select "Text". Then you can drag and drop to the desired location. Click on the new text block to update the text with "more colours available". Let me know if that makes sense or you need further explanation. Cheers!
Hi @ACEOFIRON You need to change the code in your theme files to achieve the same.
Please add the below code:
<p class="text">more colours available</p>
Please follow the steps:
Here is the screenshot for your help:
After this add this code:
<style>
p.text {
margin-top: -14px;
}
</style>
Please follow the steps:
Result:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
@sahilsharma9515 The solution does not require any custom code. The OP stated in a reply that they are using Dawn v15+ theme. This can be accomplished with the product section "text" block via the Customize tool.
Hi @ACEOFIRON You can even do it with the custmoize section as well, I missed that you have mentioned you are using Dawn 15 theme.
For doing it with customize option please follow the steps.
You can change the text and just click save, it will work.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
Also thanks @NovakNorth906 for pointing it out.
- Your
@sahilsharma9515 No problem. I already stated what should be the accepted solution adding via the Customize tool yesterday, but my answer is not as clean and organized as yours. I am a senior Shopify dev, but new to posting on the Shopify Community forums. Guess I'll need to improve my responses moving forward!
Can I do this to the product grid page too? Or is this a section that would require code. Its the grid that I really want it to display on so that customers don't just see a black t-shirt and get confused as to where my navy or khaki t-shirts are for example. Thanks in advance.
I am trying to add the 'more colours available' under the price on my product grid page. Here's a link and a screenshot.
https://aceofironapparel.com/collections/t-shirts
@ACEOFIRON Yes this is possible, but it will require some custom coding. Here is what you'll need to do:
<span>More colours available</span>
Please reference the screenshot below
Let me know if you need help styling the element.
Please note this will apply to all products in your catalog. If you wish to only use for specific products I can guide you on a solution that uses a product metafield, and will only be active under products that you want to show "more colours available" for.
If I managed to help you then, don't forget to Like it and Mark it as the Solution!
Kind regards,
Mark
Hi Mark
Thank you. and yes please if you could provide the additional code info for it to apply only to products with multiple colours that would be appreciated. As I have some t-shirts where only 1 colour is available, and others with more than 1.
Cheers in advance
Hi @ACEOFIRON,
There are a couple different ways to handle this. First let's try replacing the code I previously provide with the following:
{% for option in card_product.options %}
{% if option == 'Color' %}
<span>More colours available</span>
{% endif %}
{% endfor %}
Let me know if this works! Otherwise we might need to modify a little bit.
If I managed to help you then, don't forget to Like it and Mark it as the Solution!
Kind regards,
Mark
Hi Novak
Thanks, however unfortunately that didn't work, ive attached a few screenshots for reference
@ACEOFIRON Let's try this code solution instead. Could you please delete the previous code I provide and replace it with the following?
{% if card_product.variants.size > 1 and card_product.options_by_name['colour'].values.size > 1 %}
<span>More colours available</span>
{% endif %}
Hopefully this one does the trick!
If I managed to help you then, don't forget to Like it and Mark it as the Solution!
Kind regards,
Mark
Hi Novak
Apologies for the delay.
So, this 'kind of' worked. Just the wording is in the wrong place, I'd like it to be under the £28 price if possible please instead. Ive attached a screenshot.
Look forward to hearing from you
Cheers
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025