Center the variant on debut theme

daphnesmile
Excursionist
12 0 5

Hi,

I will like to know how do I center the variant option on debut theme for the product page?

 

Screen Shot 2021-02-20 at 2.30.36 AM.png

0 Likes
dmwwebartisan
Shopify Partner
4457 1002 1276

@daphnesmile 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
daphnesmile
Excursionist
12 0 5

www.smilesunday.co

Password: happysmilesunday

dmwwebartisan
Shopify Partner
4457 1002 1276

@daphnesmile 

Please add the following code at the bottom of your assets/theme.css file.

.template-product .product-form__input{ margin: 0 auto; }
.template-product .product-form__item{ text-align: center; }

 

Let me know if this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
daphnesmile
Excursionist
12 0 5

@dmwwebartisan: it works, thank you!

May I also check if it is possible to put 'add to cart' and 'dynamic cart button side by side instead of top and below?

 

 

0 Likes
SagarSukhanandi
Tourist
114 17 33

Hello @daphnesmile,

Add the this code at the bottom of your assets/theme.css file.

.product-form__cart-submit, .shopify-payment-button .shopify-payment-button__button--unbranded {
float : left;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
daphnesmile
Excursionist
12 0 5

Thanks @SagarSukhanandi 

It works for safari. However, for google chrome, it is like this:

Screen Shot 2021-02-22 at 3.48.13 PM.png

Will you be able to assist?

0 Likes
SagarSukhanandi
Tourist
114 17 33

Hello @daphnesmile 

I am from india and in india google pay button not display so i will be not able to help directly. You can see on below image.

payment-button.PNG

If you provide your pc access via team viewer on by any other tool then i can check style for google pay button.


If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
dmwwebartisan
Shopify Partner
4457 1002 1276

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (min-device-width: 480px){
.product-form__cart-submit, .shopify-payment-button .shopify-payment-button__button--unbranded {float: initial !important; margin: 15px auto;}
}

Let me know if this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
daphnesmile
Excursionist
12 0 5

Hi @dmwwebartisan, it doesn't work