How to add a page to my store with a subset of collection

Solved
New Member
6 0 0

Hello!

 

I'm trying to add a page to my store which features a subset of collections, so when people click "greetings cards" in the main menu they are taken to a page with a picture grid showing the different subsections such as "wedding cards", "birthday cards" etc.

 

I followed this tutorial: https://help.shopify.com/en/themes/customization/collections/featuring-collections-using-link-lists

 

but I just end up with huge images, all the same picture not in a grid (example: https://www.fawnandthistle.com/pages/greeting-cards) . Is there any other way to do this?

 

I'm on minimal theme.

0 Likes

Success.

Astronaut
1069 144 256

In your page template you can add this to the top of the file inside style tags:

 

<style>
.grid-uniform {
    display: flex;
    flex-wrap: wrap;
}

body#greeting-cards .grid-item {
    width: 25%;
}

@media (max-width: 1201px){
  body#greeting-cards .grid-item {
    width: 33.33%;
}  
}

@media (max-width: 768px){
  body#greeting-cards .grid-item {
    width: 50%;
}  
}
@media (max-width: 500px){
  body#greeting-cards .grid-item {
    width: 100%;
}  
}
</style>

I made it specific to your greeting-card page so that it wouldnt mess with anything else on your site. As you shrink the page the columns will switch sizes and stack so it's mobile friendly.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
6 0 0

HI Ninthony,

 

 

Thank you for that, it seems to have worked for the grid layout. However it's still all the same image and I can't find out where to fix that!

0 Likes
New Member
6 0 0

I've worked it out! Thank you for your help :)

0 Likes