How to customise Product Grid on Collections Page

[devnoob]

URL:https://reason-for-being.store/collections/all

Theme: Dawn

Password: pex100

on my mobile, the product images of the collection page are very small (ideally we would want 1 product image and title to cover the whole screen and scroll will take it to the next product). Also, the produt title doesnt align and there is a lot of white space.

in the web version, the product title and product images align but it changes with the screen size:

correct version above:

Incorrect version below, note the shift in product title name:

last, the middle column gap is very big.

Any one has any thoughts on this?

[dws_pvt_ltd]

Hello @devnoob, Please add the code below in your CSS file of the collections grid file which you put it with the section.id of the collections section.

{{ your_section_id_here }} .collection .card__inner {
    width: 100%; /* add this CSS */
    margin: 0 auto;
}

See the screenshot below,

Feel free to reach out if you have any questions or need assistance.

Best Regards,

DWS.

[devnoob]

Hi,

Thank you so much for getting back. I am new to this so would you know how I can find my section id?

[dws_pvt_ltd]

@devnoob please open your main-collection-product-grid.liquid file in edit code, i think at below your section id is occurs. Search in this file like "#shopify-section-template--22804030619992__product-grid" or "#shopify-section-{{ section.id }}". You can find like this. Please try !

[devnoob]

Thanks for getting back again. I dont find any info related to #shopify-section in that file unfortunately. checking other places

[devnoob]

Hi,

I think I figured out the section id issue. 

the only problem is, images are very large now and are going over the screen now and product info isnt visible until I scroll. Any thougts on a fix for this?

[dws_pvt_ltd]

Hello @devnoob, See your actual image size is already having 360 x 450 but it takes too much width and height through your HTML width and height of the image filter when you rendered this. see the screenshot below, it takes width="3573" height="4466" in HTML and render with a 800 x 800 sized image.

[Antoine880]

Dear you can convert images in webp image format. it will helpful and fast solution.

[johndepict]

we built a no-code collection page/grid builder so that you don't have to solve this with custom code: https://apps.shopify.com/depict

works natively with dawn/shopify, just ping me if you have any questions!