Setting specific collections for custom pages

Highlighted
Shopify Staff
Shopify Staff
630 16 197

From Partner Blog article: Tips for Using Snippets in Your Shopify Theme

Hi, sorry to be a pain, but this seems to be the closest I've found from research to displaying a specific collection IN a custom page in Shopify. I've been using WP for years but this is my first dabble in Shopify! I've tried to follow the above but I'm completely lost. I have 4 different custom pages, and in each I would like to display a different product collection in each. What code would you suggest to use as a snippet to simply display all products in a named collection? I only have 4 categories so it's no problem to have 4 different snippets I can call into a different template for each page.

Any help would be monumentally appreciated!

Hey Mark, great to hear you are making some moves over from WordPress and looking to do some theme customisation, so let’s see how we can get specific collections loading on custom pages :) I was able to get the effect you are looking for, by using sections instead of snippets- but be warned, it is a lengthy process. Sections are a bit like snippets, in that they are modular elements that can be included in a Liquid template, but are more flexible- as we'll see! (Also, it might go without saying, but make sure you have made a backup of the theme before you start editing Liquid files) 

In this example I used the Debut theme, but the process should work for any theme. First I found the featured collection section which can be added to a home page, in the sections folder of the theme. In Debut it's called collection.liquid but it could have a different name, depending on the theme you're using.

Since it can be added at the home screen, it’s what’s known as a dynamic section. In Shopify there are dynamic sections and static. Static sections are added manually to templates, which is what we want in this case. To turn a dynamic section into a static section, we need to delete the presets. 

This is the presets part of the array I removed from the bottom of the section: 

 "presets": [
      {
        "name": {
          "en": "Featured collection",
          "de": "Featured Kategorie",
          "fr": "Collection vedette"
        },
        "category": {
          "en": "Collection",
          "de": "Kategorie",
          "fr": "Collection"
        }
      }
    ]

Next I created three versions of this static section, one for each of the collections I wanted to add to pages: featured-collection-men.liquid, featured-collection-women.liquid, and featured-collection-shoes.liquid. 

Following on from this was creating custom page templates for each of these collections, which corresponded to the naming conventions above. Once these are created your templates folder would look something like this:

Now we need to include each static section to it’s matching custom page template You can include a section in a template file using the section tag. In this case if I wanted to include the mens featured collection section within a template, I'd add {% section 'featured-collection-men' %}. For example, with the mens page/ collection, the page.men.liquid file would look like 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 }}
        {% section 'featured-collection-men' %}
      </div>
    </div>
  </div>
</div>

In the case above, the featured collection section is going to appear below the main content of the page. 

Once these are all added to the various page templates, the pages themselves need to have these new custom page templates applied to them. You can do this on the admin, within the page editor:

Finally, I need to decide where on the online store these will appear, in my case as a drop down menu.

Now, when I go to the theme editor and navigate to each custom page, you can assign a specific collection, within the section settings. This video shows this process. 

I know this is not the most straightforward process Mark, so I’d be happy to help if you get stuck on any of the steps, or if you have any questions on this process :) Hope this helps 

 

Liam Griffin 

Shopify Partner Education

Liam Griffin
Shopify | Developer Community Manager
1 Like
Highlighted
New Member
1 0 1

I am trying to do the same thing you described and I am completely confused.

1 Like