Solved

Customizing Add to Cart button on one template

Carpinus
New Member
17 0 0

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/

 

Thank you so much!!!

 

 

Accepted Solution (1)

PaulNewton
Shopify Partner
6275 574 1324

This is an accepted solution.

Good day!

Use an alternate template with a custom-css setting

https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-t... 

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

 

Try the following starting styles in the custom-css setting 

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

 

Beyond that would be an advanced customization to create unique wording changes in the theme itself. 

 

If you need this customization setup for you then contact me directly by mail for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.

 

Good Hunting.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


View solution in original post

Replies 3 (3)

PaulNewton
Shopify Partner
6275 574 1324

This is an accepted solution.

Good day!

Use an alternate template with a custom-css setting

https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-t... 

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

 

Try the following starting styles in the custom-css setting 

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

 

Beyond that would be an advanced customization to create unique wording changes in the theme itself. 

 

If you need this customization setup for you then contact me directly by mail for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.

 

Good Hunting.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Carpinus
New Member
17 0 0

Thank you so much Paul Newton! It worked like a charm and was super easy to implement!

Thank you for your expertise and help - all the best 🙂

Carpinus
New Member
17 0 0

Good morning Paul!

 

Tried to implement the 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.

 

I already tried:

- using different browser

- using incognito mode

- using different device

- tried on the older themes

- cleared cache, history etc.

- deleted all the sections from the template in the online editor