How to add logo and store name in the header

[D-Hageman]

Hi community,

I have a problem in the venture theme. I have recently added a logo but after saving it, the store name disappears. I would like the logo on the left of the header. Next to it on the right I still want my store name as before. I can't edit this in the editor so i have to change the code somehow. Can anyone help me with this issue?

[Eric_K_ · Accepted solution]

Option 1: 

The easiest way to do this without editing the source code would be to just put the text as part of the logo file. That's how most stores do it.

Option 2:

If you want to edit the theme, you need to find the header file where this class exists: site-header__logo-link. 

From there just add {{ shop.name }} right after the <img> tag. Add some CSS: 

.site-header__logo img {
  margin-right: 10px; // create some spacing next to logo
  display: inline-block; // make text appear on same line as logo
}

You may need to play around with the CSS a bit to make it fit right on mobile.  Hope that helps.

[Eric_K_ · Accepted solution]

You're hitting the max width of the logo container on mobile, so it's going to start wrapping the contents since there isn't enough room.

You'll need to add responsive code so it changes the font size in that area as it scales down. The code below should work, but you'll need to play around with the font-size attribute to make it fit.

@media only screen and (max-width: 749px) {
  .site-header__logo a {
    font-size: .7em;
  }
}

If you can't get it to look reasonable you'll need to modify the container, but that's heading into CSS grid stuff which to be honest is probably going to be a headache if you don't have at least intermediate web dev experience.

[Eric_K_ · Accepted solution]

Option 1: 

The easiest way to do this without editing the source code would be to just put the text as part of the logo file. That's how most stores do it.

Option 2:

If you want to edit the theme, you need to find the header file where this class exists: site-header__logo-link. 

From there just add {{ shop.name }} right after the <img> tag. Add some CSS: 

.site-header__logo img {
  margin-right: 10px; // create some spacing next to logo
  display: inline-block; // make text appear on same line as logo
}

You may need to play around with the CSS a bit to make it fit right on mobile.  Hope that helps.

[D-Hageman]

Hi Eric,

thanks for your help! it already looks better now. but there is still an issue with centering the shop name on mobile. do you you or anyone else know how to fix this?

[D-Hageman]

I have tried to edit the coding but without succes. hope someone knows the answer

[Eric_K_ · Accepted solution]

You're hitting the max width of the logo container on mobile, so it's going to start wrapping the contents since there isn't enough room.

You'll need to add responsive code so it changes the font size in that area as it scales down. The code below should work, but you'll need to play around with the font-size attribute to make it fit.

@media only screen and (max-width: 749px) {
  .site-header__logo a {
    font-size: .7em;
  }
}

If you can't get it to look reasonable you'll need to modify the container, but that's heading into CSS grid stuff which to be honest is probably going to be a headache if you don't have at least intermediate web dev experience.

[D-Hageman]

Hi Eric,

Thanks for you reply. I can figure out where to put the code. I'm in Sections->header.liquid, that is where i need to be right? I am trying to fit the code in lines 1-9 but it doesn't change a thing. I am not very good at understanding web dev.

[Eric_K_ · Accepted solution]

You can add it there or also in one of the css files at the bottom.

Also your code syntax in your screenshot isn't correct. That first class needs to be closed with a }  and the @media line should have a { at the end. 

[D-Hageman]

It worked, your a lifesaver Eric! thanks a lot

[Eric_K_]

No problem. Glad it worked out for you.

[shellie95]

Hi Eric, I'm having a similar issue with my store. I want to add a symbol into my header to link to our contact us page. whats the best way to do this?

[whosamm]

Hi Eric, 

I was actually reading the thread because I am facing the same issue, I want to be able to add my Shop name next to the logo via coding,

It's not showing up. can you please advise if there is anything wrong in my code that I placed as you advised previously on someone's similar question.

Many thanks in advance, 

Sam 

<style>
.site-header__logo img {
max-width: {{ section.settings.logo_max_width | default: '450' | remove: 'px' | append: 'px' | escape }};
@media only screen and (max-width: 749px) {
.site-header__logo ProjeBeacon } {
font-size: .7em;
}
}

[ChristianaW]

Hi, 

I’m trying to do almost the same thing. I want to put my shop name to the right of the logo picture but I have the debut theme and they have the code settings as one or the other. They don’t allow for both and the code for mine looks different than the other example provided. So I’m not exactly sure what to do. (I copied and pasted the code in here. I’m not sure how it’s going to show up. But I hope it helps. Thank you. 

site-header__logo-image__shop.name } {

13

        max-width: {{ section.settings.logo_max_width | escape }}px;

14

      }

15

    {% endif %}

16

​

17

    {% if section.settings.align_logo == 'left' %}

18

    .site-header__logo-image__shop.name }  {

19

        margin: 0;

[PvRPvR]

Hi Eric,

I have changed my store name in general settings to and the header section (MInimal) is still showing the old name under logo at pvrfoods.com.  Also page title is showing the name twice. Please advise me on how to correct it

Thanks

PvR

[Shakesk]

Thankyou