Resizing the collection tiles in my collection list layout

Store Design
1

Hello everyone,

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

sukalde_0-1661780446440.png

I tried to create a new section using list-collections-template from my theme´s section code, but its not showing up as a new section in my customization options

This is my section code:

{%- liquid
  assign per_row = section.settings.grid
  assign paginate_by = per_row | times: 7

  case section.settings.grid
    when '1'
      assign grid_item_width = ''
    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'
  endcase
-%}

{%- paginate collections by paginate_by -%}

  {%- render 'breadcrumbs' -%}

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

  
    {%- if section.settings.display_type == 'all' -%}
      {%- liquid
        case section.settings.sort
          when 'products_high' or 'products_low'
            assign collections = collections | sort: 'all_products_count'
          when 'date' or 'date_reversed'
            assign collections = collections | sort: 'published_at'
        endcase
      -%}
      {%- if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' -%}
        {%- for collection in collections -%}
          {%- render 'collection-grid-item', collection: collection, grid_item_width: grid_item_width -%}
        {%- endfor -%}
      {%- else -%}
        {%- for collection in collections reversed -%}
          {%- render 'collection-grid-item', collection: collection, grid_item_width: grid_item_width -%}
        {%- endfor -%}
      {%- endif -%}
    {%- else -%}
      {%- for block in section.blocks -%}
        {%- assign collection = collections[block.settings.collection] -%}
        {%- render 'collection-grid-item', collection: collection, grid_item_width: grid_item_width, block: block -%}
      {%- endfor -%}
    {%- endif -%}
  

  {%- if paginate.pages > 1 and section.settings.display_type == 'all' -%}
    {%- render 'pagination', paginate: paginate -%}
  {%- endif -%}

{%- endpaginate -%}

{% schema %}
{
  "name": "t:sections.list-collections-template.name",
  "settings": [
    {
      "type": "checkbox",
      "id": "title_enable",
      "label": "t:sections.list-collections-template.settings.title_enable.label",
      "default": true
    },
    {
      "type": "paragraph",
      "content": "t:sections.list-collections-template.settings.content"
    },
    {
      "type": "radio",
      "id": "display_type",
      "label": "t:sections.list-collections-template.settings.display_type.label",
      "default": "all",
      "options": [
        {
          "value": "all",
          "label": "t:sections.list-collections-template.settings.display_type.options.all.label"
        },
        {
          "value": "selected",
          "label": "t:sections.list-collections-template.settings.display_type.options.selected.label"
        }
      ]
    },
    {
      "type": "select",
      "id": "sort",
      "label": "t:sections.list-collections-template.settings.sort.label",
      "info": "t:sections.list-collections-template.settings.sort.info",
      "default": "alphabetical",
      "options": [
        {
          "value": "products_high",
          "label": "t:sections.list-collections-template.settings.sort.options.products_high.label"
        },
        {
          "value": "products_low",
          "label": "t:sections.list-collections-template.settings.sort.options.products_low.label"
        },
        {
          "value": "alphabetical",
          "label": "t:sections.list-collections-template.settings.sort.options.alphabetical.label"
        },
        {
          "value": "alphabetical_reversed",
          "label": "t:sections.list-collections-template.settings.sort.options.alphabetical_reversed.label"
        },
        {
          "value": "date",
          "label": "t:sections.list-collections-template.settings.sort.options.date.label"
        },
        {
          "value": "date_reversed",
          "label": "t:sections.list-collections-template.settings.sort.options.date_reversed.label"
        }
      ]
    },
    {
      "type": "select",
      "id": "grid",
      "label": "t:sections.list-collections-template.settings.grid.label",
      "default": "4",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "t:sections.list-collections-template.blocks.collection.name",
      "settings": [
        {
          "label": "t:sections.list-collections-template.blocks.collection.settings.collection.label",
          "id": "collection",
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}

I would like to know how can I create a new section showing up to 11 colors like below, can the swipe button be possible?

sukalde_1-1661780645832.png
sukalde_1-1661780645832.png1322×277 146 KB

Any help will be really appreciated,

2

Turns out i was copying the wrong section code, thats why it wasnt showing up during customization

heres the correct code for the newest section color collection

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