How to edit theme code if editing in theme.scss.css doesn't work?

Solved
Highlighted
New Member
2 0 1

Hello, I just recently bought a store from someone and even though it looks good there are some things I would like to change. I'm just starting to learn how to edit code and wanted to change the button size for the add to cart/ buy now button from 100% to 70%. The videos I've watched on this are pretty simple and used a method of inspecting the element, finding the same line of code in the theme.scss.css files and changing the size. Now the problem I ran into is that when I try to find the line of code in theme.scss.css it doesn't show up and I think this is because that's not where the code for the button is. So basically I assume the change for the button width needs to made elsewhere or something. I added screenshots of what I wanted to change plus one of the screen that's different from the tutorials I watched to explain what I mean. If anyone could clarify why it's not working or how I can make it work that would be greatly appreciated! Screenshot (75).pngScreenshot (76).pngScreenshot (77)_LI.jpg

0 Likes
Highlighted
Shopify Partner
242 59 103

Hello @MozayL,

 

Welcome to the Shopify Community!

 

I understand that you want to change the button size for the Add to Cart / Buy Now button from 100% to 70%. You're having trouble finding the right line of code.

 

I may be able to help you with this. Will you send me a link to your store?

 

Cheers!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

1 Like
Highlighted
Shopify Expert
3470 543 819

Hi @MozayL 

Follow this:

Add this css in Asset->theme.scss file at bottom of page:

.product-form__cart-submit{margin: 0 auto; width: 70%;}
.shopify-payment-button__button{width: 70%;margin: 10px auto;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Shopify Partner
242 59 103

This is an accepted solution.

Hi @MozayL,

 

Thank you for sending me a link to your store. I've reviewed your code and found the problem.

 

@Jasoliya's code will not work because your theme is overriding Shopify's default styles.

 

To make the code work, you need to include one extra snippet in your CSS file.

 

The key part is to use width: 70% !important; instead of width: 70%;

 

By including !important in your CSS, you are telling Shopify to use that style no matter what.

 

You have width: 70%; twice in your code, so be sure to remove the first instance of it, and to replace the second instance with width: 70% !important;

 

Here is the full code:

 

.product-form__cart-submit {
  display: block;
  width: 70% !important;
  line-height: 1.4;
  padding-left: 5px;
  padding-right: 5px;
  white-space: normal
}

 

You may also want to add an extra bit of code to account for the Buy It Now button, in case you use it in the future:

 

.shopify-payment-button__button {
  width: 70% !important;
}

Let me know if you need further help.

 

If this answers your question, please click Accept as Solution on my post.

 

Cheers!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

1 Like
Highlighted
Shopify Partner
1280 169 402

He shouldn't need to add !important to anything unless the style is being applied by javascript and is inline with the element. Brian's solution will probably work, don't get me wrong. I just think there's got to be a way to do it without using !important. Perhaps being more specific in how you reference your style? For instance as an example:

 

.container .product-form .product-form__cart-submit {
width: 70%;
}

Any reason why !important is needed?

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Shopify Partner
242 59 103

@Ninthony A third-party theme CSS file is overriding the default theme.css.liquid file.

 

Rather than editing the third-party file, I feel most comfortable with merchants modifying the theme.css.liquid file.

 

In order to prevent the override, I believe !important is the best solution. The use of !important also meets the goal of simplifying life for the merchant (who is not necessarily technically savvy and making their own code edits by hand) – by guaranteeing, with one code edit, that the button will be 70%, even if code elsewhere is trying to style the same button differently.

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

1 Like
Highlighted
Shopify Partner
1280 169 402

Ah okay, I was thinking that may be the case. Definitely an easier edit. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
New Member
2 0 1

Thank you so much Brian! It worked perfectly and I learned something new that seems very useful to know. Can't thank you enough, I really appreciate it. :) 

1 Like