Hello everyone,
I would like to add a Logo List Section on my Homepage. If someone can help me code the section, it would be appreciated 
I am using Dawn Theme by the way.
Thank you!
1 Like
try out this code.
## {{ 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 %}
Hey @SpeedyDev ,
Thank you for replying, it added the Logo List!
But as you can see in the screenshot, the logos appear really big and close to each other on the leftside. Any idea how to fix that?
Thank you!
Hi @KC14 ,
You can try the code below. Create a section in your Dawn theme. For more information, you can check here
Section Code
## {{ section.settings.title | escape }}
{%- 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 -%}
{% 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 %}
3 Likes
1 Like
I’m using a different Theme (Ride) and this code worked for me. But, I need a different background color. Is there a way to add a selector for “Color Scheme” so that I can choose the same as other sections?
Love this! Set it to appear 8 logo in one section. All looks good in desktop but the mobile view can be improved.
Can you help me out?
Hi @made4Uo
This is great and it did the trick for me. Just wondering how I would go about adding the background colour option to this new section?
This worked perfectly but why is mine showing logo and not the actual image?
Hey mate
Ive added this however the logo list of off centre (to the right) on mobile view. Is there an easy fix to that?
2 Likes
This code worked great for me!
Is there an extra line of code that will help it scroll right on mobile?
My site (with code already in use on homepage): https://valholden.myshopify.com/
Example logo list I’d like to emulate (at bottom of site): thistlefarms.org
Is there a way to make the logo list Centered as well? I only have one that I would like in the center, but it is showing on the left. Help would be appreciated!