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

Solved
Highlighted
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!!!

0 Likes
Highlighted
Shopify Expert
166 40 70

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 :)
1 Like
Highlighted
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!

0 Likes
Highlighted

Success.

Shopify Expert
166 40 70

@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 :)
1 Like
Highlighted
Tourist
5 0 1

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

1 Like
Highlighted
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!

0 Likes
Highlighted
Shopify Expert
166 40 70

@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 :)
0 Likes
New Member
1 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.

0 Likes