Add text above or below Add to Cart Button

SSmithEagle1
Visitor
2 0 0

Hello, 

 

I've been searching on here and speaking with Shopify Experts for the last week, and I can't seem to figure this out. 

 

I'm not skilled with code in any way, and just recently started learning how to insert simple code onto my page. 

 

I'm using the Workshop 2.0 theme, and would like to add a text box to every product page, either above or below the "Add to Cart" button, preferably in green text, italics, and about 20px size. 

 

I would like my text to say "Ships in 1-2 Business Days!" 

 

If possible, I would like to be able to customize this for individual products, such as ones that have a lead time. If a metafield is required for this that is fine, I just need to know how to create one and edit it.  

 

Any help is appreciated, as I've spent a week trying to figure this out on my own with no luck. 

Replies 3 (3)

JustinNg
Shopify Partner
21 3 0

Hi. You can achieve it by using metafield.

 

Please follow these steps

 

1. Go to Settings => Custom data and add a product metafield definition like that

 

JustinNg_0-1696000850572.png

 

2. Go to Online Store => Themes => Click Edit code on theme you want to customize

 

3. Find code snippet of the "Add to cart" button and paste this code below or above it. Don't forget to click Save

 

{% if product.metafields.custom.custom_text %}
    <p style="color: #008060; font-style: italic; font-size: 20px;">{{ product.metafields.custom.custom_text }}</p>
{% endif %}

 

JustinNg_1-1696001181951.png

4. Go to product you want to display this text, add your text in Metafields box at the bottom of page

JustinNg_2-1696001271724.png

 

Please let me know if you still need help.

Smartify - FREE Post Purchase Survey


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Website
SSmithEagle1
Visitor
2 0 0

Hello there, 

 

Thank you, this has helped me get the ball rolling on this. However, I can't seem to find exactly where to insert the code. I do not have a "main-product.liquid" Section. I can't seem to find the "Add to Cart" snippet anywhere. 

 

 

 

magneticprints
Tourist
11 0 0

Thanks for posting this JustinNg, the instructions are good and actually do work. The only thing is the text displays below the buy button instead of below the add to cart button. If there is a way to display it below the add to cart button instead, would be curious to know. Thanks!