How to increase the width of the collections list block on my hompage. Trade theme

[marty82]

Hello,

sorry to be a bother, but, what I'd like to do is increase width of the collections list on my homepage so that they match the two featured collection blocks. I've checked a number of other discussions, and tried the accepted solutions, but they didn't fix the problem, and so I delighted the bits of code that were suggested to add.

One thing that's possibly of relevance is that, while in the theme editor, the widths of the blocks mentioned above do match, but not when I view my homepage on a standalone browser tab.

I'm using the trade theme, and any help would be much appreciated.

Thanks in advance for any help with this.

[Dotsquares]

Hi @marty82 ,

Please find the solution below:

Solution to Increase Width of Collections List (Trade Theme)

Step 1: Identify the CSS class of the collections list section
- Go to your live homepage (in a browser).
- Right-click on the Collections List section and choose Inspect to open the Developer Tools.
- Look for a wrapping container class like .collection-list-wrapper or .section-template--XXX.

Usually, the issue is that the container is set to a max-width that’s narrower than the featured collection blocks.

Step 2: Add custom CSS

- Go to your Shopify Admin

Navigate to:

- Online Store → Themes → Customize (on Trade theme) → Theme Settings → Custom CSS

Or:

- Online Store → Themes → Actions → Edit Code → assets → base.css or theme.css

Add the following code to the bottom of the file (or Custom CSS field):

/* Force the collection list section to full width */
.collection-list-wrapper,
.section-collection-list {
max-width: 100% !important;
width: 100% !important;
}

/* Optional: Align inner content if needed */
.collection-list-wrapper .page-width,
.section-collection-list .page-width {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

Step 3: Clear cache and test
- After saving, clear your browser cache or test in incognito/private window to ensure changes are reflected.

- Compare the homepage in the theme editor and live browser.

Hope these steps will solve the issue. Let me know if you have any questions.

Regards,

[Small_Task_Help]

Hi,

Hope this will help

- Use Theme Editor to check layout settings first.
- If that doesn’t work, edit CSS to make the collection list full width.

CSS example

/* Make the collection list section full-width */
.collection-list {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px; /* Optional: adjust spacing */
}

- Clear Cache or Try Incognito