Shopify Enterprise Theme: How to Enlarge Collection List Images for a Bolder Look

Hey everyone,

You know how it goes when you're working on your Shopify store – you've got a vision, and sometimes the theme doesn't quite match it out of the box. That's exactly what Nick_S2 ran into recently in the Shopify Community forums, and it sparked a really helpful discussion about customizing collection list images, especially for those of you rocking the Enterprise theme. It's a common tweak, and the community really came through with some great advice.

Nick was looking to "enlarge the image size of Collection List images" specifically for the Enterprise theme. He wanted those circular images to "fill the space a little more" – a pretty common request when you're trying to give your collections a bit more visual pop. Take a look at what he was working with:

Shadab_dev jumped in first, asking for a bit of clarification: was Nick looking to just enlarge the images, or add more collections to the list? Nick quickly confirmed it was all about making those circles larger. And that's where the magic started to happen.

Getting Those Collection Images to Pop!

The Initial Approach: A Broader Stroke with main.css

First up, devcoders offered a solid solution by suggesting a direct edit to your theme's main.css file. This is a common way to apply sitewide styling changes, and it's super effective if you want this change to affect all your collection list sections.

Here’s how devcoders laid it out:

Go to Online Store > Themes > Actions > Edit Code > Assets > main.css.
Paste your CSS at the bottom of base.css and click Save.

@media screen and (min-width: 990px) {
  ul.slider__grid.grid-flow-col .card__media--circle {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }

  ul.slider__grid.grid-flow-col .card__media--circle .media {
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important;
  }
}

This code specifically targets circular media elements within sliders, making them take up 100% of their container and maintaining a perfect aspect ratio on screens wider than 990px. It’s a powerful fix, and here's the kind of result you can expect:

The Refined Solution: Targeting Specific Sections with Custom CSS

Now, while devcoders' method works, Moeed, another helpful community member, chimed in with what he called a "better solution." Why better? Because it gives you more granular control. Instead of making a sitewide change in main.css that affects all your collection lists, Moeed's approach lets you apply the style to specific Collection List sections right from your theme editor. This is fantastic if you only want certain sections to have larger images, or if you're testing things out. Nick tried it, and it was "perfect! Thanks so much" – always a good sign!

So, if you want to make this change for a specific Collection List section without impacting others, here’s how to do it:

1. Head to your Theme Editor: From your Shopify admin, go to Online Store > Themes. Find your current theme (like Enterprise), click Customize.
2. Select Your Collection List Section: In the theme editor, navigate to the page where your Collection List section is located. Click on the specific Collection List section you want to modify in the left sidebar.
3. Find the Custom CSS Option: Scroll down in the section's settings until you see the Custom CSS field. This is your magic box for section-specific styling!
4. Paste the CSS Code: Copy and paste the following CSS code directly into that Custom CSS field:

   @media screen and (min-width: 768px) {
   .card__media {
       width: 180px !important;
   }
   .grid {
       grid-auto-columns: calc((100% - var(--column-gap) * 6) / 6) !important;
   }
   }
   

5. Save Your Changes: Don't forget to hit Save in the top right corner of the theme editor!

Let's break down what Moeed's code does. The @media screen and (min-width: 768px) part ensures these changes only apply on screens wider than 768 pixels (think tablets and desktops), keeping your mobile view potentially untouched or styled differently. Inside that, .card__media is given a specific width of 180px, and the .grid styling adjusts the column layout to accommodate these larger images. The !important flag helps ensure your custom styles override any default theme styles.

And here’s a peek at the awesome result Moeed shared:

The beauty of this approach is its flexibility. You can experiment with the width value (e.g., 200px, 220px) to see what looks best for your specific layout and image sizes. Remember, every theme and image combination is a little different!

This whole discussion is a fantastic example of the Shopify community at its best – store owners helping each other fine-tune their online presence. Whether you go for the broader main.css approach (if you want all your collection lists to look the same) or the more targeted Custom CSS per section (for more control), you now have the tools to make those collection list images truly stand out.

Happy customizing!