How to center products on a collections page? (Debut Theme)

Kenny_Azama
New Member
1 0 0

Hi there,

I only have 2 products and am trying to center them on my collections page. I tried adjusting the settings to display just 2 products per row but the images came out too large. So I want to keep the size setting of 3 products per row but center just 2 products.

Thanks so much for your help!

Cheers,
Kenny

0 Likes
May
Shopify Staff
Shopify Staff
334 32 146

Hi, Kenny!

This is May from Shopify.

I am not an expert in coding, but when I visited your website and viewed the source code, it looks like you can achieve this by editing your theme code. Before making any changes to your code, be sure to make a duplicate of your theme to ensure that your customers aren’t affected by any unintended results! After that, you can follow the steps below to center your products!

  1. From you admin, click on ‘Online Store > Actions > Edit code’.

  2. In your ‘Sections’ folder, select a file called ‘collection-template.liquid’.

  3. Search for ‘grid--view-items’ inside the file. You’ll want to edit this line of code!

  4. Inside the bracket, add

    style="margin-right: -50%; left: 50%;"

    and your code should look like       

    <div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}" style="margin-right: -50%; left: 50%;">

     

  5. Click ‘Save’.

The steps above should allow you to center your products in the collections page without making the products appear large. For future reference, if you ever change your mind or want to change the layout of the page, you can always roll back to an older version of your theme.

If you’re not comfortable with making this change, I suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made by Shopify, our theme support may be able to look into making the change if your account is eligible!

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support

May | Social Care @ 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 the Shopify Help Center or the Shopify Blog

horn
New Member
1 0 0

Same issue but I can not find the ‘grid--view-items’ in my theme (Parallax Theme by OOTSB). Any help would be appreciated! 

0 Likes
seankamela
New Member
1 0 0

Hey there! 

 

After you enter the code, how do you actually go into your theme and make the product-centered? Does it automatically do it? Or do you need to go back into your theme settings or catelog settings?

 

Thanks!!

0 Likes
c_illy
New Member
1 0 0

Hi May

This works for me, but the text is no longer centred underneath the image. What do I need to do to get this to work smoothly?

Thanks


Chris

0 Likes