Re: How do I center all elements for product pages - Dawn Theme?

Solved

How do I center all elements for product pages - Dawn Theme?

Invigo-Health
Tourist
5 0 0

Hey guys!

My store is www.invigo.global and I have a problem I can't seem to find a solid soloution for!


I want to center all elements on the product pages, and on the "featured product" for main page. 

This includes: text, title, *judge.me star rating*, price, variant, quantity, buying buttons (for product page).

 

All help much appreciated! See below images for what I want centered.

InvigoHealth_0-1723209753876.png

Featured product

InvigoHealth_1-1723209869890.png

Product page

 

 

Accepted Solutions (3)

Moeed
Shopify Partner
5816 1580 1879

This is an accepted solution.

Hey @Invigo-Health 

 

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__info-container {
    text-align: -webkit-center !important;
}
legend.form__label {
    width: 100% !important;
}
</style>

RESULT:

Moeed_0-1723210228448.png

 

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

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

namphan
Shopify Partner
1518 191 211

This is an accepted solution.

Hi @Invigo-Health,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.price-per-item__container {
    justify-content: center;
}

 

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]

View solution in original post

namphan
Shopify Partner
1518 191 211

This is an accepted solution.

Hi @Invigo-Health,

Please add code:

.featured-product .share-button:nth-last-child(2) {
    float: left;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]

View solution in original post

Replies 10 (10)

Moeed
Shopify Partner
5816 1580 1879

This is an accepted solution.

Hey @Invigo-Health 

 

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__info-container {
    text-align: -webkit-center !important;
}
legend.form__label {
    width: 100% !important;
}
</style>

RESULT:

Moeed_0-1723210228448.png

 

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

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Invigo-Health
Tourist
5 0 0

Man you are incredible, i've tried so many things from GPT or other discussions here, nothing worked for the product page, yours did!


Just on thing I noticed now is that the "featured product" got a little weird with the quantity box, it also glitches to the left on the product page sometimes. Also, if you could left align the "share", only on the featured product, that would be amazing!

Reckon there's a fix for that too?

InvigoHealth_0-1723210933674.png

 

namphan
Shopify Partner
1518 191 211

This is an accepted solution.

Hi @Invigo-Health,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.price-per-item__container {
    justify-content: center;
}

 

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]
Invigo-Health
Tourist
5 0 0

Worked great, thanks! 

Now the only small detail left would be to left align the "share" button, but only on the "featured product" page! 

Thanks in advance!

namphan
Shopify Partner
1518 191 211

This is an accepted solution.

Hi @Invigo-Health,

Please add code:

.featured-product .share-button:nth-last-child(2) {
    float: left;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]
namphan
Shopify Partner
1518 191 211

Hi @Invigo-Health,

If you have any questions, you can contact me directly.
Happy to help you 😊

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]
Invigo-Health
Tourist
5 0 0

Wonderful, worked like a charm!

 

Now onto something extra! I’ve always wanted different “collapsible rows” for my different products. I have tried to understand metafields and all of that stuff but can’t seem fix it. 

So, do you know how to configure different collapsible rows for each product in a store?

 

namphan
Shopify Partner
1518 191 211

Hi @Invigo-Health,

Sure, you have tried creating metafields and connecting through this:

Screenshot.png

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]
Invigo-Health
Tourist
5 0 0

Yes I have tried but I just don’t get the logic behind it really. A thorough yet simple step by step explanation that would suit a 5 yr old (😢😂) on how to get collapsible text to be visible in only one product, would be much appreciated! 

 

Feel free to contact me directly and we can take this from there, like you suggested earlier!:) 

namphan
Shopify Partner
1518 191 211

Hi @Invigo-Health,

Yes, you can describe in detail via my mail, I will help you check it again

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]