How can I center the product name and price in my product grid?

Store Design
, , , ,
1

I’m trying to center the product name and price in the product list page. The support guy told me that my theme does not support that and i’d have to do custom code.

bpuc_0-1680738335565.png
bpuc_0-1680738335565.png1094×566 151 KB

Can someone tell me which file the change will be made in and the code to center it.

Here is my shop: https://undisputedchamp-store.myshopify.com/collections/all

I’m using the colorblock theme. Thanks!

1 Like
2

Hi @bpuc ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

PageFlyVictor_0-1680738766506.png
PageFlyVictor_0-1680738766506.png1103×515 145 KB

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Hi @bpuc ,

You can center your product title and price in product grid by following the instructions below.

If you want to easily update your theme in the future to the newer theme version, I would suggest to utilized the Custom CSS

  1. From you Admin page, go to Online store > Themes > Customize
  2. Find the Custom CSS shown with the image above and paste the code below (Please see the image on how)
[id^="CardLink-template"] , .card__information .card-information{
    text-align: center;
}

made4Uo_0-1680740021662.png
made4Uo_0-1680740021662.png1658×890 233 KB

  1. Make sure to SAVE

See result here:

made4Uo_0-1680739093749.png
made4Uo_0-1680739093749.png1120×795 211 KB

4

Thanks so much that worked! Would this option be better or @PageFly-Victor ? Just curious…

5

Thanks so much for your suggestion. I was able to fix it using the custom css that @made4Uo provided.

1 Like
6

@bpuc

Newer version comes so fast in Shopify Free themes. Custom css is the Shopify’s solution to easily updates your theme without having to add the code again. You can read more here.