Clean, Simple but Powerful

A simple way to increase the size of your Shopify “add to cart” button (step-by-step tutorial)


  • By Editor Team
  • 16 Sep, 2022
  • Guide
  • 4 Min Read
Last Update: 17 Sep, 2022

“Your add to cart CTA should always be within the viewport, always visible. Give it as much real estate as possible.”

Matthew Tony, A business planner at GlassesUSA.

The logic behind it is simple. The bigger your Shopify add-to-cart button is, the more visible it is. Not to mention easier to click or tap on.

Today, I will show you how to do that in under 5 minutes. — Stay with me. Who knows maybe your store conversion rate will spike after this.

An easy way to enlarge your add to cart button. I know all you want is the process.

The following are the steps:

Step-1

First, click the “Edit code” option in the drop-down menu of the 

increase the size of your shopify add to cart button

Step-2

Clicking it will take you to the theme files page. Once here, you will need to find the “theme.scss.liquid” or “themes.css” file depending on your theme.

I am using the Brooklyn Shopify theme where the file has the name “theme.scss.liquid”. You can also find this theme in the “Assets” folder.

increase the size of your shopify add to cart button

Step-3

The file has opened?

Great!

Remember in the “change the color of the ADD TO CART button on Shopify” tutorial? If you do, then you may know that the “add to cart” button is a secondary button in the Brooklyn theme.

(in that color change tutorial, I have also shown how to find out the class/type the add to cart button has in a Shopify theme)

You can find the code snippet containing information about the secondary button information such as font and padding. Open the text search bar by pressing Ctrl+F and type “.btn–secondary”.

increase the size of your shopify add to cart button

Step-4

Noticed the green box inside the larger red box in the image above? The number “13px” is the font size of the “ADD TO CART” text inside the cart button.

If you increase it, the button will get larger. You can see it in action in the video below: You are probably scratching your head thinking why the button gets bigger if the button text font is increased.

Did you notice the line just over the one containing “font-size”?

This line makes sure there is always a fixed amount of padding around the “add to cart” button text. And that’s why the size of the ADD TO CART button gets bigger when you increase the font size of the text inside the button.

Handpicked Article: Where is the best place to add a buy button in my Shopify store?

It was easy, right?

I showed you an easy way. Just like I promised. Now the CSS codes may make you nervous but that’s OK. I get nervous too. And I overcame it. So can you.

That’s it then.

Hope to talk to you again. 

Editor Team


We are a group of WordPress experts (editorial team) from Themeim. All of these articles go through manual testing to reveal the ultimate outcome.