How to increase the Collection Tiles per Row (Impulse Theme)

Technical Q&A
1

Hello everyone,

I am trying to achieve the following layout on my website using Impulse theme

sukalde_0-1661982996799.png

Here is my code

{%- if section.settings.divider -%}{%- endif -%}

  {%- if section.settings.title != blank -%}
    

      ## {{ section.settings.title }}
    

  {%- endif -%}

  
    {%- liquid
      assign isEmpty = true
      if section.blocks.size > 0
        assign isEmpty = false
      endif
    -%}

    {%- for block in section.blocks -%}
      {%- liquid
        assign collection = collections[block.settings.collection]
        assign background_position = block.settings.focal_point

        case section.settings.per_row
          when 2
            assign grid_item_width = 'medium-up--one-half'
          when 3
            assign grid_item_width = 'small--one-half medium-up--one-third'
          when 4
            assign grid_item_width = 'small--one-half medium-up--one-quarter'
          when 5
            assign grid_item_width = 'small--one-half medium-up--one-fifth'
         when 6
            assign grid_item_width = 'small--one-half medium-up--one-sixth'
        endcase
      -%}

      {%- render 'collection-grid-item',
        collection: collection,
        block: block,
        grid_item_width: grid_item_width,
        background_position: background_position,
        per_row: section.settings.per_row
      -%}
    {%- endfor -%}

    {%- if isEmpty -%}
      

        

          

            

              {{ 'home_page.onboarding.no_content' | t }}
            

          

        

      

    {%- endif -%}

  

{%- if section.settings.divider -%}
{%- endif -%}

{% schema %}
{
  "name": "color.name",
  "class": "index-section",
  "max_blocks": 15,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.featured-collections.settings.title.label",
      "default": "Collection list"
    },
    {
      "type": "checkbox",
      "id": "divider",
      "label": "t:sections.featured-collections.settings.divider.label",
      "default": false
    },
    {
      "type": "range",
      "id": "per_row",
      "label": "t:sections.featured-collections.settings.per_row.label",
      "default": 4,
      "min": 2,
      "max": 10,
      "step": 1
    },
    {
      "type": "checkbox",
      "id": "enable_gutter",
      "label": "t:sections.featured-collections.settings.enable_gutter.label",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-collections.presets.collection_list.name",
      "blocks": [
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "t:sections.featured-collections.blocks.collection.name",
      "settings": [
        {
          "id": "collection",
          "type": "collection",
          "label": "t:sections.featured-collections.blocks.collection.settings.collection.label"
        },
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.featured-collections.blocks.collection.settings.title.label"
        },
        {
          "type": "select",
          "id": "focal_point",
          "label": "t:sections.featured-collections.blocks.collection.settings.focal_point.label",
          "info": "t:sections.featured-collections.blocks.collection.settings.focal_point.info",
          "default": "center center",
          "options": [
            {
              "value": "20% 0",
              "label": "t:sections.featured-collections.blocks.collection.settings.focal_point.options.20_0.label"
            },
            {
              "value": "top center",
              "label": "t:sections.featured-collections.blocks.collection.settings.focal_point.options.top_center.label"
            },
            {
              "value": "80% 0",
              "label": "t:sections.featured-collections.blocks.collection.settings.focal_point.options.80_0.label"
            },
            {
              "value": "20% 50%",
              "label": "t:sections.featured-collections.blocks.collection.settings.focal_point.options.20_50.label"
            },
            {
              "value": "center center",
              "label": "t:sections.featured-collections.blocks.collection.settings.focal_point.options.center_center.label"
            },
            {
              "value": "80% 50%",
              "label": "t:sections.featured-collections.blocks.collection.settings.focal_point.options.80_50.label"
            },
            {
              "value": "20% 100%",
              "label": "t:sections.featured-collections.blocks.collection.settings.focal_point.options.20_100.label"
            },
            {
              "value": "bottom center",
              "label": "t:sections.featured-collections.blocks.collection.settings.focal_point.options.bottom_center.label"
            },
            {
              "value": "80% 100%",
              "label": "t:sections.featured-collections.blocks.collection.settings.focal_point.options.80_100.label"
            }
          ]
        }
      ]
    }
  ]
}
{% endschema %}

I was able to add a new row, total of 6, by editing case section

case section.settings.per_row
          when 2
            assign grid_item_width = 'medium-up--one-half'
          when 3
            assign grid_item_width = 'small--one-half medium-up--one-third'
          when 4
            assign grid_item_width = 'small--one-half medium-up--one-quarter'
          when 5
            assign grid_item_width = 'small--one-half medium-up--one-fifth'
         when 6
            assign grid_item_width = 'small--one-half medium-up--one-sixth'
        endcase

But i dont know the correct code for the next rows, any help will be appreciated