CSS code to change layout of product grid for specific collection template

[saltnwyniger]

Hello there

Product grid is set to “natural”, since we’re selling swim wear and have uploaded 5/4 images for bikini tops and underwear, and 4/5 for bathing suits. Now, on a collection site we promote a bathing suit, two bikini tops and two underwears.

How can I make them all 4/5 for only this specific collection site? Is there any code I could paste in the json file of this collection? Or do you have a CSS code that I could paste in the section on this collection template?

Your help is highly appreciated, thank you!

[Moeed]

Hey @saltnwyniger

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[TheUntechnickle]

Hey @saltnwyniger ,

I can help you with setting specific image aspect ratios for this collection page. Here’s how to make all product images appear in a 4:5 ratio for this specific collection only:

You have two options - using the collection template’s JSON settings or adding custom CSS. I’ll provide both approaches:

Option 1: Collection Template JSON Settings1. Go to your Shopify admin → Online Store → Themes

1. Click “Actions” → “Edit code”
2. Look for your collection template file in the Templates folder (likely collection.liquid)
3. If your theme uses section settings, look for a file like collection-template.json in the Templates folder or a section file named collection-grid.liquid in the Sections folder
4. Find the section that controls the image aspect ratio and add:

{
  "id": "collection_specific_settings",
  "type": "header",
  "content": "Collection-Specific Settings"
},
{
  "type": "select",
  "id": "image_ratio",
  "label": "Image aspect ratio",
  "options": [
    {
      "value": "adapt",
      "label": "Adapt to image"
    },
    {
      "value": "portrait",
      "label": "Portrait (4:5)"
    },
    {
      "value": "square",
      "label": "Square (1:1)"
    }
  ],
  "default": "adapt"
}

Then access your collection settings and set this specific collection to use “portrait” (4:5) ratio.

Option 2: Custom CSS for This Specific Collection

This is more reliable and works even if your theme doesn’t support the JSON approach:

1. Go to Online Store → Themes → Actions → Edit code
2. Look for your theme’s assets/theme.scss.liquid or assets/theme.css file
3. Add this code at the bottom:

/* Custom aspect ratio for specific collection */
.template-collection .collection-{{ collection.handle }} .grid-product__image-wrapper,
.template-collection .collection-{{ collection.handle }} .product-card__image-wrapper {
  padding-top: 125% !important; /* 4:5 ratio = 125% */
}

.template-collection .collection-{{ collection.handle }} .grid-product__image,
.template-collection .collection-{{ collection.handle }} .product-card__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

Replace {{ collection.handle }} with your actual collection handle (the URL slug for this collection).

Option 3: Liquid Template Override (Most Precise)

If you want to target only this specific collection:

1. Go to Online Store → Themes → Actions → Edit code
2. Find your collection template (usually in Templates/collection.liquid)
3. Add this Liquid code at the top:

{% if collection.handle == 'your-collection-handle' %}
  <style>
    .grid-product__image-wrapper,
    .product-card__image-wrapper {
      padding-top: 125% !important;
    }
    
    .grid-product__image,
    .product-card__image {
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
{% endif %}

Replace ‘your-collection-handle’ with the actual handle for this specific collection.

These options should help you achieve the 4:5 aspect ratio for product images in this specific swimwear collection while maintaining your regular settings elsewhere.

Let me know if you have any questions for us

Cheers!
Shubham | Untechnickle