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

Solved

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

collins276
Trailblazer
213 1 32

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
8159 1962 2400

This is an accepted solution.

Hi @collins276 

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 5 (5)

Moeed
Shopify Partner
5317 1435 1721

Hey @collins276 

 

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 Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Jack_Khan_Baba
Shopify Partner
95 8 15

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
895 163 182

Hi @collins276 , 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
My work

Made4uo-Ribe
Shopify Partner
8159 1962 2400

This is an accepted solution.

Hi @collins276 

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
collins276
Trailblazer
213 1 32

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.