Solved

How to show four collections in one row on home page in Pop Theme?

enb300
Tourist
5 0 1

Hi- 

 

I'm fairly new at this and I would really appreciate any advice anyone has over reconfiguring the Pop theme to display four collections (as "collections lists") on the homepage in a single row rather than having only three. I have attached a screenshot so you can see the section I am talking about, I would like to add one more collection to the row.

 

Screen Shot 2019-08-28 at 11.55.35 AM.pngThank you in advance!!!

Accepted Solution (1)
shayOwensby
Shopify Expert
169 40 94

This is an accepted solution.

@enb300

 

Here is what you'll copy into that collection-list.liquid file. 

 

1. Go to Online Store > Themes > Actions > Edit Code. 

2. Find the "Sections" folder and select "collection-list.liquid"

3. Copy and paste the following code: 

{% unless section.settings.title == blank %}
  <h2 class="section-header__title text-center">{{ section.settings.title | escape }}</h2>
{% endunless %}

<div class="grid-uniform text-center collection-grid" data-section-id="{{ section.id }}">
  {% case section.blocks.size %}
    {% when 1 %}
      {% assign featured_collection_width = 'one-whole' %}
      {% assign featured_collection_size = 1000 %}
    {% when 2 %}
      {% assign featured_collection_width = 'small--one-whole medium--one-half large--one-half' %}
      {% assign featured_collection_size = 480 %}
    {% when 3 %}
      {% assign featured_collection_width = 'small--one-whole one-third' %}
      {% assign featured_collection_size = 240 %}
    {% when 4 %}
      {% assign featured_collection_width = 'small--one-whole medium--one-quarter large--one-quarter' %}
      {% assign featured_collection_size = 480 %}
    {% when 5 %}
      {% assign featured_collection_width = 'small--one-whole medium--one-third large--one-third' %}
      {% assign featured_collection_size = 240 %}
    {% when 6 %}
      {% assign featured_collection_width = 'small--one-whole medium--one-third large--one-third' %}
      {% assign featured_collection_size = 240 %}
    {% else %}
      {% assign dividable_by_3 = section.blocks.size | modulo: 3 %}
      {% assign dividable_by_2 = section.blocks.size | modulo: 2 %}
      {% if dividable_by_3 == 0 %}
        {% assign featured_collection_width = 'small--one-whole medium--one-quarter large--one-quarter' %}
        {% assign featured_collection_size = 240 %}
      {% elsif dividable_by_2 == 0 %}
        {% assign featured_collection_width = 'small--one-whole medium--one-half large--one-half' %}
        {% assign featured_collection_size = 480 %}
      {% else %}
        {% assign featured_collection_width = 'small--one-whole medium--one-third large--one-third' %}
        {% assign featured_collection_size = 240 %}
      {% endif %}
  {% endcase %}

  {% for block in section.blocks limit: section.blocks.size %}
    {% assign featured = block.settings.collection %}
    <div class="grid-item {{ featured_collection_width }}" {{ block.shopify_attributes }}>
      {% include 'featured-collection' %}
    </div>
  {% endfor %}
</div>



{% schema %}
{
  "name": {
    "da": "Kollektionsliste",
    "de": "Kategorien-Liste",
    "en": "Collection list",
    "es": "Lista de colecciones",
    "fi": "Kokoelmaluettelo",
    "fr": "Liste des collections",
    "hi": "कलेक्शन सूची",
    "it": "Elenco delle collezioni",
    "ja": "コレクションリスト",
    "ko": "컬렉션 목록",
    "ms": "Senarai koleksi",
    "nb": "Samlingsliste",
    "nl": "Collectielijst",
    "pt-BR": "Lista de coleções",
    "pt-PT": "Lista de coleções",
    "sv": "Kollektionslista",
    "th": "รายการคอลเลกชัน",
    "zh-CN": "产品系列列表",
    "zh-TW": "商品系列清單"
  },
  "class": "index-section",
  "max_blocks": 6,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": {
        "da": "Overskrift",
        "de": "Titel",
        "en": "Heading",
        "es": "Título",
        "fi": "Otsake",
        "fr": "Titre",
        "hi": "शीर्षक",
        "it": "Heading",
        "ja": "見出し",
        "ko": "제목",
        "ms": "Tajuk",
        "nb": "Overskrift",
        "nl": "Kop",
        "pt-BR": "Título",
        "pt-PT": "Título",
        "sv": "Rubrik",
        "th": "ส่วนหัว",
        "zh-CN": "标题",
        "zh-TW": "標題"
      },
      "default": {
        "da": "Kollektionsliste",
        "de": "Kategorien-Liste",
        "en": "Collection list",
        "es": "Lista de colecciones",
        "fi": "Kokoelmaluettelo",
        "fr": "Liste des collections",
        "hi": "कलेक्शन सूची",
        "it": "Elenco delle collezioni",
        "ja": "コレクションリスト",
        "ko": "컬렉션 목록",
        "ms": "Senarai koleksi",
        "nb": "Samlingsliste",
        "nl": "Collectielijst",
        "pt-BR": "Lista de coleções",
        "pt-PT": "Lista de coleções",
        "sv": "Kollektionslista",
        "th": "รายการคอลเลกชัน",
        "zh-CN": "产品系列列表",
        "zh-TW": "商品系列清單"
      }
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": {
        "da": "Samling",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "hi": "कलेक्शन",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "ms": "Koleksi",
        "nb": "Samling",
        "nl": "Collectie",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      },
      "settings": [
        {
          "label": {
            "da": "Samling",
            "de": "Kategorie",
            "en": "Collection",
            "es": "Colección",
            "fi": "Kokoelma",
            "fr": "Collection",
            "hi": "कलेक्शन",
            "it": "Collezione",
            "ja": "コレクション",
            "ko": "컬렉션",
            "ms": "Koleksi",
            "nb": "Samling",
            "nl": "Collectie",
            "pt-BR": "Coleção",
            "pt-PT": "Coleção",
            "sv": "Produktserie",
            "th": "คอลเลกชัน",
            "zh-CN": "收藏",
            "zh-TW": "商品系列"
          },
          "id": "collection",
          "type": "collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "da": "Kollektionsliste",
        "de": "Kategorien-Liste",
        "en": "Collection list",
        "es": "Lista de colecciones",
        "fi": "Kokoelmaluettelo",
        "fr": "Liste des collections",
        "hi": "कलेक्शन सूची",
        "it": "Elenco delle collezioni",
        "ja": "コレクションリスト",
        "ko": "컬렉션 목록",
        "ms": "Senarai koleksi",
        "nb": "Samlingsliste",
        "nl": "Collectielijst",
        "pt-BR": "Lista de coleções",
        "pt-PT": "Lista de coleções",
        "sv": "Kollektionslista",
        "th": "รายการคอลเลกชัน",
        "zh-CN": "产品系列列表",
        "zh-TW": "商品系列清單"
      },
      "category": {
        "da": "Samling",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "hi": "कलेक्शन",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "ms": "Koleksi",
        "nb": "Samling",
        "nl": "Collectie",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      },
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}

4. If it works, please give me an approved solution 🙂 

 

Thanks! 

 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well 🙂

View solution in original post

Replies 10 (10)

shayOwensby
Shopify Expert
169 40 94

Hello, 


Yes, this can be done. Currently not at my computer but would be happy to give you simple direction. You will want to go to Online Store > Themes > Actions > Edit Code. From there, you will find your collection-list.liquid file. At the top of the page you will see the grid system that's set. If you can't figure it out from there, let me know and once I get back to my computer, I can provide you with a solution. 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well 🙂
enb300
Tourist
5 0 1

Okay I found exactly what you're talking about but I'm afraid I know so little about coding (aka virtually nothing!) that I would not be able to write it in a way that it would actually work/look good. Do you have something I could copy/paste and replace to get the four collections across? Thank you so much for all your help!

shayOwensby
Shopify Expert
169 40 94

This is an accepted solution.

@enb300

 

Here is what you'll copy into that collection-list.liquid file. 

 

1. Go to Online Store > Themes > Actions > Edit Code. 

2. Find the "Sections" folder and select "collection-list.liquid"

3. Copy and paste the following code: 

{% unless section.settings.title == blank %}
  <h2 class="section-header__title text-center">{{ section.settings.title | escape }}</h2>
{% endunless %}

<div class="grid-uniform text-center collection-grid" data-section-id="{{ section.id }}">
  {% case section.blocks.size %}
    {% when 1 %}
      {% assign featured_collection_width = 'one-whole' %}
      {% assign featured_collection_size = 1000 %}
    {% when 2 %}
      {% assign featured_collection_width = 'small--one-whole medium--one-half large--one-half' %}
      {% assign featured_collection_size = 480 %}
    {% when 3 %}
      {% assign featured_collection_width = 'small--one-whole one-third' %}
      {% assign featured_collection_size = 240 %}
    {% when 4 %}
      {% assign featured_collection_width = 'small--one-whole medium--one-quarter large--one-quarter' %}
      {% assign featured_collection_size = 480 %}
    {% when 5 %}
      {% assign featured_collection_width = 'small--one-whole medium--one-third large--one-third' %}
      {% assign featured_collection_size = 240 %}
    {% when 6 %}
      {% assign featured_collection_width = 'small--one-whole medium--one-third large--one-third' %}
      {% assign featured_collection_size = 240 %}
    {% else %}
      {% assign dividable_by_3 = section.blocks.size | modulo: 3 %}
      {% assign dividable_by_2 = section.blocks.size | modulo: 2 %}
      {% if dividable_by_3 == 0 %}
        {% assign featured_collection_width = 'small--one-whole medium--one-quarter large--one-quarter' %}
        {% assign featured_collection_size = 240 %}
      {% elsif dividable_by_2 == 0 %}
        {% assign featured_collection_width = 'small--one-whole medium--one-half large--one-half' %}
        {% assign featured_collection_size = 480 %}
      {% else %}
        {% assign featured_collection_width = 'small--one-whole medium--one-third large--one-third' %}
        {% assign featured_collection_size = 240 %}
      {% endif %}
  {% endcase %}

  {% for block in section.blocks limit: section.blocks.size %}
    {% assign featured = block.settings.collection %}
    <div class="grid-item {{ featured_collection_width }}" {{ block.shopify_attributes }}>
      {% include 'featured-collection' %}
    </div>
  {% endfor %}
</div>



{% schema %}
{
  "name": {
    "da": "Kollektionsliste",
    "de": "Kategorien-Liste",
    "en": "Collection list",
    "es": "Lista de colecciones",
    "fi": "Kokoelmaluettelo",
    "fr": "Liste des collections",
    "hi": "कलेक्शन सूची",
    "it": "Elenco delle collezioni",
    "ja": "コレクションリスト",
    "ko": "컬렉션 목록",
    "ms": "Senarai koleksi",
    "nb": "Samlingsliste",
    "nl": "Collectielijst",
    "pt-BR": "Lista de coleções",
    "pt-PT": "Lista de coleções",
    "sv": "Kollektionslista",
    "th": "รายการคอลเลกชัน",
    "zh-CN": "产品系列列表",
    "zh-TW": "商品系列清單"
  },
  "class": "index-section",
  "max_blocks": 6,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": {
        "da": "Overskrift",
        "de": "Titel",
        "en": "Heading",
        "es": "Título",
        "fi": "Otsake",
        "fr": "Titre",
        "hi": "शीर्षक",
        "it": "Heading",
        "ja": "見出し",
        "ko": "제목",
        "ms": "Tajuk",
        "nb": "Overskrift",
        "nl": "Kop",
        "pt-BR": "Título",
        "pt-PT": "Título",
        "sv": "Rubrik",
        "th": "ส่วนหัว",
        "zh-CN": "标题",
        "zh-TW": "標題"
      },
      "default": {
        "da": "Kollektionsliste",
        "de": "Kategorien-Liste",
        "en": "Collection list",
        "es": "Lista de colecciones",
        "fi": "Kokoelmaluettelo",
        "fr": "Liste des collections",
        "hi": "कलेक्शन सूची",
        "it": "Elenco delle collezioni",
        "ja": "コレクションリスト",
        "ko": "컬렉션 목록",
        "ms": "Senarai koleksi",
        "nb": "Samlingsliste",
        "nl": "Collectielijst",
        "pt-BR": "Lista de coleções",
        "pt-PT": "Lista de coleções",
        "sv": "Kollektionslista",
        "th": "รายการคอลเลกชัน",
        "zh-CN": "产品系列列表",
        "zh-TW": "商品系列清單"
      }
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": {
        "da": "Samling",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "hi": "कलेक्शन",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "ms": "Koleksi",
        "nb": "Samling",
        "nl": "Collectie",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      },
      "settings": [
        {
          "label": {
            "da": "Samling",
            "de": "Kategorie",
            "en": "Collection",
            "es": "Colección",
            "fi": "Kokoelma",
            "fr": "Collection",
            "hi": "कलेक्शन",
            "it": "Collezione",
            "ja": "コレクション",
            "ko": "컬렉션",
            "ms": "Koleksi",
            "nb": "Samling",
            "nl": "Collectie",
            "pt-BR": "Coleção",
            "pt-PT": "Coleção",
            "sv": "Produktserie",
            "th": "คอลเลกชัน",
            "zh-CN": "收藏",
            "zh-TW": "商品系列"
          },
          "id": "collection",
          "type": "collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "da": "Kollektionsliste",
        "de": "Kategorien-Liste",
        "en": "Collection list",
        "es": "Lista de colecciones",
        "fi": "Kokoelmaluettelo",
        "fr": "Liste des collections",
        "hi": "कलेक्शन सूची",
        "it": "Elenco delle collezioni",
        "ja": "コレクションリスト",
        "ko": "컬렉션 목록",
        "ms": "Senarai koleksi",
        "nb": "Samlingsliste",
        "nl": "Collectielijst",
        "pt-BR": "Lista de coleções",
        "pt-PT": "Lista de coleções",
        "sv": "Kollektionslista",
        "th": "รายการคอลเลกชัน",
        "zh-CN": "产品系列列表",
        "zh-TW": "商品系列清單"
      },
      "category": {
        "da": "Samling",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "hi": "कलेक्शन",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "ms": "Koleksi",
        "nb": "Samling",
        "nl": "Collectie",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      },
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}

4. If it works, please give me an approved solution 🙂 

 

Thanks! 

 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well 🙂
enb300
Tourist
5 0 1

Omg you are amazing! Thank you so much!!Screen Shot 2019-08-28 at 7.06.21 PM.png

tinaswarehouse
Visitor
2 0 0

Hello, The amazing world of developers and designers!

 

I am using Turbo Theme, Please guide me on how to show 5 collections in a single row in the mobile version of the website, currently, it is showing only two collections in a single row. I want to show 5 collections in a single row in only Mobile View. I am showing you an example of what I want to show.   

Please note  this is mobile view not pc view

scrnli_8_10_2021_8-06-42 PM.png

 

enb300
Tourist
5 0 1

Although, is there any way to reduce the text size on the buttons and under the photos so each box looks the same as it did before (just a little smaller obviously!)--Thank you again!

shayOwensby
Shopify Expert
169 40 94

@enb300

 

Go to Online Store > Themes > Actions > Edit Code. Find the Assets folder and go to the timber.scss.liquid file. Scroll to the bottom of the file and paste the following. Please note that you can change the font-size value to whatever you need. 

 

.featured-box__body p.btn--large {
    font-size: 12px;
}
Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well 🙂
KMM316
Visitor
2 0 0

Do you replace the code that is currently in the "collection-list.liquid" section with the code you provided or do you copy and paste it above or below the current code?

 

What if you wanted to add another row of blocks? Currently I have 6 blocks, 3 on top and 3 below. Is it possible to just add another 3 so there is a total of 9 blocks instead of doing 4 across? Also, if someone wanted 2 rows of 4, how would you edit the code to have 2 rows of 4 as it is currently limited to 6 total in pop theme.

Kataa
Visitor
1 0 0

Hi There

 

I tried copying this to my showcase theme - but it´s giving me an Error - is it because I have a different theme?
Thank you!!

jamindavies
Excursionist
27 5 8

Hi Guys

I am using the new Dune template, how do I change the code to allow 6 and 8 in a row please?

Below is the live code from the collection-list.liquid

Thanks in advance

Ben

 

{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

{{ 'component-card.css' | asset_url | stylesheet_tag }}

<div class="collection-list-wrapper page-width{% if section.settings.swipe_on_mobile == true %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %}">
<div class="title-wrapper-with-link{% if section.settings.swipe_on_mobile == true %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %}{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
<h2 class="collection-list-title">{{ section.settings.title | escape }}</h2>

{%- if section.settings.show_view_all and section.settings.swipe_on_mobile -%}
<a href="{{ routes.collections_url }}" class="link underlined-link large-up-hide">{{ 'sections.collection_list.view_all' | t }}</a>
{%- endif -%}
</div>

<slider-component class="slider-mobile-gutter">
<ul class="collection-list grid grid--1-col{% if section.blocks.size < 5 %} grid--{{ section.blocks.size }}-col-tablet{% else %} grid--3-col-tablet{% endif %}{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} negative-margin--small{% endif %}"
id="Slider-{{ section.id }}"
role="list"
>

{%- liquid
assign columns = section.blocks.size
if columns > 3
assign columns = 3
endif
-%}

{%- for block in section.blocks -%}
<li class="collection-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}" {{ block.shopify_attributes }}>
<a{% if block.settings.collection != blank and block.settings.collection.all_products_count > 0 %} href="{{ block.settings.collection.url }}"{% endif %}
class="card animate-arrow link{% if block.settings.collection.featured_image != blank %} card--media{% else %}{% if section.settings.image_ratio != 'adapt' %} card--stretch{% endif %}{% endif %}{% unless section.settings.image_padding %} card--light-border{% endunless %}"
>
<div class="card--stretch card-colored color-{{ section.settings.color_scheme }}">
{%- if block.settings.collection.featured_image != blank -%}
<div{% if section.settings.image_padding %} class="card__media-spacer"{% endif %}>
{% if section.settings.image_padding %}<div class="overlay-card"></div>{% endif %}
<div class="media{% if section.blocks.size > 1 %} media--{{ section.settings.image_ratio }}{% endif %} media--hover-effect overflow-hidden"
{% if section.settings.image_ratio == 'adapt' and section.blocks.size > 1 %}style="padding-bottom: {{ 1 | divided_by: block.settings.collection.featured_image.aspect_ratio | times: 100 }}%;"{% endif %}>

<img
srcset="{%- if block.settings.collection.featured_image.width >= 165 -%}{{ block.settings.collection.featured_image | img_url: '165x' }} 165w,{%- endif -%}
{%- if block.settings.collection.featured_image.width >= 330 -%}{{ block.settings.collection.featured_image | img_url: '330x' }} 330w,{%- endif -%}
{%- if block.settings.collection.featured_image.width >= 535 -%}{{ block.settings.collection.featured_image | img_url: '535x' }} 535w,{%- endif -%}
{%- if block.settings.collection.featured_image.width >= 750 -%}{{ block.settings.collection.featured_image | img_url: '750x' }} 750w,{%- endif -%}
{%- if block.settings.collection.featured_image.width >= 1000 -%}{{ block.settings.collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}
{%- if block.settings.collection.featured_image.width >= 1500 -%}{{ block.settings.collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if block.settings.collection.featured_image.width >= 3000 -%}{{ block.settings.collection.featured_image | img_url: '3000x' }} 3000w,{%- endif -%}
{{ block.settings.collection.featured_image | img_url: 'master' }} {{ block.settings.collection.featured_image.width }}w"
src="{{ block.settings.collection.featured_image | img_url: '1500x' }}"
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
(min-width: 750px) {% if section.blocks.size > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
calc(100vw - 3rem)"
alt="{{ block.settings.collection.title | escape }}"
height="{{ block.settings.collection.featured_image.height }}"
width="{{ block.settings.collection.featured_image.width }}"
loading="lazy"
class="motion-reduce"
>
</div>
</div>

<div class="card__text card__text-spacing card-colored card__text-hover{% if section.settings.image_padding == false %} color-{{ section.settings.color_scheme }}{% endif %}">
{% unless section.settings.image_padding %}<div class="overlay-card"></div>{% endunless %}
<h3>
{%- if block.settings.collection.title != blank -%}
{{- block.settings.collection.title | escape -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
{%- else -%}
{{ 'onboarding.collection_title' | t }}
{%- endif -%}
</h3>
</div>
{%- else -%}
<div class="overlay-card"></div>
<div class="card__text-spacing card__text-hover">
<h3 class="h1">
{%- if block.settings.collection.title != blank -%}
{{- block.settings.collection.title | escape -}}{%- if block.settings.collection.description == blank -%}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>{% endif %}
{%- else -%}
{{ 'onboarding.collection_title' | t }}
{%- endif -%}
</h3>

{%- if block.settings.collection.description != blank -%}
<p class="card__caption">
{{- block.settings.collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
</p>
{%- endif -%}
</div>
{%- endif -%}
</div>
</a>
</li>
{%- endfor -%}
</ul>

{%- if section.settings.swipe_on_mobile -%}
<div class="slider-buttons no-js-hidden{% if section.blocks.size < 5 %} medium-hide{% endif %}{% if section.blocks.size < 2 %} small-hide{% endif %}">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>

{%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
<div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
<a href="{{ routes.collections_url }}" class="button">{{ 'sections.collection_list.view_all' | t }}</a>
</div>
{%- endif -%}
</div>

{% schema %}
{
"name": "t:sections.collection-list.name",
"tag": "section",
"class": "spaced-section collection-list-section",
"max_blocks": 15,
"settings": [
{
"type": "text",
"id": "title",
"default": "Collections",
"label": "t:sections.collection-list.settings.title.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.collection-list.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.collection-list.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.collection-list.settings.image_ratio.options__3.label"
}
],
"default": "square",
"label": "t:sections.collection-list.settings.image_ratio.label",
"info": "t:sections.collection-list.settings.image_ratio.info"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.collection-list.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.collection-list.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.collection-list.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.collection-list.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.collection-list.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.collection-list.settings.color_scheme.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.collection-list.settings.swipe_on_mobile.label"
},
{
"type": "checkbox",
"id": "image_padding",
"default": false,
"label": "t:sections.collection-list.settings.image_padding.label"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": false,
"label": "t:sections.collection-list.settings.show_view_all.label"
}
],
"blocks": [
{
"type": "featured_collection",
"name": "t:sections.collection-list.blocks.featured_collection.name",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
}
]
}
],
"presets": [
{
"name": "t:sections.collection-list.presets.name",
"blocks": [
{
"type": "featured_collection"
},
{
"type": "featured_collection"
},
{
"type": "featured_collection"
}
]
}
]
}
{% endschema %}