How to add images to a quick navigation menu?

Store Design
, ,
1

Hi!

How do i add this quick navigation with images? I managed to set up a quick menu, but I cant figure out this type with images.

Thanks!

Untitled-1.png
Untitled-1.png2507×1697 436 KB

2

Hi @labaisgars
You can try to create a section in theme code and paste this code into


  

    

        {%- for block in section.blocks -%}
          

          {% case block.type %}
            {%- when 'image_list' -%}
              

                

                  {% if block.settings.link != blank %}
                      
                      
                  {% endif %}
                  {%- if block.settings.image != blank -%}
                    {{ block.settings.image | image_url: width: 500 | image_tag:
                      loading: 'lazy',
                      widths: '165, 360, 535'
                    }}
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                

                
                  ### 
                    {% if block.settings.link != blank %}
                      
                        {{ block.settings.heading | escape }}
                      
                    {% else %}
                      {{ block.settings.heading | escape }}
                    {% endif %}
                      
                

              

          {%- endcase -%}
          

        {%- endfor -%}
    

  

{% schema %}
  {
    "name": "Image List",
    "settings": [
      {
        "type": "range",
        "id": "item_desktop",
        "min": 1,
        "max": 8,
        "step": 1,
        "default": 6,
        "label": "Item on desktop"
      }
    ],
    "blocks": [
    {
      "type": "image_list",
      "name": "Image List",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
     
      ]
    }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
3

@labaisgars

oh sorry for that issue can you please share store url

4

https://themes.shopify.com/themes/focal/styles/carbon/preview

It is the default theme preview. i want to recreate it, but I have no idea how. none of the available sections look like that

5

Hi @labaisgars
have you try to add the section with code I have provided above?