Customizing Add to Cart button on one template

Store Design
, , , ,
1

Good day!

I would love to customize “Add-to-Cart” on one template of exclusive unique products making it “Buy Similar” instead of Add to Cart. I know how to change add to cart text on the button throughout all the website (via languages in themes), however I am looking to apply it only to one product template.

Website:

https://nectarflowersottawa.ca/

Example of the product:

https://nectarflowersottawa.ca/products/tropical-extravaganza-bouquet

This is what I tried to implement the piece of custom code in the online theme editor but it keeps saying “Online Store editor session can’t be published” every time I tried to save the theme.

Code that I am adding:

button[data-add-to-cart]:after {
content: “Buy Similar”;
display: block;
}
button[data-add-to-cart] > span {
display: none;
}

I need to change the wording “Add to cart” on one of the product templates - we are a flower shop and need it to say “Buy Similar” for certain seasonal products

THANK YOU SO MUCH!!!

2

Hi @Carpinus ,

Can you provide us the URL of the product pages on which you want the button to say “Buy Similar”?

3

Hello @Carpinus

can you share this specific template url

4

Hi @Carpinus
The CSS code is correct. Have you added it to the end of the theme.css file?

5

If you just want to change “Add to card” to “Buy Similar” and these feature are same, you navigate Edit code and then open en.default.json.

Acme_0-1722358024624.png
Acme_0-1722358024624.png536×152 4.6 KB

6

thank you so much for your response!

as an example, this product: https://nectarflowersottawa.ca/products/tropical-extravaganza-bouquet

7

thank you so much for your response!

yes, absolutely - as an example, this product:

https://nectarflowersottawa.ca/products/tropical-extravaganza-bouquet

8

thank you so much for your response! I have tried and it changed the button on all the website instead of one template. Would you have any insight on this? Thank you again for your time and help!

9

thank you so much for your time and your response! Would not it change the button on all the website pages? I only need to have it on one (or a few) templates and to have control over it

Example product: https://nectarflowersottawa.ca/products/tropical-extravaganza-bouquet

Thank you so much again for your insight and time!

10

Hi,
That’s right. We must control over it. Please follow step. :slightly_smiling_face:

  1. create a new setting for “Buy SImiliar” in buy-buttons block of main-product.liquid like as “show_buy_similiar_title”.
  2. add buy_similiar variable to en.default.json.

Acme_1-1722395205374.png
Acme_1-1722395205374.png629×241 12.1 KB

  1. insert a new line for this title in buy-buttons.liquid.

Acme_0-1722394906667.png
Acme_0-1722394906667.png1045×441 21.6 KB

  1. online store->theme->customize create new template or select your current template for this product info.
    select buy buttons schema and then uncheck buy_similiar_title check.
    Overall, all product as you selected the template, you can see title “Buy Similiar” instead of “Add to Cart”.
11

looking forward to hearing from you :slightly_smiling_face:

12

looking forward to hearing from you, thank you so much!!!

13

Hi @Carpinus ,

We’re happy to see that our suggestion helped you solve the issue.

Can you kindly give us likes or mark as solution?

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Thanks in advance.