Make collection preview full width / larger

Store Design
, , ,

Topic summary

A user wants to create a minimalistic landing page by making collection preview sections span full width with larger height, similar to featured hero images on other sites.

Multiple CSS Solutions Provided:

  • Several contributors offered custom CSS code to be added to theme.liquid file (before </body> tag) or base.css
  • Code targets .collection-list-wrapper class to set max-width: 100% and remove padding
  • Additional styling adjusts card content positioning and removes navigation arrows

Current Issues:

  • Initial implementation caused collection images to be cut in half
  • Updated code changed card content position from absolute to relative with bottom: 56px to fix cropping
  • Mobile view problems emerged: first collection item doesn’t appear, layout needs optimization
  • User requests a 2x2 grid layout for mobile instead of current broken display

Status: Ongoing - desktop view resolved but mobile responsiveness still needs addressing. The discussion includes multiple code snippets and before/after screenshots showing the implementation progress.

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

Please replace the above code with this

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.collection-list-wrapper.page-width.isolate.page-width-desktop { max-width: 100%; padding: 0 !important; } .collection-list-wrapper .card__content { position: relative; bottom: 56px !important; } .collection-list-wrapper .collection-list { column-gap: 0; justify-content: center; } .collection-list-wrapper span.icon-wrap { display: none !important; }

Tech_Coding_0-1728641711424.png
Tech_Coding_0-1728641711424.png1341×506 199 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like