Collection - Feature a subset of collections on a page

Solved
TyW
Community Manager
Community Manager
413 40 1107

Update 7/9/20: This tutorial has been added to the Shopify Developer documentation website as a supported tutorial > Shopify Developers: Feature a subset of collections on a page. This topic will be locked as a result - if you have questions about the supported tutorial please make a new topic. Thanks!


You can feature a subset of collections on a custom page by editing your theme code. This tutorial shows you how to create a new page template and assign collections to show by using a menu.

collection-01.jpg

All Shopify stores have a collections list page at the URL www.<<yourdomain>>.com/collections  that shows all of the collections in the store. As an alternative to this tutorial, you can edit your collections list page to show only a selection of your collections.

 

Note: Because every theme is different, when you make these changes, the styling might not appear as expected.

 

 

Create your new page template

 

 

You will need to create a new page template to assign to pages on which you will feature collections.

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Templates directory, click Add a new template:

    collection-02.jpg

  4. Create a new template for page called list-collections:

    collection-03.jpg
  5. Paste this code hosted on GitHub at the very bottom of your new page.list-collections file.
  6. Click Save.

 

Create a page on which to feature your collections

 

 

To create a new page:

 

  1. From your Shopify admin, go to Online Store > Pages.
  2. Click Add page.
  3. In the page editor, enter a Title in the text box provided. Note that you must use the same title for the menu that you'll create in the upcoming steps.
  4. Assign your new template to the page by selecting page.list-collections from the Template suffix drop-down menu in the Template section:

    collection-04.jpg

  5. Click Save.

    NoteEven if your new page is visible, it won't appear in your online store navigation automatically. You'll need to add a link to it in a menu.

 

Create the menu that controls which collections are shown

 

 

In this step you will create a menu that controls which collections are shown on your new page.

 

  1. From your Shopify admin, go to Online Store > Navigation.
  2. Click the Add menu button:

    collection-05.jpg

  3. Give your menu the same Title as the title that you gave the page that will feature your collections. For example, if the page you created has the title Living Room, then you will give your menu the title Living Room:

    collection-06.jpg

  4. Add links to your menu for each collection that you want to feature by clicking Add menu item. Choose collections from your store by clicking on Collections in the drop-down menu for the Link text box. It is important to link to your collections in this way, instead of adding a URL to the text box:

    collection-07.jpg

  5. Click Save menu.

 

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 77 (77)
mosh
New Member
2 0 0

@mosh wrote:

Hi,

Thanks for the post.

I followed the post and am getting a double on the bottom of the page.

Any fixes will be greatly appreciated.

 

Thanks


It seems like that with the supply theme adding the code was making the issue. I removed the code and followed the rest of the steps. Now it's all good



KalebSpellman
New Member
1 0 1
Hey, I have implemented this tutorial on my website. But I would like to make the collections appear the same as they do on the homepage with the text over-top of the images and the same layout, spacing, etc. My website is www.spellman-designs.myshopify.com Would anyone know how to go about this?
JTMADSEN91
New Member
1 0 6

Why is such a seemingly basic functionality so difficult to implement? This makes no sense. 

JanitorTT
New Member
1 0 0

I think I've finally worked out how to do this. 

 

You need to add the following to you css file as well:

 

.collection-grid-item__overlay img {
object-fit: cover;

}

 

Page code is this: 

 

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>
</div>
</div>

{% comment %}
Collections are listed here.
{% endcomment %}

{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %}

{% if uses_minimal_framework contains 'Liquid error' %}
{% assign uses_minimal_framework = false %}
{% assign grid_item_width = 'grid__item small--one-half medium-up--one-third' %}
{% else %}
{% assign uses_minimal_framework = true %}
{% assign grid_item_width = 'span3' %}
{% endif %}

{% assign image_size = 'large' %}

{% if linklists[page.handle].links.size > 0 %}

{% assign number_of_links = 0 %}

<div class="grid grid--uniform">

{% for link in linklists[page.handle].links %}

{% if link.type == 'collection_link' %}

{% comment %}
If we have a collection link.
{% endcomment %}

{% assign collection = link.object %}
{% assign number_of_links = number_of_links | plus: 1 %}

<div class="grid__item small--one-half medium-up--one-third">
<div class="collection-grid-item">
<div class="grid__image product-grid-image">
<a href="{{ link.url }}" class="collection-grid-item__link">
<div class="collection-grid-item__overlay box ratio-container js lazyloaded">
{% comment %}
Bring in the featured image of the first product in the collection if no collection
image has been uploaded for it.
{% endcomment %}
{% if collection.image %}
<img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}">
{% else %}
{% assign product = collection.products.first %}
<img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}">
{% endif %}
</div>
<div class="collection-grid-item__title-wrapper">
<div class="collection-grid-item__title h3">
{% if collection.title == blank %}
{{ 'homepage.onboarding.collection_title' | t }}
{% else %}
{{ collection.title }}
{% endif %}
</div>
</div>
</a>

</div>
</div>

</div>

{% if uses_minimal_framework %}
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
{% endif %}

{% elsif link.type == 'page_link' %}

{% comment %}
If we have a page link.
{% endcomment %}

{% assign number_of_links = number_of_links | plus: 1 %}

{% assign linked_page = link.object %}
{% assign have_image = false %}

{% comment %}
Does the page contain an image? If so, let's use it.
{% endcomment %}

{% if linked_page.content contains '<img' %}

{% assign have_image = true %}
{% assign src=linked_page.content | split: 'src="' %}
{% assign src=src[1] | split: '"' | first %}
{% capture image_suffix %}_{{ image_size }}.{% endcapture %}
{% assign src=src | replace: '_small.', image_suffix | replace: '_compact.', image_suffix | replace: '_medium.', image_suffix | replace: '_large.', image_suffix | replace: '_grande.', image_suffix %}

{% comment %}
If the page contains no image, and that page features collections, let's grab the image of the first
collection on it.
{% endcomment %}

{% elsif linklists[linked_page.handle].links.size > 0 and linklists[linked_page.handle].links.first.type == 'collection_link' %}

{% assign have_image = true %}
{% assign collection = linklists[linked_page.handle].links.first.object %}

{% if collection.image %}
{% assign src=collection | img_url: image_size %}
{% else %}
{% assign src=collection.products.first | img_url: image_size %}
{% endif %}

{% endif %}

<div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
<div class="grid-image product-grid-image">
<a href="{{ link.url }}" class="grid-image--centered">
{% if have_image %}
<img src="{{ src }}" alt="{{ link.title | escape }}" />
{% else %}
<img src="{{ link.title | handle | append: '_' | append: image_size | append: '.png' | file_url }}" alt="{{ link.title | escape }}" />
{% endif %}
</a>
</div>
<p class="collection-grid__item-title">
<a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
</p>
</div>

{% if uses_minimal_framework %}
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
{% endif %}

{% endif %}

{% endfor %}

</div>

{% if number_of_links == 0 %}

<div class="grid">
<div class="grid__item grid-item rte text-center">
<p>
There are no links of type <i>Collection</i> in your <b>{{ page.title }}</b> link list.
Go ahead and <a href="/admin/link_lists/{{ linklists[page.handle].id }}" target="_blank">edit your link list</a> to use links that point to collections.
</p>
</div>
</div>

{% endif %}

{% else %}

<div class="grid">
<div class="grid__item grid-item rte text-center">
<p>
You do not have a link list with a handle set to <kbd>{{ page.handle }}</kbd>, or you do and it's empty.
Go ahead and create a link list called <b>{{ page.title }}</b> on your <a href="/admin/links" target="_blank">Navigation page</a> and populate that link list with links that point to collections, to see collections listed here.
Make sure the link list also has a handle set to <kbd>{{ page.handle }}</kbd>.
</p>
</div>
</div>
</div>

{% endif %}

<style>
kbd {
background-color: #FBFBE4;
padding: 1px 4px;
border-radius: 3px;
}
</style>

kopperorc3d
New Member
2 0 0

What I did to get this to work is you have to create pages for each level above the last (also make sure to do the navigation as described in the tutorial.)

 

1) Page

2) Page

3) Page

4) Collection

 

For each page that will lead to another page, insert a picture. If you leave this as is, you'll see this photo at the top of the page which really looks out of place, you don't want it. So what I did is I simply hid it. Maybe there is a way to make it show as a banner, I didn't explore this. If you show html in the content editor box, it should show something like this below. The important bit you need is the display:none part.

 

<p><img src="https://cdn.shopify.com/s/files/1/0177/0356/7414/files/pyramid_1_480x480.jpg?v=1586898407" alt="" style="display: none; margin-left: auto; margin-right: auto;" width="480x480" height="480x480" /> </p>

WonkiWear
New Member
1 0 1

@KalebSpellman wrote:
Hey, I have implemented this tutorial on my website. But I would like to make the collections appear the same as they do on the homepage with the text over-top of the images and the same layout, spacing, etc. My website is www.spellman-designs.myshopify.com Would anyone know how to go about this?

Hi I was wondering if you managed to do this as I would love to do the same?

xoi_iox
Excursionist
12 0 0

Nothing seems to work for me. If anyone figures this out, please let me know as I'd love the collections to run horizontally. 

xoi_iox
Excursionist
12 0 0

It's funny that the image with this shows the collections horizontally, but the actual outcome is vertical rows. 😄 

RoyalBisonFair
New Member
2 0 1

This is amazing, and we've got this in our site but we now need the grid on the subset page to look exactly like the grid on the Collections/All page. Is there some way to make the look of the two pages to be equal and for this new list-collection page to draw its look from the collections page?

LucasLink
New Member
1 0 1

Fantastic tutorial. This is a lot more useful than hard-coding it in directly to  the templates as it allows non code-savvy users to easily alter the content of the collection navigation. I was looking for something like this for the front page of our shopify store. 

I altered the code a bit to get it to work on the front page. Since the front page doesn't have a page handle, it will spit back the error "You do not have a link list with a handle set to  " if you simply copy and paste the code as-is.

Instead, alter the following 2 lines of code 

 

Line 17 

{% if linklists[page.handle].links.size > 0 %}

change this to 

{% if linklists.yourmenu-handle.links.size > 0 %}

where yourmenu-handle is the handle of the menu you created.

 

Line 23

{% for link in linklists[page.handle].links %}

change this to

{% for link in linklists.yourmenu-handle.links %}

Voila. 

cjohnks
New Member
3 0 0

I'm having trouble trying to get the collections to show more than 1 per row. I've tried everything everyone put here. Any advice would be greatly appreciated!

 

Here's a link to the page:

https://ifixyouri.myshopify.com/pages/iphone-repair-services

 

Any advice would be greatly appreciated!

Englyst
Tourist
6 0 3

Fantastic guide, which helped me a lot. I can make it work, but the collections shows on a page in rows of 3 with large images.

 

I would like to have 5 collections on each row. Anyone who can help with that?

 

I am using the supply theme.

Smeelah
Navigator
289 1 78

Thanks for that @Englyst . I found the video for my theme and the collection is displaying well.

 

However, I would like to be able to add more content to the custom collections page. I don't see that option in the Customize Theme section. I added text directly to the page but it did not show up.

ensenterprises
Shopify Expert
83 5 6

Hi, May be you need to add some option for that using schema.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: einsteinnephew@gmail.com
Skype: einsteinnephew.ens1
Smeelah
Navigator
289 1 78

@EN Thanks. I don't know what schema is but if someone can point me in the right direction I can give it a try:)

ensenterprises
Shopify Expert
83 5 6

Hi, Can you please provide me more detail what you want to add accordingly I can suggest.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: einsteinnephew@gmail.com
Skype: einsteinnephew.ens1
Smeelah
Navigator
289 1 78

@EN Just text in paragraph form and perhaps an image. But text is most vital. Thanks!

 

ensenterprises
Shopify Expert
83 5 6

If you just want para then you can add the content in collection description and add image in collection featured image.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: einsteinnephew@gmail.com
Skype: einsteinnephew.ens1
Smeelah
Navigator
289 1 78

Oh, I am using the method that @Englyst mentioned where the subset of collections is a page, not a collection, if I have that right. I tried adding text to the page form and it didn't show up. 

When I use the 'collection of collections" method the formatting(?) is messy on some devices.

 

Screen Shot 2020-05-30 at 8.19.08 PM.png