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

Store Design
,
1

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!

Featured product title.jpg
Featured product title.jpg804×842 47 KB

2

Hi, @boltandchisel .

Kindly Share your store URL and password.

3

Hello There,

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

4

https://boltandchisel.com/collections/lamps

It’s not password protected. Thanks!

5

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

ZestardTech_0-1689925383324.png
ZestardTech_0-1689925383324.png1717×656 70.6 KB

6

Ooh nice, thanks!

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

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

7

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

8

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

ZestardTech_0-1689925871955.png
ZestardTech_0-1689925871955.png1630×626 109 KB

9

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:

websensepro_0-1689926302736.png
websensepro_0-1689926302736.png582×574 112 KB

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

10

Works perfectly, thanks!

11

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.