Collection Section able to be Pages

Store Design
, ,

Topic summary

A user wants to modify the Dawn theme’s collections section to display clickable page links instead of collections, with images that darken on hover. They prefer this as custom CSS to apply selectively.

Proposed Solutions:

  • Create a custom section by duplicating the collections section code and replacing collection settings with page settings via Liquid
  • Use an existing custom grid liquid code from another community post
  • Adapt the multicolumn section with custom CSS

Current Status:
The multicolumn approach with custom CSS was implemented. The styling works correctly (full-bleed layout, hover opacity effect), but the images are not clickable yet. The helper noted this requires both a link and link label to be present in the multicolumn configuration, but cannot diagnose further without seeing the actual page setup.

The discussion remains open with the clickability issue unresolved.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

I’d like to use the collections section, but instead of choosing collections I would like to be able to add pages. So that the photo is clickable and I can have what I want to label it in the middle or on the bottom left. I am unsure if this would work better as a multicolumn. I am using dawn theme. I would also like this to be a custom css so I can add it to some, but not all of the sections.

2

You can try making a new section from your theme code editor using the collections section that’s there.

Instead of collections,you can add settings with liquid to let you add pages.

By the way, I am not clear if I am getting this right, so please if you can share some examples of your requirement or may be a more detailed explanation.

Best

Shadab

3

Screenshot 2025-03-28 at 11.29.51 PM.png
Screenshot 2025-03-28 at 11.29.51 PM.png2990×1346 778 KB

Here is a photo of an example. They have the full photo as the button and it is for a page. Also when you go over the photo it gets a darker. Hope this helps with explaining!

4

In this post the he post a custom grid liquid code you can use it.
https://community.shopify.com/post/2994857
it will looks like how you want almost

5

Have you tried multicolumn?

Some CSS can help with changing the look.

If you can create a page and configure the section the way you like, it will be easier to help finalise the look.

For example, this is a multicolumn with some custom CSS:

Screenshot 2025-03-29 at 6.55.25 PM.png
Screenshot 2025-03-29 at 6.55.25 PM.png1618×908 268 KB

6

Multicolumn works, but I’d like the photo to be clickable.

Could you shate that css and would I put that into the particular css for that section? I don’t want to add this to all my multicolumns.

7

Yes, into this section “Custom CSS”

.multicolumn>div{
 max-width:none;
 padding:0;
 --grid-desktop-horizontal-spacing:0;
 --grid-mobile-horizontal-spacing:0;
}
.multicolumn-list{
 gap:0;
 padding:0;
}
.multicolumn-card-spacing{
 padding:0;
 margin:0;
 margin-right:0;
}
li:hover{opacity:.85 !important;}
.multicolumn-card__info{padding:0;}
.link{
 position:absolute;
 color:rgb(var(--color-button-text));
 padding:.5rem 2rem;
 margin:0;
 top:0;
 left:0;
 right:0;
 width:100%;
 height:100%;
 display:flex;
 align-items:flex-end;
 justify-content:center;
}

This also makes it full-bleed. If you do not want it, remove or modify max-width:none; rule.

8

Thank you Tim! It works and looks great, but the photo isn’t clickable.

9

Without seeing your page I can only point out that this solution requires both link and link label present.