How can I add a logo list block to the Simple theme?

Store Design
1

I wonder to add the logo list to Simple theme, who can help me? Thank you very much.

1 Like
2

@Saya1

  • Create a new file within the sections folder of your theme, and paste the code below into this file. Save file as logo-list.liquid.
  • Navigate to the theme editor and select “Add section”. Within the Image category there will be an option for “Logo list”. A maximum of 10 image blocks with links can be added.
  • Logo image widths can be adjusted from the theme editor. Different width parameters can be assigned to the logo_width settings.

## {{ section.settings.title | escape }}

{%- if section.blocks.size > 0 -%}
  
    {%- for block in section.blocks -%}
      - {%- if block.settings.link != blank -%}
          
          {%- endif -%}

            {%- if block.settings.image != blank -%}
              {{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt }}
            {%- else -%}
              {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}

          {%- if block.settings.link != blank -%}
          
          {%- endif -%}
      
    {%- endfor -%}
  

{%- endif -%}

{% schema %}
{
  "name": "Logo list",
  "class": "index-section",
  "max_blocks": 10,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Logo list"
    },
    {
      "type": "select",
      "id": "logo_width",
      "label": "Logo width",
      "default": "160px",
      "options": [
        {
          "label": "Extra Small",
          "value": "100px"
        },
        {
          "label": "Small",
          "value": "125px"
        },
        {
          "label": "Medium",
          "value": "160px"
        },
        {
          "label": "Large",
          "value": "175px"
        },
        {
          "label": "Extra Large",
          "value": "200px"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "logo_image",
      "name": "Logo",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link",
          "info": "Optional"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Logo list",
      "category": "Image",
      "blocks": [
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        }
      ]
    }
  ]
}
{% endschema %}

Thank you.

3

Thank you for your solution. However these logos are next to each other. I want these logos to be spaced in between, thank you.

Logo List.jpg
Logo List.jpg1589Ă—682 48.7 KB

Saya1_0-1639463570349.png
Saya1_0-1639463570349.png1581Ă—653 52.8 KB

4

@Saya1

It’s need Some Spacing Give collaboration Access i will help you to add the Space by custom Code.
Thank you.

5 

## {{ section.settings.title | escape }}

{%- if section.blocks.size > 0 -%}
  
    {%- for block in section.blocks -%}
      - {%- if block.settings.link != blank -%}
          
          {%- endif -%}

            {%- if block.settings.image != blank -%}
              {{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt }}
            {%- else -%}
              {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}

          {%- if block.settings.link != blank -%}
          
          {%- endif -%}
      
    {%- endfor -%}
  

{%- endif -%}

{% schema %}
{
  "name": "Logo list",
  "class": "index-section",
  "max_blocks": 10,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Logo list"
    },
    {
      "type": "select",
      "id": "logo_width",
      "label": "Logo width",
      "default": "160px",
      "options": [
        {
          "label": "Extra Small",
          "value": "100px"
        },
        {
          "label": "Small",
          "value": "125px"
        },
        {
          "label": "Medium",
          "value": "160px"
        },
        {
          "label": "Large",
          "value": "175px"
        },
        {
          "label": "Extra Large",
          "value": "200px"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "logo_image",
      "name": "Logo",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link",
          "info": "Optional"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Logo list",
      "category": "Image",
      "blocks": [
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        }
      ]
    }
  ]
}
{% endschema %}

Add this code in place of older code.