How do you increase the size and bold "Add To Cart" button?

Highlighted
New Member
2 0 0

Hey Liam, it's Kris here, I am new to Shopify too and not familiar with coding. I would also like to make the add to cart button bigger, at least a thumb thick, especially on mobile. I read your instructions and tried to follow but have to admit I was lost. I couldn't find the ID using the inspect element. Could you please take a look at my store like you offered? Thanks so much, Kris

0 Likes
Highlighted
Shopify Staff
Shopify Staff
574 6 105

Hi Kris,

 

We should be able to figure out how to adjust your add to cart button, could you confirm your store URL and I can take a look at it?

 

Cheers,

 

Liam

0 Likes
Highlighted
New Member
2 0 0
Hey Liam, thank you so much for helping me out.
My store URL is https://goldengalaxxy.com/

Also, how can I get rid of the word ’sale’ behind the price. Do you know?

Thank you so much!
Kris
0 Likes
Highlighted
Shopify Staff
Shopify Staff
574 6 105

Hi Kris,

 

So I've checked out your store with Google Inspect and the class name for your Add to cart button is product-form__cart-submit. You could increase the width and height of the button by increasing the properties that this class name is set to. Before you make any changes to the code of your theme, please make sure you have duplicated/ created a backup, there's instructions for this here. 

 

To increase the height and width of the button you'd add extra styling to the bottom of your stylesheet (found in the assets folder of your theme, and named something like theme.scss.liquid. This would increase both the height and the width, and I'd recommend adjusting the numbers so it appears how you'd like:

 

.product-form__cart-submit {
  height: 105%;
  width: 105%;
}

To hide the word "sale" you could add this to the bottom of the same stylesheet:

 

. price-item__label--sale { 
  display: none;
}

Hope this helps!

 

Liam

 

 

 

 

0 Likes