Studio Theme -> Collection Page ->Featured Product: How To Center Align the Product Title and Price?

[boltandchisel]

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!

[websensepro]

Hi, @boltandchisel.

Kindly Share your store URL and password.

[boltandchisel]

https://boltandchisel.com/collections/lamps

It's not password protected. Thanks!

[websensepro]

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!

[ZestardTech]

Hello There,

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

[ZestardTech]

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;
}

[boltandchisel]

Ooh nice, thanks!

However, the current solution only aligns it to center horizontally.

Is it possible to make it move to the center vertically? 

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

[boltandchisel]

Works perfectly, thanks!

[ZestardTech]

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.

[PageFly-Richard]

Hi @boltandchisel 

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