Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;
}
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:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
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;
}
This worked like a charm. I spent hours yesterday trying to figure this out on my own - thank you!
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!
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
If this was helpful, hit the like button and accept the solution.
Thanks
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025