Have more than 3 in a row on the collections sections of the store - Dune Theme

Store Design
1

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 }}

{{ section.settings.title | escape }}

{%- 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 -%}

  • 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 %}" >
    {%- if block.settings.collection.featured_image != blank -%} {% if section.settings.image_padding %}
    {% endif %}
    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”

    {% unless section.settings.image_padding %}
    {% endunless %}

    {%- if block.settings.collection.title != blank -%} {{- block.settings.collection.title | escape -}} {% render 'icon-arrow' %} {%- else -%} {{ 'onboarding.collection_title' | t }} {%- endif -%}

    {%- else -%}

    {%- if block.settings.collection.title != blank -%} {{- block.settings.collection.title | escape -}}{%- if block.settings.collection.description == blank -%} {% render 'icon-arrow' %}{% endif %} {%- else -%} {{ 'onboarding.collection_title' | t }} {%- endif -%}

    {%- if block.settings.collection.description != blank -%}

    {{- block.settings.collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}

    {%- endif -%}
    {%- endif -%}
{%- endfor -%}

{%- if section.settings.swipe_on_mobile -%}

{% render 'icon-caret' %}
1 / {{ 'accessibility.of' | t }} {{ section.blocks.size }}
{% render 'icon-caret' %}
{%- endif -%}

{%- if section.settings.show_view_all and section.blocks.size < collections.size -%}

{{ 'sections.collection_list.view_all' | t }}
{%- 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 %}

2 Likes
2

@jamindavies

sorry for any issue can you please share store url

3
Show More

Here you go: https://yorkshire-apples.myshopify.com

4

hi @jamindavies
Your site is password protected. Please share password.

5

Thanks in advance!

PWD: enawpo

6

You just need to add this code at the bottom of theme->edit code-> asset-> base.css.

/*To show 6 items per row*/
@media only screen and (min-width: 1023px) {

.collection-list.grid--3-col-tablet .grid__item {
	max-width: 16.55% !important;
}
.card__text.card__text-spacing.card-colored.card__text-hover {
	min-height: 87px;
}
}
7

Thank you that sorted it!

8

Hi

I need now it to work as mentioned here: https://community.shopify.com/c/shopify-design/display-6-or-8-thumbs/td-p/1402167

Thanks

Ben