Increase featured collection from 5-6 - Dawn/Refresh

Store Design
, , ,
1

Anyone know how I can increase the featured collection to be 6 in a row for computers? And so it will be two rows for mobile by 3 per line there? Working in Refresh theme and want this for my start page

2

Hello there

To increase the number of featured collections displayed per row on desktop and mobile you’ll need to make changes to the theme’s code

In the left-hand navigation, click on “Sections” and then select "index.liquid

Look for the following code block:

This code block is used to determine the number of collections to display per row based on the value set in the theme editor. Currently, the theme is set to display up to 4 collections per row on desktop.

  1. To increase the number of collections displayed per row, you can add a new case statement for ‘6’, like this:
{% case section.settings.collections_per_row %}
{% when '6' %}
  {%- assign grid_item_width = 'medium--one-sixth large--one-sixth' -%}
{% when '4' %}
  {%- assign grid_item_width = 'medium--one-half large--one-quarter' -%}
{% when '3' %}
  {%- assign grid_item_width = 'medium--one-third large--one-quarter' -%}
{% else %}
  {%- assign grid_item_width = 'medium--one-half large--one-quarter' -%}
{% endcase %}

This new case statement will set the grid item width to ‘medium–one-sixth’ and ‘large–one-sixth’ for 6 collections per row on desktop.

  1. To adjust the number of collections displayed per row on mobile, you can add a new case statement like this:
{% case section.settings.collections_per_row %}
{% when '6' %}
  {%- assign grid_item_width = 'medium--one-half large--one-sixth' -%}
{% when '4' %}
  {%- assign grid_item_width = 'medium--one-half large--one-quarter' -%}
{% when '3' %}
  {%- assign grid_item_width = 'medium--one-third large--one-quarter' -%}
{% else %}
  {%- assign grid_item_width = 'medium--one-half large--one-quarter' -%}
{% endcase %}

hope this helps!

3

Hello @Kingstone

You can try following this way:

  1. Go to Online Store → Theme → Edit code. https://prnt.sc/GXrfrkb50e-e

  2. Open your ‘featured-collection.liquid’ in the Sections folder. https://prnt.sc/-JbhA28GJS2Z

  3. Find / “id”: “columns_desktop”, / set 6 for “max”:

GemPages_0-1677381332606.png
GemPages_0-1677381332606.png1527×908 39.3 KB

  1. Find / “id”: “columns_mobile”, / add:
,
 {
    "value": "3",
    "label": "3 columns"
 }

in here:

GemPages_1-1677381618448.png
GemPages_1-1677381618448.png1351×886 35.9 KB

  1. Open your base.css in the Assets folder. Paste the below code at the end of the file.
@media screen and (max-width: 749px){
.collection .grid--3-col-tablet-down .grid__item {
  width: calc(33.33333% - var(--grid-mobile-horizontal-spacing));
  max-width: calc(33.33333% - var(--grid-mobile-horizontal-spacing) /2);
}
}

GemPages_4-1677382660191.png
GemPages_4-1677382660191.png1380×910 50.6 KB

Result: https://prnt.sc/T_QZRR3fS9Ri + https://prnt.sc/lhy3eGMjPIZA

Best regards,
GemPages Support Team

4

Hey! Do not have any index.liquid only a index.json. Cant find that code anywhere, you know if it is called diffrent on Refresh?

5

Thanks for reply! @GemPages & @EcomGraduates

I wrote wrong but it almost work, i meant for “collection list”, how do i change this code so it will display correct, now it shows 4 on first line and 2 on second for mobile

@media screen and (max-width: 749px){
.collection .grid--3-col-tablet-down .grid__item {
  width: calc(33.33333% - var(--grid-mobile-horizontal-spacing));
  max-width: calc(33.33333% - var(--grid-mobile-horizontal-spacing) /2);
}
}
6

Hi @Kingstone

Can you give me your page URL (with pass if your store password is enabled), so I can check it?

This code still results in 3 products per line on mobile in my theme. https://prnt.sc/rQZI5NTcZS2_

Kind & Best regards,
GemPages Support Team