Make Collection image smaller in "collections" page. Also, give collection image rounded corners

Shopify Discussion

Topic summary

A user seeks to reduce the size of their ‘classics’ collection image on the Collections page, as it currently dominates the screen, and wants to add rounded corners (10-15% radius).

Solutions Provided:

Two community members offered CSS code solutions:

  • Made4uo-Ribe suggested adding CSS to base.css, style.css, or theme.css to adjust card width (20%) and border-radius (15%)
  • RockTechnolabs provided more specific code targeting section-collection-list.css to control max-width, followed by additional CSS for rounded corners (15% border-radius)

The original poster confirmed RockTechnolabs’ solution worked successfully.

Follow-up Issue:

Another user (SamiGiftsi) reported that while the sizing solution worked, it caused collection images to align to the left side of the screen rather than centering. This centering issue remains unresolved in the current discussion.

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

Hello everyone, I’m trying to make my ‘classics’ collection image smaller, as right now it is taking up almost the whole page in the Collections tab of my main menu. Is there any way to make this smaller? Also, while we’re at it, any way to give it rounded corners? Maybe 10/15% rounded? Thank you!

www.shortcomings.store

pass: aloe

Screenshot 2023-08-30 at 2.48.55 PM.png
Screenshot 2023-08-30 at 2.48.55 PM.png3718×2742 460 KB

1 Like
2

Hi @shortcomings

Try this.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.card.card--standard.card--media {
    width: 20%;
}
.card .card__inner .card__media {
    border-radius: 15%;
}
  • And Save.
  • Im not sure what size youll like to be in your collection. You can adjust it anyway.

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hi @shortcomings

Try this.

  • From your Shopify admin dashboard, click “Online Store” and “Themes”.
  • Find the theme you want to edit and click “Actions” and then “Edit code”.
  • In the “Assets” folder, click on the “section-collection-list.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.collection-list__item:only-child {
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3) !important;
}

Copy

  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
4

Thank you, this worked great. Any way to give the card rounded corners?

5

add this CSS just below the previous CSS.

.collection-list__item .card__inner .card__media {
    border-radius: 15% !important;
}

Copy

RockTechnolabs_0-1693545638231.png
RockTechnolabs_0-1693545638231.png1245×601 99.2 KB

6

Hiya,

This has worked for me perfectly, but how do I then centre my collections? The smaller I make the collection images the more it’s putting them to the left side of the screen.

Thanks!