Add image beneath ADD TO CART button in DEBUT theme

New Member
6 0 0

Hi there,

 

I was hoping someone could teach me how to add the following kind of image beneath my ADD TO CART button:

http://tinypic.com/r/6z1zxs/9

The FREE SHIPPING / MONEY-BACK GUARANTEE image is what I am referring to. I am using the DEBUT theme.

I would love to learn how to do this myself - any help greatly appreciated :)

0 Likes
Shopify Staff
Shopify Staff
555 4 87

Hi Matty!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to optimise your product pages so let's see how you can add a button below the buy button :) The most reliable way to attach this to the product page for each product is to add the image to the theme itself and then insert code to the product template file to pull it where you would like the image to appear.

In the Edit HTML section, open the assets folder and add a new asset. Locate your image and upload it. The image is now in your assets folder and we can use a command to make it appear on a liquid template. The syntax of that command would be:

<img src="{{ 'FILENAME.jpeg' | asset_url }}" alt="alttxt" >

So for example on my test Debut store I opened a image called payment-methods.png to the assets folder. Then I opened product-template.liquid and found where the Add to Cart button is and added this code below:

<img src="{{ 'payment-methods.png' | asset_url }}" alt="paymentmethods" >

Then you can see the image appear below the Add to Cart button:

Hope this helps Matty, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

1 Like
New Member
6 0 0

Amazing, thank you Liam! Works like a charm and so simple :D

0 Likes
New Member
1 0 0

Hello

Help needed please. 

We need to replicate this action in the Supply Theme. Tried using the above instruction however the HTML looks different, We are super cautious not to cause any irreparable damage to the store by playing with the code when we are mere novices in this field. 

Hear from you soon so we can add the payment images

Thanks to you 

 

0 Likes
New Member
1 0 0

Bildschirmfoto 2020-01-15 um 11.02.03.png

Tryed the same in debut theme.. doesnt do anything. anyone got a hint for me why?

0 Likes