How can I center the quantity button in Craft Theme?

Technical Q&A
,
1

Hello,

I use Craft Theme for www.hopethestudio.com and want to centre the quantity button aligning with rest of product info as shown on photo. What can I do?

Screenshot 2022-12-25 at 8.22.47 pm.png
Screenshot 2022-12-25 at 8.22.47 pm.png2482Ă—1324 519 KB

@LitExtension @KetanKumar maybe you have any ideas?

1 Like
2

@Mimi111

oh sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.product-form__quantity {text-align: center;}
.product-form__quantity .quantity {margin: 0px auto;}
3

Hi @Mimi111

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets ->base.css

.product-form__input.product-form__quantity {
    text-align: center !important;
}
.quantity {
    margin: auto !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

4

Hello @Mimi111 ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1672026079957.png
GemPages_0-1672026079957.png1857Ă—907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

5

Hi @KetanKumar and @PageFly-Victor for both your solutions this is what happens:

Screenshot 2022-12-26 at 2.59.00 pm.png
Screenshot 2022-12-26 at 2.59.00 pm.png2814Ă—1276 298 KB

The Quantity Button comes a bit more centred but not exactly in the middle, any suggestions? Thank you!!

6

Hi @GemPages , this worked so far, thank you. But now the “ad to chart” and “buy with” aren’t centred. How can I get them centred too?

Thank you!

7

Hi @Mimi111 ,

Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:

.product-form__buttons {
    max-width: 100% !important;
}

Hope it helps!

8

Hello @Mimi111

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets ->base.css

.product-form__buttons {
margin: auto !important;

}

9

Hello @Mimi111 ,

You could please try adding the below code before in the theme.liquid file

Best regards,
GemPages Support Team

10

Worked excellent, thank you so much!

1 Like
11

I am so glad that my solution can help.

Best regards,
GemPages Support Team