Increase product grid width (desktop) - Impulse theme

Store Design
, ,

Topic summary

A user seeks to widen the product grid specifically on collection pages (desktop view) for their Shopify Impulse theme site, noting that current CSS changes affect the entire website rather than just collections. The site shows small product images with excessive whitespace on both sides.

Solutions Provided:

  • shreyhweb: Suggested adding conditional CSS code in theme.liquid above </body> using {% if template == 'collection' %} to target only collection pages, with a visual result showing wider grid.

  • DaisyVo: Recommended inserting CSS code above </head> in theme.liquid that targets the specific collection URL, removing padding from collection grid elements.

Current Status:

The user confirmed DaisyVo’s solution worked after adjusting padding values. However, a new issue emerged: the filter and page heading are not aligned with the widened product images. The user successfully removed padding from the filter but needs guidance on aligning the page title with the grid.

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

How can I make the product grid wider on the collection pages only? so not when viewing a single item or any other part of the website. This is regarding the desktop view.

I increased the max page width in the css but that changes the entire website, rather than just the collections page. Would prefer if it’s just some code I can add in the theme editor for the collection page if possible.

This is the website: https://yujmiu.com/collections/all-clothing - as you can see, the images are small with a lot of empty space at either side.

2

Please add below code in theme.liquid above .

{% if template == 'collection' %}

{% endif %}

Result:

shreyhweb_0-1736877567644.png
shreyhweb_0-1736877567644.png1920×912 160 KB

If it will be works for you then please like and accepted this solution.

Thank you

1 Like
3

Hi @laram

In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above 

{% style %}
{% if  canonical_url == "https://yujmiu.com/collections/all-clothing" %}
div#CollectionAjaxContent > .page-width {
    padding-inline: 0 !important;
}
div#CollectionAjaxContent > .page-width .grid__item .collection-grid__wrapper > .grid > .grid__item.grid-product {
    padding-inline: 0 !important;
}
{% endif %}
{% endstyle %}

Here is the result:

image_720.png
image_720.png720×439 178 KB

I hope this helps

Best,

Daisy

4

Hello! Thank you so much for your help, this worked, although I wanted more padding on each side which I added in the code.

While I was happy with the size of the images, I was hoping the filter and page heading would be aligned with the images too. Removing the padding for the filter worked, but I wan’t sure what to do about the title. Would that be possible? Thank you again.