Expand container allowance of home page collections

Topic summary

A user working with the Shopify Envy theme wanted to expand product collections on their homepage to reduce excessive white space on the sides.

Solution provided:

  • Initial code snippet was shared to be placed before the </head> tag in theme.liquid
  • The first attempt didn’t work when tested
  • A corrected version was provided with a syntax fix (using . instead of # in the CSS selector)
  • The code targets the index/home page template specifically to adjust container width

Outcome:
The corrected CSS code successfully resolved the issue, allowing the homepage collections to expand as desired.

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

Hello! We are attempting to expand our products across our home page so there is less white space on either side. We are currently using the Envy theme. There is some kind of restrictor in the code that is preventing us from doing this like on other sites that we’ve seen. Can anyone help us with this or does anyone have any insight?

I’ve included the image below as an example of what we’d like it to look like. Thanks!

Hello @Xraeart

Greetings from the Store Watchers Support Team! Happy to help you today.

In your theme.liquid, please paste the code below before the tag.

{% if template == 'index' %}

{% endif %}

Let me know if need further assistance

Regards,

Store Watchers Support Team

Hello and thank you for the help! I’ve copied and pasted the code before the tag and also the tag and it doesn’t seem to affect the home page at all when I refresh the page. I also tried putting the code in-between both head tags but that doesn’t seem to do anything either.

Hello @xraeart ,

My bad. Please paste the below code instead.

{% if template == 'index' %}

{% endif %}

It should be .(dot) instead of #.

Regards,

Store Watchers Support Team

1 Like

Thank you so much, it looks amazing! :slightly_smiling_face:

Glad to know that it helped! @xraeart