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

Highlighted
New Member
4 0 0

Hi All,

Been searching around for an answer in this forum to no avail. The available methods out there does not work really work my theme - Debut. Adding code lines to theme.scss.liquid.

A help will be great, trying to figure out how to make the "Add to Cart" button stand out in the product page - Bold, Increas size, and the width.

Thanks

 

regards,

Ken

0 Likes
Highlighted
Shopify Staff
Shopify Staff
574 6 105

Hi Ken,

Thanks for reaching out with this question. The code for the Add To Cart button can be different depending on the theme which you are using. Can you link me to your store and I can take a look at what would be the best way to make this change? 

Cheers,

Liam 

 

1 Like
Highlighted
New Member
4 0 0

Hi Liam,

Debut theme. Trying to figure out how to optimize it for mobile size, so that the add to cart button pops and is bolded.

 

thanks,

ken

0 Likes
Highlighted
New Member
4 0 0

Hi Liam,

awaiting for your reply? 

can anyone else help with this? just need the right coding line and where to insert it for DEBUT Theme.

thanks,

0 Likes
New Member
4 0 0

Hi,

Is anyone able to give some solution?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
574 6 105

Hi Ken,

 

Apologies for my late reply on this. The selector you would be looking to use is .product-form__cart-submit. So if you are looking to make your add to cart button wider and make it bold you would add this to the bottom of the stylesheet:

.product-form__cart-submit {
  width: 400px;
  font-weight: bold;
}

Hope this helps Ken,

Please let me know if you have any other questions.

Liam

0 Likes
Highlighted
New Member
2 0 1

What do you mean that you "add it to the bottom of the style sheet?"

I don't do coding so I don't understand that line.

Do you mean to add it to the very bottom, bottom, like after this line:   },
"default": true
}
]
}
{% endschema %}

DO I ADD IT HERE? OR INSIDE BEFORE THE ENDSCHEMA PART

 

Thanks.

0 Likes
Highlighted
New Member
1 0 2

very poorly explained. I find many explanations on this community by Shopify staffs are not fully explaining the steps leading to How to actually do it. 
You need to give clearer instructions and answers. Ken also asked how to increase the font size yet you only provided how to make it bold. 

2 Likes
Highlighted
Shopify Staff
Shopify Staff
574 6 105

Hi there Equestarjewelry & Frankiest,

 

I appreciate your feedback on the explanation given here, and agree my reply could be more detailed for anyone who might not be familiar with Shopify theme structure, or web design techniques. So, let's unpack this solution a bit more. 

 

First off, you will need to find what ID is applied to the button, so that you will know what selector to target when adjusting the styling. The easiest way to find this is you use a tool on your browser called Inspect Element. You can learn more about Inspect Element and how to find classes with it from this YouTube video.

 

I've also made a video of how I found the ID on my own test store.

 

Alternatively you could locate the ID within your Shopify theme, where the add to cart button is appearing within the product Liquid file. You can locate the Liquid files which make up your theme when you go to Admin > Online Store > Themes > Actions > Edit Code. If you're using a Shopify built theme it will likely be within a file called product-template.liquid, which you can find in the sections folder of your theme. The ID is likely going to look something like: `AddToCart-product-template`. This example is from the current version of Debut, but if you can't identify the ID, link me your store and I'll take a look :) 

 

Now you can use this as a selector and adjust the styles of the add to card button. Changes to styles are added to the themes stylesheet- this is a separate file to the `product-template.liquid` file, and found in a different folder. The stylesheet contains all the instructions for how different elements of your store should appear, and you'll find it in your theme's assets folder- usually called `theme.scss.liquid`. It's a large file, so any additions you add should be added to the bottom of the file, so if you need to revert back for any reason, the changes you made can be easily found. It also very useful to back-up your theme before making any changes. 

 

Now you can adjust different properties (fold weight, size, colour, width) of your add to cart selector: `AddToCart-product-template`. There's a whole bunch of different properties you can adjust and you can learn more about them from the W3 Schools CSS site. 

 

If you wanted to increase the width of the button, as well as make the text bold, and larger you would add this:

 

 

#AddToCart-product-template {
  width: 400px;
  font-weight: bold;
  font-size: 20px;
}

Of course this is using the `AddToCart-product-template` ID which could be different, depending on the theme, and version you are using. Also, you can see that in front of the ID name we use a hash symbol. 

 

Now when I check my product page I would see something like:

 

Monosnap_file_ans82

 

 

I hope this helps Equestarjewelry, let me know if you run into any issues :)

 

Best of luck!

Liam Griffin

Shopify | Partner Education

1 Like
Highlighted
New Member
2 0 1

Hi Liam. I have very little experience coding so thank you for elaborating on your answer to my query. It was much easier to find this time!

 

Cheers!

 

BB

1 Like