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.
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.
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!
@enb300 ,
Here is what you’ll copy into that collection-list.liquid file.
Go to Online Store > Themes > Actions > Edit Code.
Find the “Sections” folder and select “collection-list.liquid”
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 %}
Thanks!
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!
@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;
}
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.
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
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 }}
{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{%- if section.settings.show_view_all and section.settings.swipe_on_mobile -%}
{{ ‘sections.collection_list.view_all’ | t }}
{%- endif -%}
{%- liquid
assign columns = section.blocks.size
if columns > 3
assign columns = 3
endif
-%}
{%- for block in section.blocks -%}
<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”
{%- if block.settings.collection.description != blank -%}
{{- block.settings.collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}
{%- endif -%}{%- if section.settings.swipe_on_mobile -%}
{%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
{%- endif -%}{% 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 %}
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!!
It is still showing 2 products on top of 2 products and I am trying for it to show all 4 in a row. I am using the Dawn template. If I cut and past code at the end of the existing code I get an error. If I replace the existing code nothing it still only shows 2 porducts on top of 2 products.
