Solved

Dawn theme: Display logo AND store name

Rokel
Tourist
10 0 5

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.

Accepted Solution (1)

LitExtension
Shopify Partner
4860 1001 1135

This is an accepted solution.

Hi @Rokel,

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

beforebeforeafterafter

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 3 (3)

LitExtension
Shopify Partner
4860 1001 1135

This is an accepted solution.

Hi @Rokel,

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

beforebeforeafterafter

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Rokel
Tourist
10 0 5

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
Tourist
9 0 7

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?