Does anyone have a custom code for an image grid with a button on each image. PLEASE HELP!

Solved

Does anyone have a custom code for an image grid with a button on each image. PLEASE HELP!

kismetandsoul
Shopify Partner
3 0 0

I'm still new to shopify and custom code I think is the only thing that can help - something I know nothing about. 

 

I've watched youtube videos, copy and pasted code from forums and I either get an error message or its not what Im after. 

 

I'll put in as much detail as I can below for what I am looking for. I'm using the updated Dawn theme, its one I'm familiar with somewhat as I have used it for another site and I am building another one which is where I have hit a wall. 

 

I have the home page done with a button that says shop now in the image banner - super basic. 

Once a customer clicks on that button I need them to be taken to the next page that has 4 images (2x2 grid) and each image is a different product category and they each have a button that links to their respective pages. 

 

For example - They click on image one (out of the 2x2 grid) that is the Womens category, the next page then has 12 images of products (trousers, jumpers, accessories etc...) all with their own buttons that say See More.  Once the customer has clicked on See More button they can browse a products or collection page. 

 

Can anyone help with this? I have seen so many forums that ask for image grids but I haven't found anything I can copy and paste that would also allow a link. 

 

Is this even possible with Dawn? If there's another theme that caters to this or a solution that is drag and drop copy and paste for me to use PLEASE let me know! Thanks in advance!

Accepted Solution (1)

gr_trading
Shopify Partner
1891 145 199

This is an accepted solution.

Hi @kismetandsoul 

 

You don't need any code for this.

 

Please follow below steps.

 

1. Create a new page using customise option of the.

2. Put collection list block from section to that page.

3. Select the collection you want to show.

4. customise the collection listing liquid file as u did for home page.

 

Hope it will help...

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee

View solution in original post

Replies 3 (3)

gr_trading
Shopify Partner
1891 145 199

This is an accepted solution.

Hi @kismetandsoul 

 

You don't need any code for this.

 

Please follow below steps.

 

1. Create a new page using customise option of the.

2. Put collection list block from section to that page.

3. Select the collection you want to show.

4. customise the collection listing liquid file as u did for home page.

 

Hope it will help...

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
kismetandsoul
Shopify Partner
3 0 0

THIS IS IT!!! THANK YOU! 3 days of ripping my hair out and now I can move on to all the other roadblocks to finish this up! Its a learning curve for sure and SO glad this community is here. #Gr_tradingforthewin 

 

Kismet & Soul

Jahid-KlinKode
Excursionist
145 1 5