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.
All Shopify stores have a collections list page at the URL www.mystore.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.
Create A Page of Collections on Shopify
Create your new page template
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Templates directory, click Add a new template:
Create a new template for page called list-collections:
Delete the existing code in your new page.list-collections file. Find your theme code below and copy and paste the code in your page.list-collections file.
Click Save.
The code for this customization varies depending on your theme. Choose your theme before copying and pasting it into your page.list-collections file:
Boundless
{% comment %}
Featuring collections on a page using a menu
https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}
{%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' -%}
{%- case linklists[page.handle].links.size -%}
{%- when 2 -%}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{%- when 3 -%}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' %}
{%- else -%}
{%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' %}
{%- endcase -%}
<div class="page-width page-container">
<header>
<h1>{{ page.title }}</h1>
</header>
<div class="rte rte--indented-images">
{{ page.content }}
</div>
<div class="grid grid--no-gutters collection-grid">
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{%- assign featured = link.object.handle -%}
{%- include 'collection-grid-item', collection: collections[featured] -%}
{%- endif -%}
{%- endfor -%}
</div>
</div>
Brooklyn
{% comment %}
Featuring collections on a page using a menu
https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}
{%- assign collection_count = 0 -%}
{%- assign isEmpty = true -%}
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{%- assign collection_count = collection_count | plus: 1 -%}
{%- endif -%}
{%- endfor -%}
{%- assign collection_index = 0 -%}
{%- assign divisible_by_three = collection_count | modulo: 3 -%}
{%- assign divisible_by_two = collection_count | modulo: 2 -%}
<div class="grid">
<div class="grid__item large--five-sixths push--large--one-twelfth">
<header class="section-header text-center">
<h1>{{ page.title }}</h1>
<hr class="hr--small">
</header>
<div class="grid">
<div class="grid__item large--four-fifths push--large--one-tenth">
<div class="rte rte--nomargin rte--indented-images">
{{ page.content }}
</div>
</div>
</div>
</div>
</div>
<div class="grid collection-grid">
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{%- assign collection = collections[link.object.handle] -%}
{%- assign collection_index = collection_index | plus: 1 -%}
{%- assign collection_handle = collection.handle -%}
{% include 'collection-grid-collage' %}
{%- endif -%}
{%- endfor -%}
</div>
Debut
{% comment %}
Featuring collections on a page using a menu
https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}
<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>
<ul class="grid grid--uniform">
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{%- assign image_size = '350x' -%}
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{%- assign collection = collections[link.object.handle] -%}
<li class="grid__item {{ grid_item_width }}">
{% include 'collection-grid-item', collection_image_size: image_size %}
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
Minimal
{% comment %}Featuring collections on a page using a menu
https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}
<div class="grid">
<div class="grid__item post-large--two-thirds push--post-large--one-sixth">
<div class="section-header">
<h1 class="section-header--title">{{ page.title }}</h1>
</div>
<div class="rte">
{{ page.content }}
</div>
</div>
</div>
{%- assign collection_item_width = 'medium-down--one-half post-large--one-third' -%}
{%- assign collection_width = 410 -%}
<div class="grid-uniform">
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{%- assign featured = link.object.handle -%}
<div class="grid__item {{collection_item_width}} text-center">
{% include 'collection-grid-item' with collection_width: collection_width %}
</div>
{%- endif -%}
{%- endfor -%}
</div>
Narrative
{% comment %}Featuring collections on a page using a menu
https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}
<div class="page-width">
<header class="section-header text-center">
<h1 class="section-header__title h2">{{ page.title }}</h1>
</header>
<div class="grid">
<div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
<div class="rte">
{{ page.content }}
</div>
</div>
</div>
<div class="list-collections-template" data-section-id="list-collections-template" data-section-type="list-collections-template">
{%- assign desktopColumns = '3' -%}
{%- assign mobileColumns = '1' -%}
{%- capture gridClasses -%}
{% if desktopColumns == '3' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}
{% if mobileColumns == '2' %}small--one-half {% endif %}
{%- endcapture -%}
{% comment %}
For Collage style replace grid_style = 'grid' with grid_style = 'collage' below
{% endcomment %}
{%- assign grid_style = 'grid' -%}
<div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ grid_style }}">
<div class="card-list__column grid grid__item {{ gridClasses }}">
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{%- assign collection = collections[link.object.handle] -%}
{% include 'collection-card', collection: collection, width: desktopColumns, grid_style: grid_style %}
{%- endif -%}
{%- endfor -%}
</div>
</div>
</div>
</div>
Simple
{% comment %}Featuring collections on a page using a menu
https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}
<h1 class="small--text-center">{{ page.title }}</h1>
<div class="rte">
{{ page.content }}
</div>
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
<div class="grid grid--uniform">
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{% assign collection = collections[link.object.handle] %}
<div class="grid__item {{ grid_item_width }}">
{% include 'collection-grid-item' %}
</div>
{%- endif -%}
{%- endfor -%}
</div>
Venture
{% comment %}Featuring collections on a page using a menu
https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}
<div class="page-width">
<h1 class="small--text-center">{{ page.title }}</h1>
<div class="content-block">
<div class="rte rte--indented-images">
{{ page.content }}
</div>
</div>
{%- assign collection_count = 0 -%}
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{%- assign collection_count = collection_count | plus: 1 -%}
{%- endif -%}
{%- endfor -%}
{% assign number_rows = 1 %}
{% case collection_count %}
{% when 1 %}
{% assign grid_item_width = 'medium-up--one-half' %}
{% assign height = 450 %}
{% when 2 %}
{% assign grid_item_width = 'medium-up--one-half' %}
{% assign height = 450 %}
{% when 3 %}
{% assign grid_item_width = 'medium-up--one-third' %}
{% assign height = 330 %}
{% when 4 %}
{% assign grid_item_width = 'medium-up--one-quarter' %}
{% assign height = 235 %}
{% else %}
{% assign grid_item_width = 'medium-up--one-third' %}
{% assign height = 330 %}
{% assign number_rows = collection_count | divided_by: 3.0 | ceil %}
{% endcase %}
<div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
{% assign row_number = 1 %}
{%- for link in linklists[page.handle].links -%}
{%- if link.type == 'collection_link' -%}
{%- assign featured_collection = collections[link.object.handle] -%}
{% if collection_count > 4 and forloop.index > 3 %}
{% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
{% endif %}
{% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
{%- endif -%}
{%- endfor -%}
</div>
</div>
Paste the code into the page.list-collections file.
Create a Page on Which to Feature Your Collections
From your Shopify admin, go to Online Store > Pages.
Click the Add page.
In the page editor, enter a Title in the text box provided. You must use the same title for the menu that you'll create in the upcoming steps.
Assign your new template to the page by selecting page.list-collections from the Template suffix drop-down menu in the Template section:
Click Save.
Create the Menu that Controls which Collections are Shown
From your Shopify admin, go to Online Store > Navigation.
Click the Add menu button:
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 Kitchen, then give your menu the title Kitchen.
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. Link to your collections in this way, instead of adding a URL to the text box:
Click Save menu.
No comments:
Post a Comment