Shopify themes, liquid, logos, and UX
Hi, I have featured products on each collection. However, I am trying to make the Product Title, Price and "View Full Details" link to be center aligned in that block itself (both horizontally and vertically).
How can I do that?
Thanks in advance!
Solved! Go to the solution
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.product__info-container {
text-align: center;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
margin-top: 13%;
}
Hi, @boltandchisel.
Kindly Share your store URL and password.
Hi, @boltandchisel.
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
.product__info-container {
text-align: center;
margin-top: 150px;
}
Result:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
Hello there,
You want like this.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.product__info-container {
text-align: center;
}
Ooh nice, thanks!
However, the current solution only aligns it to center horizontally.
Is it possible to make it move to the center vertically?
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.product__info-container {
text-align: center;
}
.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
margin-top: 13%;
}
Works perfectly, thanks!
Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.
This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css
.product__info-container {
display: flex;
flex-direction: column;
align-items: center;
}
Hope you find my answer helpful!
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024