Minimal Theme - How do you center align product titles and prices under the product image?

Michael_Schafer
Tourist
10 0 1

Currently they are all left aligned, so it sits slightly off when looking at the Collection pages. Is there a way I can change them to center align? There's an option to do that for the homepage Featured Collection, and I got that working, but not on the collection pages...any ideas?

 

Here's the Featured Collection image from the homepage, where it gives me the center option.

 

If I click on the Mens collection from the menu though, all the shirts are arranged left aligned like this:

0 Likes
Liam
Shopify Staff
Shopify Staff
639 16 229

Hi Michael, 

Thanks for your question :) Great to see you are looking to customise your collection page to display exactly how you would like, so let's take a look at how we can center the product titles and prices. 

To make these changes we would be looking to adjust your theme's stylesheet and add some CCS.

You can find the stylesheet within the Edit HTML section in the Assets folder and you're looking for a file called theme.scss.liquid and you will be adding your changes to the very bottom of this file. It's very important not to change any code in the middle of the file as the SCSS file cannot be rolled back, so if there's a problem with new code it is easy to find it at the bottom. You could add this code to the bottom of your theme.scss.liquid file:

.grid-link__meta {
text-align: center;
}

p.grid-link__title {
    text-align: center;
}

After this addition, your collection page should look like this:

Hope this helps Michael, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

Liam | Developer Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Michael_Schafer
Tourist
10 0 1

Thanks so much, that worked perfectly ;)

0 Likes
Cabeza
New Member
5 0 0
You're the best teacher I've seen, thank you. !!!!
0 Likes
Liam
Shopify Staff
Shopify Staff
639 16 229

Aw thanks Cabeza! You've made my day :)

 

Liam

Liam | Developer Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
Cabeza
New Member
5 0 0

0 Likes
Cabeza
New Member
5 0 0
Ayyoub_Mani
New Member
1 0 1

Hello ! 

I have the same problem of centering the price of the products and I pasted the code like asked but nothing changed for me.

Is there any alternative please ?

Thanks.

KismetKatie
New Member
2 0 0

I've had the same experience. Did this but nothing changed... ???

0 Likes
Flow13
New Member
3 0 0

Yay!!  Thanks for this Liam, helped me as well!

I had googled other suggestions on here but nothing was working and then this did. 

0 Likes