Logo List for Shopify 2.0 Themes

See Other Products

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 (",)

 

Copied!
Back to blog

Leave a comment