Can anyone assist me with adding a note under each product card “More colors available” on the collection pages? I tried a few code suggestion in other threads and nothing worked.
My theme is Dawn 15.4.0. Thank you!
Topic summary
A user running Dawn theme version 15.4.0 seeks to display “More colors available” beneath product cards on collection pages when multiple variants exist.
Initial Solution Proposed:
- Insert conditional Liquid code in
card-product.liquidchecking ifproduct.variants.size > 1 - Add custom CSS to style the note text
- Older code snippets don’t work due to structural changes in newer Dawn versions
Implementation Challenge:
- User struggles with exact code placement within the file
- Multiple participants offer to provide hands-on assistance via collaborator access
Working Solution:
- Another contributor provides a screenshot showing precise placement near the ‘card-information’ section
- Initial code displays the note on all products (not just multi-variant ones)
Final Fix:
{%- if card_product.variants_count > 1 -%}
<span class="caption-large light">More colors available</span>
{%- endif -%}
This corrected code properly checks variant count using card_product.variants_count instead of product.variants.size, ensuring the note appears only for products with multiple color options. The issue appears resolved with visual guidance and refined conditional logic.
I actually ran into this exact issue on one of my stores recently (also using Dawn). The key is that newer versions like 15.4.0 structure product cards a bit differently, so most old snippets you’ll find don’t work anymore.
You’ll want to manually insert a small note block inside your card-product.liquid file, right after the product title (or price, depending on where you want it).
Something like this:
{%- if product.variants.size > 1 -%}
<p class="more-colors-note">More colors available</p>
{%- endif -%}
Then add a tiny CSS touch in your custom CSS area to make it blend nicely:
.more-colors-note {
font-size: 13px;
color: #7b7b7b;
margin-top: 3px;
}
This shows the note only if the product has more than one variant (like color options).
If you’d like, I can guide you on where exactly to place it in your version of Dawn; since the section structure slightly differs between updates and it’s easy to misplace. I just aided another merchant get it working perfectly last week.
@dros0120 please implement solution given by @Michross , if you find it difficult then you can provide collab access and I can do it for you
Thank you so much. Can you advise where to put this in the card-product.liquid file,
Hi - I am not sure where to put the code, can you assist?
/snippets/card-product.liquid, here
Hey @dros0120,
The requested changes requires to do the custom code in your theme file. Could you please share the Store url and collab code in the p/m so that i can take a look and implement the requested changes.
Best,
Daniel
Thank you I have that file open in the css editor, but I’m not sure where to place the code
Let me know if everything get’s sorted out thanks.
@dros0120 if you can send me website link and collab code, then I can send request and do it for you
Hi @dros0120,
Please go to Actions > Edit code > snippets > card-product.liquid file, find ‘card-information‘ and add code here:
Code:
<span class="caption-large light">More colors available</span>
If I helped you, then a Like would be truly appreciated.
Best,
NamPhan
1 Like
Thank you, the screen shot was a huge help. I was not sure what line to place the code before. I added this in and it looks great, but the only issue now is having it only show up for items with multiple colors. Now it shows on everything.
Hi @dros0120,
Please change code:
{%- if card_product.variants_count > 1 -%}
<span class="caption-large light">More colors available</span>
{%- endif -%}