Customizing Add to Cart button on one template

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!!!

Hi @Carpinus ,

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

Hello @Carpinus

can you share this specific template url

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

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.

thank you so much for your response!

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

thank you so much for your response!

yes, absolutely - as an example, this product:

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

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!

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!

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.

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

  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”.

looking forward to hearing from you :slightly_smiling_face:

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

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.