How can I add a logo list section to my homepage using Dawn theme?

[KC14]

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!

[SpeedyDev]

@KC14 

try out this code.

<style>
  .logo-bar__item {
    display: inline-block;
    max-width: {{ section.settings.logo_width }};
  }
</style>

<h2>{{ section.settings.title | escape }}</h2>

{%- if section.blocks.size > 0 -%}
  <ul>
    {%- for block in section.blocks -%}
      <li class="logo-bar__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>
{%- 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 %}

[KC14]

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!

[made4Uo · Accepted solution]

Hi @KC14,

You can try the code below.  Create a section in your Dawn theme. For more information, you can check here

Section Code

<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 %}

[KC14]

Hi @made4Uo ,

Thank you, that's a much better looking Logo List!

Appreciate your help 🙂

[Outdoors]

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?

[riyanne]

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? 

https://theecoshift.online/

[stephcross]

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? 

[lauren310]

This worked perfectly but why is mine showing logo and not the actual image? 

[Momokoko]

May I know how to make the section in the middle of the screen?

[valholden02]

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 

[RC94]

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!

[Brad101]

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?