I WANT TO CHANGE CUSTOMIZED MY COLLECTION LIST SECTION LIKE THIS

Shopify Discussion

Topic summary

A Shopify store owner requested help customizing their collection list section to match a reference site’s layout on both mobile and desktop views. They also wanted to center-align text and remove navigation arrows.

Solution provided:

  • Custom CSS code was shared to adjust collection list item widths and container sizing for responsive display
  • Additional CSS snippet provided to center-align headings and hide arrow icons

Key code changes:

  • Modified collection list item width to 19% on mobile (max-width: 768px)
  • Set page-width container to 1440px maximum
  • Applied text-align: center to card headings
  • Used display: none to hide arrow icon wraps

Status: Issue resolved. The original poster confirmed both solutions worked successfully.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I WANT TO CHANGE CUSTOMIZED MY COLLECTION LIST SECTION LIKE THIS ON MOBILE VIEW AND DESKTOP VIEW BOTH AND ALSO CENTRE ALIGN THE TEXT AND REMOVE THE ARROW

MY SITE LINK - https://g8tiyz-ui.myshopify.com/

REFRENCE SITE LINK- https://www.posterized.in/

NEW-11.png
NEW-11.png1890×1417 321 KB

2

HI @Manishuk01

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.collection-list-wrapper ul.collection-list li.collection-list__item {
    width: 19% !important;
    min-width: unset !important;
    margin: 0 !important;
}
}
.collection-list-wrapper.page-width {
    max-width: 1440px !important;
    width: 100% !important;
}

Here is the result:

image_360.png
image_360.png311×360 96.6 KB

I hope this helps

Best,

Daisy

1 Like
3

Thank you bro u are the best guy

and also I want to remove those arrows and centre align the text

4

also paste this css to remove arrow and center allign the title

.card__heading {
    text-align: center;
}

.card__heading .icon-wrap {
    display: none;
}
1 Like
5

thank you bro big help