Debut Theme - Change Product Image Size on Collection Page

Store Design

Topic summary

Goal: Increase product image size on Debut theme collection pages to match a larger display seen on a reference store.

Action taken: A solution was provided by adding custom CSS in assets/theme.scss.liquid to enlarge collection thumbnails. Specifically, max-width and max-height were set for the collection grid image wrapper and images (343px width and 540px height). This targets .grid-view-item__image-wrapper and #Collection .grid-view-item__image.

Outcome: The original poster confirmed the fix worked and the collection images now display at the desired larger size.

Context/notes: The poster had previously adjusted homepage “featured collection” images via another thread, but that approach did not affect collection pages. Screenshots were shared to show current vs desired sizing; the CSS change is the key artifact.

Open items: Follow-up questions from others remain unanswered: (1) how to change image size for the featured collection section, and (2) how to align product texts (titles/prices) to the same level across the grid. The thread is partially resolved (original issue fixed) but still open for these additional requests.

Summarized with AI on January 1. AI used: gpt-5.
2

@DearAbigael

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.grid-view-item__image-wrapper {
max-width: 343px !important;
max-height: 540px !important;
}

#Collection .grid-view-item__image {
max-width: 343px !important;
max-height: 540px !important;
}

Hope this works.

Thanks!

1 Like