How to add an icon before a button label

Shopify Discussion
1

Hi,

I want to add an icon before a button label in a button. One of the buttons I used is inside the “Image with Text” section and the other one is inside the “Rich Text” section.

Here are a couple of screenshots to explain what I am looking for.

SS01.jpg
SS01.jpg1066×562 56.8 KB

SS02.jpg
SS02.jpg719×360 29.1 KB

2

Hi,

You will need to find this file:

text-and-image.liquid

Press Crtl + F and look for: {{ section.settings.button_label }}

Insert an icon just before it on the same line and define it`s width and height.

Let me know if this helped.

1 Like
3

Thank you but I don’t want to insert the icon globally to all the buttons in all the “Image with Text” sections. I want to add the icons to some specific buttons.

Oh . . . by the way, I am using the Refresh theme.

4

In this case I would only imagine using IF statement to check which page you are on, but this will only work if you want to have same button “Image with Text” blocks within one page. If you want to have different buttons on the same page, then this won`t work.

Following the steps in my previous message, find

{{ section.settings.button_label }}

And paste this instead:

{% if handle contains ‘index’ %}

{{ section.settings.button_label }}

{% else %}

{{ section.settings.button_label }}

{% endif %}

  1. img src - paste your image link in place of YOUR_IMAGE and adjust width

  2. Change handle to the specific page you want this to display in. Index page is the home page. Handle is the text after your website name, such as: mywebsite.com/handle/handle/handle

1 Like
5

Thank you so much Kgbfashionista for your help. I made the icon to work following your instructions.

But as you mentioned, it has limitations especially when I want to use different icons on the same page.

Anyway I will keep using it for now until I find a perfect solution.

6

Yes, it helped . . . but partially. Now whenever I use the button it has the same icon everywhere.

But thank you anyway.

7

Hi @ideabliss ,

Thanks for reaching out!

Some great suggestions on the thread here. I just wanted to chime in and remind you that you can always reach out to our Support team in you’re using a Shopify free theme. Assuming your store has enough complimentary design time left, our team may be able to customize this for you.

You can reach out to our Contact Us page at this link. Then log in to your store. It will allow us to verify you as the store owner securely. Once you have successfully logged in, you should be able to reach out to a Support Advisor and discuss the customization request, as there are specific customizations supported.

Also, if you’re editing theme code yourself, it’s a good idea to make a backup copy to discard your changes and start again if you need to.

Also, how is your business going, and what do you sell? Let me know if you need any help with other aspects of your business.

1 Like