Make images smaller for only CERTAIN featured collections

Store Design
, , ,

Topic summary

A user wants to reduce image sizes for specific featured collections on their homepage while keeping the main top collection’s images at their current size. Specifically, they have eight featured collections and want the bottom five to display smaller product images.

A solution was provided involving:

  • Adding custom CSS code to the theme’s stylesheet (theme.scss.liquid)
  • Targeting specific collection sections using CSS classes
  • Adjusting max-width values (example: 200px) while maintaining aspect ratio

The original poster requested more detailed guidance due to limited coding experience. They asked for:

  • Specific instructions on implementing the CSS
  • A concrete example with pixel values (e.g., 25% smaller than default)
  • Clarification on whether code can be added directly to individual section settings

Status: The discussion remains open with the user seeking more beginner-friendly, step-by-step instructions tailored to their specific use case.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hello

I have my main featured collection at the top of my page for which I want the image sizes to stay the same.

However, for the other featured collections below that, I want THOSE images to be smaller, so that not all featured collections have great big images.

Looking for CSS code to apply to only the section I want to make those featured product images smaller.

(Unless there is another easier way)

Thanks!

2
  1. In the code editor, locate and click on the “Assets” folder. Then find and click on the CSS file (usually named “theme.scss.liquid” or similar).
  2. Scroll to the bottom of the CSS file or any section where you can add custom CSS code.
  3. Identify the section or container that contains the featured collections you want to target. This may have a specific class or ID associated with it. For example, let’s say the section has the class .small-featured-collections.
  4. Add the following CSS code to adjust the image size within that section:
.small-featured-collections .featured-collection-image {
  max-width: 200px; /* Adjust this value to your desired image width */
  height: auto; /* Maintain aspect ratio */
}
​
3

Thanks but I’m wondering if you could be a little more specific with me, since I don’t have a background in coding. #3 I didn’t know how to find for example. I have eight featured collections on my page, and I want the bottom five to have smaller images.

I see that each section allows me to edit CSS just for that section. Couldn’t I just add a code there? Could you give me a CSS code with a specific px value if I wanted those images to be, say 25% smaller than the default image sizes?

Sorry for the big ask (no background in coding)