Help needed please to increase number of colums on Collections List segment in Dawn theme

Store Design
1

Hi there, currently my Collections List segment in Dawn (collections-list.liquid) has a max number of rows on desktop of 5. I’d like help please to increase this to 10, with the associated boxes reducing in size accordingly (I want 10 small collection buttons running across the screen in my store).

I’d also like please to remove the label from the collections in the code, so that only the collection image is displayed?

Thanks so much for your help. Here is the existing code:

{{ ‘section-collection-list.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}

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

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- liquid
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}

{%- unless section.settings.title == blank -%}

{{ section.settings.title | escape }}

{%- if section.settings.show_view_all and show_mobile_slider -%}
{{ ‘sections.collection_list.view_all’ | t }}
{%- endif -%}

{%- endunless -%}
    {%- liquid assign columns = section.blocks.size if columns > 3 assign columns = 3 endif -%} {%- for block in section.blocks -%}
  • {% render 'card-collection', card_collection: block.settings.collection , media_aspect_ratio: section.settings.image_ratio, columns: columns %}
    • {%- endfor -%}
{%- if show_mobile_slider -%}
{% render 'icon-caret' %}
1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }}
{% render 'icon-caret' %}
{%- endif -%}

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

{%- endif -%}

{% schema %}
{
“name”: “t:sections.collection-list.name”,
“tag”: “section”,
“class”: “section section-collection-list”,
“max_blocks”: 15,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“default”: “Collections”,
“label”: “t:sections.collection-list.settings.title.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.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”: “range”,
“id”: “columns_desktop”,
“min”: 1,
“max”: 5,
“step”: 1,
“default”: 3,
“label”: “t:sections.collection-list.settings.columns_desktop.label”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”,
“info”: “t:sections.all.colors.has_cards_info”
},
{
“type”: “checkbox”,
“id”: “show_view_all”,
“default”: false,
“label”: “t:sections.collection-list.settings.show_view_all.label”
},
{
“type”: “header”,
“content”: “t:sections.collection-list.settings.header_mobile.content”
},
{
“type”: “select”,
“id”: “columns_mobile”,
“options”: [
{
“value”: “1”,
“label”: “t:sections.collection-list.settings.columns_mobile.options__1.label”
},
{
“value”: “2”,
“label”: “t:sections.collection-list.settings.columns_mobile.options__2.label”
}
],
“default”: “1”,
“label”: “t:sections.collection-list.settings.columns_mobile.label”
},
{
“type”: “checkbox”,
“id”: “swipe_on_mobile”,
“default”: false,
“label”: “t:sections.collection-list.settings.swipe_on_mobile.label”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“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

In your featured-collections section in your customizer, do this and it’ll show 10.

Screenshot 2022-08-30 153655.png
Screenshot 2022-08-30 153655.png287×154 3.21 KB

Also when you click on featured-collections you’ll see there’s a heading, clear that and you should be good to go.

3

Thanks Lunaworks.

I am though trying to show different collections, not products, so the Featured Collection section wont work. I also want to sho up to 10 blocks in a line across the screen - currently it has a max of 5 columns, i need to increase this to 10 and have the collection blocks scale down in size accordingly to fit all 10 in a row.

thanks!

4

Pardon me, I misread your post earlier. This is how to fix it.

The changes will be made in component-slider.css

On line 82,
change max-width in media screen and (max-width:989px) to max-width:2560px

On line 314

.slider:not(.slider--everywhere):not(.slider--desktop)+.slider-buttons {
display: flex;
}

change display: none to display: flex

that should solve it.

And to increase the number of collections. In the collection-list.liquid file, scroll down to the schema and then change this part.

{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5, // change 5 to 10.
"step": 1,
"default": 3,
"label": "t:sections.collection-list.settings.columns_desktop.label"
}

To hide the collection title. Go to card-collection.liquid and add the comment tag as shown below in the screenshots.

Screenshot 2022-08-31 140211.png
Screenshot 2022-08-31 140211.png1022×238 14.4 KB

Screenshot 2022-08-31 140236.png
Screenshot 2022-08-31 140236.png1044×223 14.6 KB

5

Thanks Lunaworks, that created a slider, which is cool and I will definitely use! :slightly_smiling_face: Though it has a slider button, is there a way to make it an auto slider on desktop that scrolls with mouse over on the right hand side?

And re my original ask, I want please to compress all 10 blocks into a single desktop screen - so scale the blocks down to really small, rather than having them as a slider. Is that possible also?

Thanks so much once again for your help, you rock!

6

There’s no way to make it an auto slider by default. You’ll need custom coding for that, possibly creating a custom collection slider and then implement that.

To get all the 10 blocks in a view, go to component-slider.css line 172 and you should see the code below.

@media screen and (min-width: 990px){
.slider--desktop.grid--4-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-desktop-horizontal-spacing) * 3);
}
}

You can change the 100% to say 55% and see if that works for you, or better still adjust till it works the way you want.

Also you can change / 4 to / 10, I believe either should work.

7

Thanks so much for your ongoing help! That didnt seem to work though, the block width was unchanged. Is there a way we can do it without it being a component slider? Can we edit it in the default Collection-list? As the goal is to have the grid static on the page, rather than a slider ideally.

8

Can you post your store url here and the section where the collection is so I inspect directly.
And the widths is a css issue I believe, I checked on my dawn theme and the widths reduced as expected so not sure why yours didnt.

Also you can revert the changes you made earlier back to default if the goal isnt for it to be a slider.

9

Thanks @lunaworks I appreciate your help.

Site is p1simgear.com.au

pw is P1test%

You can see the issue on the Collections Page, the top Collection Segment is far too big.

I need please to increase the number of columns in the Collection List from 5 to 10, and have them all scale down in size accordingly so they all fit on one row. I’d like the mobile version to increase from 2 columns to 4 also please.

Thanks!

10

In base.css line 1094 you’ll see this,

grid--5-col-desktop .grid__item{
width:calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5)
}

Below it add this

.collection-list.grid--5-col-desktop .grid__item{
width:calc(10% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
max-width: calc(10% - var(--grid-desktop-horizontal-spacing) * 4 / 5)
}

I believe you should have been able to change the limit of collections to 10 as I posted the code for that in my earlier messages.

Also if you this doesnt work, can you add all the collections you’d like to show so I see the exact issue and make changes to it.

11

Thanks @lunaworks that’s great - i can adjust that code to get the right sizes. One thing though, it lines the collection boxes up to the left once it makes them smaller, how can I have it so the collection is centered on the page please?

Also is there a way to remove the name tags for the collection, but just on some of the segments not all? ie I want to remove the names on one of the collection-lists on the page, but not on the one lower down.

thanks!

12

In base.css line 999 you’ll see

@media screen and (min-width: 750px){
.grid {
column-gap: var(--grid-desktop-horizontal-spacing);
row-gap: var(--grid-desktop-vertical-spacing);
}

below it add this

@media screen and (min-width: 1024px){
.collection-list.grid {
justify-content: center
}

And to remove the name tags, I’m not too sure about that.

13

Thanks @lunaworks , that worked! I really appreciate all your help.

14

Hi there

how to do the above same thing for mobile, i want 5 columns on mobile