How to centre the product title and price on the home page - Supply theme

Highlighted
New Member
4 0 0

Hi I've searched the forums and tried a few different methods but can't find anything that works as yet. 

 

I'm trying to centre the product titles and prices under the products on the home page collections.

I've managed to do this on the collection pages themselves but they remain to the left on the home page and on the We Also Recommend section at the bottom of products.

Can anyone help with up to date coding for the supply theme please?

I would need fairly simply instructions as I'm not that competent at coding.

This is the link to my home page: https://fizzystrawberrygifts.co.uk/

 

Thanks so much for any help you can give :) 

0 Likes
Highlighted
Excursionist
11 1 1

Navigate to themes in Shopify and click edit code. Search for theme.scss.liquid in the assets folder. Because your title's of the products do not have a class or id you can put the following code in the css file:

p {
  text-align: center;
}

This method centers all of your <p> elements, check if it doesn't affect your design negatively. Let me know if this solves your problem!

0 Likes
Highlighted
New Member
4 0 0

Thanks I've already done that and it hasn't worked on the Home page. It has worked on the Collections page but not on the Home Page or We Also Recommend products


0 Likes
Highlighted
Excursionist
11 1 1

I think the best way to accomplish this is to add a class to the product title's <p> element and add it to the stylesheet.

 

HTML:

<p class="custom-product-title">
  Product Title
</p>

 

CSS:

.custom-product-title {
  text-align: center;
}
0 Likes
Highlighted
New Member
4 0 0

Thanks but I have no clue where that goes.

Can you give step by step instructions please? 

0 Likes
Highlighted
Excursionist
11 1 1

Can you try this:

p {
  text-align: center !important;
}

I have no insight into the structure of your theme so I can only give you minimal tips.

0 Likes
Highlighted
New Member
4 0 0

No that's not worked :/ 

0 Likes
Highlighted
Excursionist
11 1 1

Can you download your theme file and send the download link over to me? Then I can investigate your theme files and find a solution.

0 Likes

Hello @fizzystrawberry,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.product-grid-item p, .product-item--price span {
	text-align: center;
}

@fizzystrawberry wrote:

Hi I've searched the forums and tried a few different methods but can't find anything that works as yet. 

 

I'm trying to centre the product titles and prices under the products on the home page collections.

I've managed to do this on the collection pages themselves but they remain to the left on the home page and on the We Also Recommend section at the bottom of products.

Can anyone help with up to date coding for the supply theme please?

I would need fairly simply instructions as I'm not that competent at coding.

This is the link to my home page: https://fizzystrawberrygifts.co.uk/

 

Thanks so much for any help you can give :) 


 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes