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

Solved
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
Shopify Partner
239 59 68

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
Shopify Partner
1656 277 344

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
0 Likes

Success.

Shopify Partner
239 59 68

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
Astronaut
835 95 178

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 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
Shopify Partner
239 59 68

@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
Astronaut
835 95 178

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

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