Add 'More Colours Available' to collection page

Add 'More Colours Available' to collection page

ACEOFIRON
New Member
8 0 0

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

 

 

Replies 16 (16)

BlackCro
Shopify Partner
103 19 17

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

BlackCro.co.uk

CRO & Development Agency



Better Forms - Get a better contact form today!
ACEOFIRON
New Member
8 0 0

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
Shopify Partner
41 4 5

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
Shopify Partner
1266 165 244

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:

  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:

sahilsharma9515_0-1729668786111.png

 

After this add this code:

 

<style>
p.text {
    margin-top: -14px;
}
</style>

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 </body> tag

Result:

sahilsharma9515_1-1729668893981.png

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

 

Best Regards

Sahil

 

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


NovakNorth906
Shopify Partner
41 4 5

@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
Shopify Partner
1266 165 244

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. 

sahilsharma9515_0-1729685976628.png

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

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


NovakNorth906
Shopify Partner
41 4 5

@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
New Member
8 0 0

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
New Member
8 0 0

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

 

Screenshot 2024-10-25 at 11.16.59.png

NovakNorth906
Shopify Partner
41 4 5

@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

 

<span>More colours available</span> 

 

 

Please reference the screenshot below

 

NovakNorth906_0-1729858125689.png

 

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
New Member
8 0 0

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
Shopify Partner
41 4 5

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

ACEOFIRON
New Member
8 0 0

Hi Novak

 

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

Screenshot 2024-11-09 at 08.25.23.pngScreenshot 2024-11-09 at 08.25.13.png

 

 

NovakNorth906
Shopify Partner
41 4 5

@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

ACEOFIRON
New Member
8 0 0

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
New Member
8 0 0

Screenshot 2024-12-13 at 12.57.20.png