Solved

Dawn theme | I can't change the height of Buy it now/ Add to card buttons

MiuMiu237
Trailblazer
187 1 26

Hi guys, 

I have two questions

1. I attempted to change the size of the these buttons with these codes but they only worked with the width and nothing happened with the height. Why?

 

.product-form__submit, .shopify-payment-button {
   width: 90% !important;
   height: 70% !important;
}

 

2. How to change the space (padding) between Add to card and Buy it now buttons?

Screenshot 5.png

 

My url: https://189ee3-2.myshopify.com/products/jacket

Thank you!

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
5370 1296 1587

This is an accepted solution.

Hi @MiuMiu237 

Im not sure what do you like to achieve. You like to change the space between the two buttons? or change the heights? But anyway you can check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

/* This is to change the space between two buttons. */
.product-form__submit {
    margin-bottom: 5px;
}
/* And this is to increase/decrease the size of the buttons. */
button.shopify-payment-button__button.shopify-payment-button__button--unbranded {
    padding: 0px;
}
.button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded {
    min-height: 3rem;
}

 

And save. 

Result:

Made4uoRibe_0-1704736215820.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 5 (5)

Moeed
Shopify Partner
3672 928 1159

Hey @MiuMiu237 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-form__submit {
    margin-bottom: 3rem !important;
}
</style>

RESULT:

Moeed_0-1704735905291.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Jack_Khan_Baba
Shopify Partner
75 7 13

hi i can you issue you want to increase the size of the button or increase the space between these button please conform once

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Chat on WhatsApp: +923143054166
Need a Shopify developer? Hire us at naimatullahts335@gmail.com
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.

Abdosamer
Shopify Partner
821 146 163

Hi @MiuMiu237 , go to base.css and add the following code :

button.shopify-payment-button__button.shopify-payment-button__button--unbranded {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.product-form__submit {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-bottom:2rem !important;
}

 Result:

Abdosamer_0-1704736222117.png

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples

Made4uo-Ribe
Shopify Partner
5370 1296 1587

This is an accepted solution.

Hi @MiuMiu237 

Im not sure what do you like to achieve. You like to change the space between the two buttons? or change the heights? But anyway you can check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

/* This is to change the space between two buttons. */
.product-form__submit {
    margin-bottom: 5px;
}
/* And this is to increase/decrease the size of the buttons. */
button.shopify-payment-button__button.shopify-payment-button__button--unbranded {
    padding: 0px;
}
.button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded {
    min-height: 3rem;
}

 

And save. 

Result:

Made4uoRibe_0-1704736215820.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


MiuMiu237
Trailblazer
187 1 26

Thank you! I asked both😀

By the way, how can I resize the width? I replace 'min-height' with 'min-width' but it didn't work.