Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Studio Theme -> Collection Page ->Featured Product: How To Center Align the Product Title

Solved

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

boltandchisel
Tourist
10 0 3

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

Accepted Solution (1)
ZestardTech
Shopify Partner
5902 1066 1412

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

ZestardTech_0-1689925871955.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 10 (10)

websensepro
Shopify Partner
1288 145 166

Hi, @boltandchisel.

Kindly Share your store URL and password.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
boltandchisel
Tourist
10 0 3

https://boltandchisel.com/collections/lamps

 

It's not password protected. Thanks!

websensepro
Shopify Partner
1288 145 166

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

 

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

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

ZestardTech
Shopify Partner
5902 1066 1412

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

ZestardTech
Shopify Partner
5902 1066 1412

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
boltandchisel
Tourist
10 0 3

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
Shopify Partner
5902 1066 1412

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

ZestardTech_0-1689925871955.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
boltandchisel
Tourist
10 0 3

Works perfectly, thanks!

ZestardTech
Shopify Partner
5902 1066 1412

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

PageFly-Richard
Shopify Partner
4798 1082 1749

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

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.