Debut Theme - Product Page Center

Solved
Shopniy
Tourist
4 0 0

Hey guys!

New here at Shopify Community.

I have a simple question, how to center in Product Page title,price,reviews,option,quantity?

I just want to center everything what's in the red area - https://prnt.sc/123xamm

For mobile and desktop version

Thanks in advance!

0 Likes
Pallavi
Shopify Expert
1663 244 287

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Natztech
Shopify Partner
851 230 629

@Shopniy Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
LitExtension
Shopify Partner
871 99 158

Hi @Shopniy

Please place this code at the end of the "theme.scss" to solve your problem.

.product-single__meta {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}

.product-form--payment-button-no-variants {

    max-width: 25rem;

    width: 100%;

}

.product-form__input--quantity {

    max-width: none;

}

Hope this helps.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
Shopniy
Tourist
4 0 0

Thank you both for a reply! @Pallavi @Natztech - https://topdrive.store/ without a password.

 

@LitExtension Thanks for the code, it's kinda working, but why does Option, Quanity and Add To Cart is very small now? - https://prnt.sc/125ytus

But otherwise it's centered on desktop and mobile and I can say already thank you.

0 Likes
Natztech
Shopify Partner
851 230 629

@Shopniy  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. see screenshot  http://prnt.sc/126g23q

.template-product .product-form{
	width: 100% !important;
}

.template-product .product-form__controls-group {
    display: block !important;
}

  

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Shopniy
Tourist
4 0 0

Thanks, but this is how your code looks - https://prnt.sc/1270j6m
I copied it all to the theme.css at the bottom.

0 Likes
LitExtension
Shopify Partner
871 99 158

This is an accepted solution.

Hi @Shopniy

Please place this code at the end of the "theme.scss" to solve your problem.

.product-single__title {

    text-align: center;

}

.price__pricing-group {

    display: flex;

    flex-direction: row;

    align-items: center;

    margin: 0 auto;

}

.product-form__controls-group {

    display: block;

}

Screenshot to refer: https://prnt.sc/127l3s5

Hope this helps.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
Natztech
Shopify Partner
851 230 629

@Shopniy   please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 .template-product  .product-form input  {
    max-width: 100%;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Shopniy
Tourist
4 0 0

@LitExtension Thanks, worked perfectly.

@Natztech also thanks to you!

0 Likes