Increase product grid width (desktop) - Impulse theme

Store Design
, ,
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

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.