Make the Featured Product Add To Cart Button Wider

Solved

Make the Featured Product Add To Cart Button Wider

jermohler
Tourist
6 1 2

Hello!

 

I'm struggling to style the Add to Cart button on the Featured Product on one of my pages. It seems like all the buttons across the rest of my site are the appropriate width, but I can't seem to figure out the code, where to put the code, or any other way to make this button wider. Any help would be greatly appreciated.

 

Here's the link to the page - https://outlandentertainment.com/pages/retailers

Accepted Solution (1)

devcoders
Shopify Partner
992 127 251

This is an accepted solution.

Hello @jermohler 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

 

.t4s-justify-content-center.t4s-btn-effect-fade.t4s-btn-loading__svg{
   width: 200px !important;
}

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

Replies 5 (5)

AnneLuo
Shopify Partner
1292 227 262

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
.t4s-justify-content-center.t4s-btn-effect-fade.t4s-btn-loading__svg{
   width: 150px !important;
}
</style>

Result:

AnneLuo_0-1737683240273.png

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

devcoders
Shopify Partner
992 127 251

This is an accepted solution.

Hello @jermohler 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

 

.t4s-justify-content-center.t4s-btn-effect-fade.t4s-btn-loading__svg{
   width: 200px !important;
}

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
jermohler
Tourist
6 1 2

This worked like a charm. I spent hours yesterday trying to figure this out on my own - thank you!

devcoders
Shopify Partner
992 127 251

Hello @jermohler 

That's great to hear! 🎉 If you need any more help or have further questions, feel free to ask. Happy coding and best of luck with your store! 

 

Like and accepting the All solution. Thank you!

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

GTLOfficial
Shopify Partner
769 160 169

Hello @jermohler 
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> button-style.css
add this code at the end of the file and save.

.\`tn.t4s-btn-base.t4s-btn-style-default.t4s-btn-color-dark.t4s-w-100.t4s-justify-content-center.t4s-btn-effect-fade.t4s-btn-loading__svg {
width: 14rem !important;
}

result
181.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh