How do I get the logo bar (logo list) to automatically resize my logos?

Store Design
1

I added my logos and thought they would automatically resize when I changed the option from Large to Small for example.

I’m using Dawn theme. I’m working on an unpublished website (the current website is live and this one will go live once it’s ready, so I can’t make this own available for inspection)

The code for the logo list is:


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

It ends up looking crowded like this:

image.png
image.png992×406 110 KB

2

Hi @akimhc ,

Please change code:


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

Hope it helps!

3

@LitCommerce It’s spaced out, but the logo size itself doesn’t change (e.g. when I select Small vs Large). Is there any way to do this?

Thanks so much!!

4

Hi @akimhc ,

Please send your site and if your site is password protected, please send me the password. I will check it.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

5

Unfortunately the theme is unpublished (a different theme is currently live, so I cannot publish this one until it is ready).

6

Hi @akimhc ,

If it’s not published, just send me the preview link, I will check it for you

7

@LitCommerce Oh I see!

https://www.handscraft.com/?_ab=0&_fd=0&_sc=1

Thank you again

8

Hi @akimhc ,

Sorry, this link is not correct, you need to share the link like the following instructions: https://www.howcommerce.com/shopify-preview-link/

I will check it for you.

9

https://7wb59c12fly6xzlf-24641049.shopifypreview.com

thanks for your patience @LitCommerce

10

Hi @akimhc ,

Please change code:


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

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

11

Thank you!!

12

Thanks @LitCommerce and @akimhc

It looks great but is there any way to implement a scrolling or swiping left/right mechanism? It gets pretty packed on mobile and desktop devices with a few more logos.