Compatibility: All Shopify themes
Add a logo-list that suit your needs.
1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Section folder, add a new section. Name it whatever you want
3. Paste the code below.
| <div class="logoList--container page-width" style="padding-top: {{ section.settings.padding_top | append: "px" }}; padding-bottom: {{ section.settings.padding_bottom | append: "px" }}"> <h2 class="h1">{{ section.settings.title | escape }}</h2> <ul> {%- for block in section.blocks -%} <li class="logoList--item" {{ block.shopify_attributes }}> {%- if block.settings.link != blank -%} <a href="{{ block.settings.link }}"> {%- 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 -%} </a> {%- endif -%} </li> {%- endfor -%} </ul> </div> <style> .logoList--container { padding-top: 20px; padding-bottom: 20px; margin: auto; } .logoList--container ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; justify-content: center; } .logoList--item{ display: inline-block; max-width: {{ section.settings.logo_width }}; } .logoList--item img{ width: 100%; } </style> {% schema %} { "name": "Logo list", "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": "50px" }, { "label": "Small", "value": "100px" }, { "label": "Medium", "value": "160px" }, { "label": "Large", "value": "200px" }, { "label": "Extra Large", "value": "400px" } ] }, { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 2, "default": 20, "label": "Padding top" }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 2, "default": 20, "label": "Padding bottom" } ], "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 %} |
4. Go to Customize theme or theme editor, add a section Logo list.
That is it (",)