How To Make Logo Bar In Dawn Theme Homepage Centered?

Clement_Jaw · March 1, 2022, 8:23am

How To Make Logo Bar In Dawn Theme Homepage Centered? I have enclosed the screenshot for advice. This is the code I create in Section liquid.

.logo-bar-section { max-width: {{ section.settings.logo_width }}; display: inline-block; margin: 0 27.5px 35px; text-align: center; }

{% if section.blocks.size > 0 %}

{% if block.settings.link != blank %} {% endif %} {% if block.settings.image != blank %} {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }} {% else %} {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %} {% if block.settings.link != blank %} {% endif %}

{% 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": "150px", "options": [ { "label": "Extra Small", "value": "100px" }, { "label": "Small", "value": "125px" }, { "label": "Medium", "value": "150px" }, { "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 %}

Sajeel · March 1, 2022, 8:28am

Please share your store link

Zworthkey · March 1, 2022, 8:29am


## {{ 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: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
  {% 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": "150px",
"options": [
{
"label": "Extra Small",
"value": "100px"
},
{
"label": "Small",
"value": "125px"
},
{
"label": "Medium",
"value": "150px"
},
{
"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 %}

@Clement_Jaw
Try out this code

Clement_Jaw · March 1, 2022, 9:00am

Many thanks for your advice, I have created a section using the code that you show me, the logo list now is centered but the logo is not displayed horizontal, it display vertical, wonder can make it horizontal? Enclosed is the screenshot for your review.

Is the Logo List title able to be centralized also?

Best regards,

Clement

Clement_Jaw · March 1, 2022, 9:03am

My store link www.dtimeless.com

Password: 1111

Sajeel · March 1, 2022, 9:09am

you placed the tag at wrong place each li is having 100% width now. remove the center tag so i will try to make it center and horizontal.

Sajeel · March 1, 2022, 9:15am

add this code in base.css file let me know if this didn’t worked

#shopify-section-template–15450297073914__1646124811c3e3670d ul{

justify-content: center !important;display: flex important;}

Zworthkey · March 1, 2022, 9:22am


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

{% javascript %}
{% endjavascript %}

try this code i have customized it.

Clement_Jaw · March 1, 2022, 9:24am

Hi Sajeel,
Can advise where to remove the center tag? This is the logo list liquid I place in the section.

.logo-bar-section { max-width: {{ section.settings.logo_width }}; display: inline-block; margin: 0 27.5px 35px; text-align: center; }

{% if section.blocks.size > 0 %}

{% if block.settings.link != blank %} {% endif %} {% if block.settings.image != blank %} {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }} {% else %} {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %} {% if block.settings.link != blank %} {% endif %}

{% 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": "150px", "options": [ { "label": "Extra Small", "value": "100px" }, { "label": "Small", "value": "125px" }, { "label": "Medium", "value": "150px" }, { "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 %}

Clement_Jaw · March 1, 2022, 9:36am

Thanks for your customization. Now the logo list is displayed horizontal but still not in the centered position. Same as the Title " Logo List" is also not in the center. Able to customize again for me to try again?

Zworthkey · March 1, 2022, 9:39am


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

{% javascript %}
{% endjavascript %}

Try this code,
finally it will work.

Clement_Jaw · March 1, 2022, 9:49am

Oh.. it works, really great! Can also help me to centralize the title " Logo List"? Currently, it is located on the extreme left side.

Really thanks for your professional advice and help. Really awesome!

Zworthkey · March 1, 2022, 9:51am

## {{ section.settings.title | escape }}

@Clement_Jaw
use like this code or replace the line number 13. to this code.

Zworthkey · March 1, 2022, 9:52am

@Clement_Jaw
i hope it will work.

Zworthkey · March 1, 2022, 10:03am

h2 {
    text-align: center !important;
}

Add this code.

Sajeel · March 1, 2022, 10:22am

@Clement_Jaw

Add this code in tag or in base.css

#shopify-section-template--15450297073914__16461269619232b8c8 h2{text-align: center;}

mark my solution as accepted if it works for you thanks

Clement_Jaw · March 1, 2022, 1:09pm

Many thanks for your help, really appreciate it! It work!

Zworthkey · March 1, 2022, 1:15pm

@Clement_Jaw
if helpful like our Solution.

Sajeel · March 2, 2022, 4:09am

@Clement_Jaw feel free to ask more questions

Logius · March 31, 2022, 7:10pm

Hello, @Zworthkey I am using the Dawn Theme and overall, I like how your method works to create a logo list section. However, these logos are not center-aligned as you can see in the screenshot. It is more apparent, especially on the mobile screen. Please see the screenshots attached.

Logo List Mobile

Logo List Desktop

Topic		Replies	Views
How to make Logo Bar in Dawn theme homepage centered? Store Design	2	0	March 1, 2022
Centre Logo List on Dawn Theme Store Design design , customizations	7	3	August 8, 2024
How can I add a logo list section to my homepage using Dawn theme? Store Design	12	32	August 6, 2024
How to create an auto-resizing logo bar for Dawn theme? Store Design	2	0	July 11, 2022
logo list on Dawn theme Store Design customizations , css , shopify-themes , html	3	36	August 7, 2024

How To Make Logo Bar In Dawn Theme Homepage Centered?

{{ section.settings.title | escape }}

{{ section.settings.title | escape }}

Related topics