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

[Invigo-Health]

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.

Featured product

Product page

[Moeed · 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:

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

Best Regards,
Moeed

[namphan · 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;
}

[Moeed · 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:

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

Best Regards,
Moeed

[Invigo-Health]

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?

[namphan · 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;
}

[Invigo-Health]

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 · Accepted solution]

Hi @Invigo-Health,

Please add code:

.featured-product .share-button:nth-last-child(2) {
    float: left;
}

[namphan]

Hi @Invigo-Health,

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

[Invigo-Health]

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]

Hi @Invigo-Health,

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

[Invigo-Health]

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]

Hi @Invigo-Health,

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