FROM CACHE - en_header

How to add logo and store name in the header

Solved
D-Hageman
Tourist
5 0 0

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?

Schermafbeelding 2019-03-27 om 22.01.29.png

Accepted Solutions (3)

Accepted Solutions
Eric_K_
Shopify Expert
120 22 50

This is an 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.

 

View solution in original post

Eric_K_
Shopify Expert
120 22 50

This is an 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.

View solution in original post

Eric_K_
Shopify Expert
120 22 50

This is an 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. 

View solution in original post

Replies 12 (12)
Eric_K_
Shopify Expert
120 22 50

This is an 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
Tourist
5 0 0

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?

Schermafbeelding 2019-03-27 om 23.44.36.png

D-Hageman
Tourist
5 0 0

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

Eric_K_
Shopify Expert
120 22 50

This is an 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
Tourist
5 0 0

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.

Schermafbeelding 2019-03-28 om 08.35.36.png

Eric_K_
Shopify Expert
120 22 50

This is an 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
Tourist
5 0 0

It worked, your a lifesaver Eric! thanks a lot

Eric_K_
Shopify Expert
120 22 50

No problem. Glad it worked out for you.

shellie95
New Member
1 0 0

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
New Member
1 0 0

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

1BBA5C37-45E2-47BC-8D8D-8DAA4FADFC7E.jpeg

 

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
New Member
1 0 0

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