TeamsIndividualsPricingExpertsAbout UsContact

Ready to talk to a live expert?

Click the start a session button to instantly be matched with an expert so they can walk you through different questions you may have with your tools.

How Do I Reduce The Size Of The 'Add To Cart' Button In The Supply Theme?


Hopps Team

Hi there. Welcome to Hopps help where we try to answer commonly asked questions in two minutes. The question we are answering today is how do I reduce the size of the add to cart button in the supply theme? So, if we want to reduce the size of this after cart, we can do this with a simple CSS change. So, let's go to our online store themes and then go to actions. We're going to want to duplicate the theme because we're doing a code change. And if we have any issues, we mess anything up. We can always just revert back to this. Okay? And now we're going to go to actions, edit code, and we're going to want to find our theme dot S C S S dot liquid file. This should be in our assets here. There we go. And now we're going to want to go all the way to the bottom and we're going to paste in a piece of code. Okay? Oops. To the bottom here, we're going to paste in the code. That's in the description of this video. I have it right here. I just did a copy and copy. Now we're going to write. Click and paste. And these options will reduce the size of that button, but you may want to tweak them a bit to your liking. So, this is the width of the button. It's a percentage. This is the height and pixels, and this is the font size. And you're going to want to tweak all of these. You can just change the numbers around to your liking. Okay? So, let's hit save and refresh, and we see that button is smaller. It looks like the font is a little too big. So, we may want to jump in here and reduce the font size. Maybe like 11 saves, refresh. That looks a bit better.


Related Videos