Add 'More Colours Available' to collection page

[ACEOFIRON]

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

[BlackCro]

Where would you like the text to appear on the product page and what theme are you running?

[ACEOFIRON]

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

[NovakNorth906]

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!

[sahilsharma9515]

Hi @ACEOFIRON You need to change the code in your theme files to achieve the same.

Please add the below code:

more colours available

Please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search main-product.liquid in the code in left hand side in your theme.
6. Add the following code after line number 121, if you didn’t changed anything in your theme earlier.
7. If you have changed any code in this file earlier then search “product__tax” and add the code just outside the “If” statement.

Here is the screenshot for your help:

After this add this code:

Please follow the steps:

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the button next to Customize in live Theme.
4. Click Edit Code.
5. Search theme.liquid in the code in left hand side in your theme.
6. Add the following code in the bottom of the file above tag

Result:

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

[NovakNorth906]

@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.

[sahilsharma9515]

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.

1. Login in shopify admin.
2. Click on the Online Store.
3. Then click on the Customize button in live Theme.
4. Click on Home page and change it to product page.
5. Then under product information add a text block under the price.
6. Then add the text there.

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.

[NovakNorth906]

@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!

[ACEOFIRON]

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.

[ACEOFIRON]

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

[NovakNorth906]

@ACEOFIRON Yes this is possible, but it will require some custom coding. Here is what you’ll need to do:

1. Log into Shopify admin dashboard
2. Click Sales Channels > Online Store
3. Locate the theme you want to update and click “…”
4. Click edit code
5. Open snippets/card-product.liquid
6. On line 159 add the following

More colours available

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

[ACEOFIRON]

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

[NovakNorth906]

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' %}
    More colours available 
  {% 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

[ACEOFIRON]

Hi Novak

Thanks, however unfortunately that didn’t work, ive attached a few screenshots for reference

[NovakNorth906]

@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 %}
  More colours available
{% 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

[ACEOFIRON]

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

[ACEOFIRON]