Skip to content

Instantly share code, notes, and snippets.

@briansteeleca
Last active March 8, 2018 15:19
Show Gist options
  • Save briansteeleca/1d0db9274ccfc0c4795758b2dc57217c to your computer and use it in GitHub Desktop.
Save briansteeleca/1d0db9274ccfc0c4795758b2dc57217c to your computer and use it in GitHub Desktop.
Shopify Narrative Theme: Page template for "Feature a subset of collections on a page". https://help.shopify.com/themes/customization/collections/featuring-collections-using-link-lists
<div class="shopify-section">
<div class="list-collections-template" data-section-id="" data-section-type="list-collections-template">
<div class="page-width">
<div class="grid text-center">
<div class="grid__item medium-up--ten-twelfths medium-up--push-one-twelfth">
<header class="section-header text-center">
<h1 class="section-header__title h2">{{ page.title }}</h1>
</header>
<div class="rte">
{{ page.content }}
</div>
</div><!-- grid__item -->
</div><!-- grid -->
{% comment %} Set number of columns here: {% endcomment %}
{%- assign desktopColumns = '2' -%}
{%- 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 -%}
{% if linklists[page.handle].links.size > 0 %}
{% assign number_of_links = 0 %}
{% comment %} BRIAN disabled animations with animations--disabled class (below) because of product items not displaying properly on mobile. {% endcomment %}
<div class="animations--disabled card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}">
<div class="card-list__column grid grid__item {{ gridClasses }}">
{% for link in linklists[page.handle].links %}
{% if link.type == 'collection_link' %}
{% assign collection = link.object %}
{% assign number_of_links = number_of_links | plus: 1 %}
<div class="card critical-clear" style="opacity:1;">
{% comment %} Enable image spacing is added with .card__wrapper--padding {% endcomment %}
<a href="{{ link.url }}" class="card__wrapper card__wrapper--padding text-center">
{% if collection.title == blank %}
{% assign collection_image = blank %}
{% elsif collection.image %}
{% assign collection_image = collection.image %}
{% else %}
{% assign collection_image = collection.products.first.featured_image %}
{% endif %}
{% unless collection.title == blank %}
{% include 'card-image', type: collection_image %}
{% else %}
<div class="card__image-wrapper">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endunless %}
<div class="card__info">
<h3 class="card__name h4">{% if collection.title != blank %}{{ collection.title }}{% else %}{{ 'homepage.onboarding.collection_title' | t }}{% endif %}</h3>
{% if collection.description != blank %}
<div class="rte card__description{% if width == '2' %} card__description--padding{% endif %}">
{{ collection.description | strip_html | truncatewords: 50 }}
</div>
{% endif %}
</div><!-- card__info -->
</a>
</div><!-- card -->
{% endif %}
{% endfor %}
</div><!-- card-list__column -->
</div><!-- card-list -->
{% endif %}
</div><!-- page-width -->
</div><!-- list-collections-template -->
</div>
@briansteeleca
Copy link
Author

In "Create your new page template", step 5, you are asked to download some code hosted on GitHub. If you're using Shopify's Narrative theme, you can use the above code instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment