How can I display a logo and store name together in the Dawn theme?

[Rokel]

Hi!

Within the Dawn theme, I would like to display a small logo AND the store name together: 

 - exactly as the store name appears now when no logo is added

 - but with a small logo displayed to the left of the store name

 - to appear the same as the shopify logo above but I would like my store name to be text based not part of the image

I've tried some of the solutions I found on the internet and I tried adjusting the if/then clause in header.liquid but I can't get the css right - it blows out the logo and either drops the store name under the logo or overwrites the logo.

Thanks in advance for your help! ; )

Rob.

[LitExtension · Accepted solution]

Hi @Rokel,

Go to sections > header.liquid file, find 'header__heading-logo' and change code here:

beforeafter

Code:

<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset"
           style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  "
           >
          {%- assign image_size = section.settings.logo_width | append: 'x' -%}
          <img srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
               src="{{ section.settings.logo | img_url: image_size }}"
               loading="lazy"
               class="header__heading-logo"
               width="{{ section.settings.logo.width }}"
               height="{{ section.settings.logo.height }}"
               alt="{{ section.settings.logo.alt | default: shop.name | escape }}"
               style="
                      width: 30%;
                      margin-right: 5px;
                      "
               >
          <span class="h2">{{ shop.name }}</span>
        </a>

Then you just need to upload logo in Customize, it will show both logo and store name

[Rokel]

Thank you so much! Really appreciate your time.

I added an if clause around the image and adjusted the spacing and it's perfect.

[SwellNutrition]

Hello, I would like to do this as well but can't find the matching section to replace in my dawn theme. Around what line of code is this?