Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
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;
}
This is an accepted solution.
Hi @Invigo-Health,
Please add code:
.featured-product .share-button:nth-last-child(2) {
float: left;
}
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
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?
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;
}
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!
This is an accepted solution.
Hi @Invigo-Health,
Please add code:
.featured-product .share-button:nth-last-child(2) {
float: left;
}
Hi @Invigo-Health,
If you have any questions, you can contact me directly.
Happy to help you 😊
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?
Hi @Invigo-Health,
Sure, you have tried creating metafields and connecting through this:
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!:)
Hi @Invigo-Health,
Yes, you can describe in detail via my mail, I will help you check it again
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024