How can I add a grid to my Symmetry Theme collection page?

[Salomea]

Hi,

I have a store with Symmetry Theme. I want to add a grid only to the collection products.

I tried this code, but the grid is not showing only on the collection.

.collection-listing .product-list–per-row-4 .product-block {
width: 25%;
border: solid 1px #ccc;
margin-bottom: 0px;
padding:10px;
}

I want only here: https://prnt.sc/flgWu20NF-ha

The code above displays here too: https://prnt.sc/oYX-ubHJGtMy

[Ujjaval]

@Salomea try below code in theme.liquid file

{% if template contains 'collection' %}
{% style %}   
.collection-listing .product-list--per-row-4 .product-block {
width: 25%;
border: solid 1px #ccc;
margin-bottom: 0px;
padding:10px;
}
{% endstyle %}
{% endif %}

[PageFly-Henry]

Hi @Salomea ,

This is Henry at PageFly - Shopify Advanced Page Builder app.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

{% if template contains 'collection' %}

{% endif %}

Hope this answer helps.

Best regards,

Henry | PageFly

[Salomea]

How can I get rid of the space on the right side of the page? Mobile and desktop versions.

[Ujjaval]

@Salomea Can you share your store url?

[Salomea]

Sorry, I can’t give the store URL, but this might help.