How can I add a custom icon to my sold out item buttons?

Store Design
1

So I’m trying to see how do I add some custom Icon or Text to my buttons when an item is SOLD OUT.

This is an item that’s sold out mostly, except one size. https://grittysoul.com/products/cleopatra-stones-shorts

When an Item is sold out, I’d like the button color and everything to look the same as a variant that is available, except I want to add the little “BELL” icon. See image attached.

Can you help me to do that?

Motion Theme 2.0

318522AD-88D2-4061-94BC-EC16CC21CE86.jpeg
318522AD-88D2-4061-94BC-EC16CC21CE86.jpeg1391×567 43.5 KB

2

Hi, @GrittyKim

Yes, I can definitely help you with that! To add a custom icon or text to your buttons when an item is sold out, you will need to make some modifications to your Shopify theme’s code. Here are the steps you can follow:

  1. From your Shopify admin, go to Online Store > Themes > Actions > Edit code.

  2. In the left-hand sidebar, under “Sections”, click on “product-template.liquid”.

  3. Find the section of code that generates the “Add to cart” button. It should look something like this:

{% if current_variant.available %}
  
{% else %}
  
{% endif %}
  1. To add the “BELL” icon or any custom text, you can modify the code to look something like this:
{% if current_variant.available %}
  
{% else %}
  
{% endif %}

In this example, I’ve added the class “sold-out” to the button element and inserted an icon with the class “icon-bell” after the “Sold Out” text. You can replace the icon and text with your own custom content as needed.

  1. Save your changes and preview your product page to see the updated button.

Again, if you’re not comfortable making these changes yourself, it’s always a good idea to work with a Shopify expert or developer to ensure that everything is done correctly.

1 Like
3

Hi @Ignelis I don’t have that template under the sections. So I’ll have to have someone to do it for me.

https://www.loom.com/share/68f216eb3db74fc799a84dec6eb9b0b0

Do you offer that service?