Last active
March 8, 2018 15:19
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.