Solved

How do remove store name from website page?

smef
Excursionist
20 0 4

Hi,

My store is https://www.razz.blue/.

smef_2-1637272503044.png

 

 

As you can see, it says "smef" in big text here and I want to remove that text. How do I go about this?
Also, on the password page, https://www.razz.blue/password, there are these annoying divider lines that I can't find a way to get rid of.

smef_1-1637272476458.png

 

I have applied code in the code editor to remove the lines on the main page, however I can't find a way to edit this on the password page. Help?

Thank you so much.

Accepted Solution (1)
ThomasBorowski
Shopify Expert
803 71 239

This is an accepted solution.

First you need to create your SVG file as a snippet in the theme:

 

  1. Open Dawn in the theme code editor and under the Snippets folder click Add a new snippet.
  2. Name the snippet svg-logo.
  3. Then, on your computer, open the SVG file you want to use for your logo in a text editor (Windows Notepad, macOS TextEdit, etc.).
  4. Copy the entire contents of the file to your clipboard and paste it into the svg-logo snippet file in your theme.
  5. Save the snippet file.

Then open the file sections/header.liquid. You should find a section of code around line 329 that looks like this:

 

{%- if request.page_type == 'index' -%}
  <h1 class="header__heading">
{%- endif -%}
    <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
      {%- if section.settings.logo != blank -%}
        {%- 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 }}"
        >
      {%- else -%}
        <span class="h2">{{ shop.name }}</span>
      {%- endif -%}
    </a>
{%- if request.page_type == 'index' -%}
  </h1>
{%- endif -%}

 

 

 

Now focus on this part of the code:

 

      {%- else -%}
        <span class="h2">{{ shop.name }}</span>
      {%- endif -%}

 

 

Change that to look like this:

 

      {%- else -%}
        {%- render 'svg-logo' -%}
        {% comment %}<span class="h2">{{ shop.name }}</span>{% endcomment %}
      {%- endif -%}

 

 

This will make it so that when you don't have a JPG, PNG or GIF image set in the theme editor it will pull in the SVG logo contained in the svg-logo snippet.

 

Note: If the logo doesn't have the desired size, open the svg-logo snippet and change the width and height values accordingly.

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up

View solution in original post

Replies 8 (8)

ThomasBorowski
Shopify Expert
803 71 239

It looks like you added the logo in the header by modifying the theme code. The proper way to do it would be to use the theme editor (not the code editor) where you can set a logo in the Header section. The logo will then replace the "smef" text. That text only shows if there is no logo set in the theme editor.

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
smef
Excursionist
20 0 4

Hi. That is true, however I wanted to set the logo header as an SVG. The only way I found to do this is to modify the source code to make it that way. Do you know a way around this? I would be so appreciative if you could help a brother out 🙂

ThomasBorowski
Shopify Expert
803 71 239

This is an accepted solution.

First you need to create your SVG file as a snippet in the theme:

 

  1. Open Dawn in the theme code editor and under the Snippets folder click Add a new snippet.
  2. Name the snippet svg-logo.
  3. Then, on your computer, open the SVG file you want to use for your logo in a text editor (Windows Notepad, macOS TextEdit, etc.).
  4. Copy the entire contents of the file to your clipboard and paste it into the svg-logo snippet file in your theme.
  5. Save the snippet file.

Then open the file sections/header.liquid. You should find a section of code around line 329 that looks like this:

 

{%- if request.page_type == 'index' -%}
  <h1 class="header__heading">
{%- endif -%}
    <a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
      {%- if section.settings.logo != blank -%}
        {%- 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 }}"
        >
      {%- else -%}
        <span class="h2">{{ shop.name }}</span>
      {%- endif -%}
    </a>
{%- if request.page_type == 'index' -%}
  </h1>
{%- endif -%}

 

 

 

Now focus on this part of the code:

 

      {%- else -%}
        <span class="h2">{{ shop.name }}</span>
      {%- endif -%}

 

 

Change that to look like this:

 

      {%- else -%}
        {%- render 'svg-logo' -%}
        {% comment %}<span class="h2">{{ shop.name }}</span>{% endcomment %}
      {%- endif -%}

 

 

This will make it so that when you don't have a JPG, PNG or GIF image set in the theme editor it will pull in the SVG logo contained in the svg-logo snippet.

 

Note: If the logo doesn't have the desired size, open the svg-logo snippet and change the width and height values accordingly.

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
smef
Excursionist
20 0 4

Thank you so much! Just to note for anyone else experiencing this problem, in my case I had to manually add the width and height information for Shopify to recognize the SVG. You may or may not have width or height information in your SVG. To add it, check out this post which helped me.

ThomasBorowski
Shopify Expert
803 71 239

The contents of SVG files varies depending on how they were created, which version of the SVG standard is used, etc. Usually programs that can create SVGs have an option to export the SVG in a format that works on the web.

 

Also make sure to convert text into paths so it displays correctly. If text is saved as text and the font isn't available on the computer of the person viewing the SVG in a browser, the SVG will look broken because the font will be substituted with the closest match available on the user's system.

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
smef
Excursionist
20 0 4

Hey, sorry one more thing: I've updated my logo, but it's still the old one on my password page.

https://www.razz.blue. Do you know how to fix this? I've removed the old one from my files and it's still showing up. Not sure how to remedy this.

ThomasBorowski
Shopify Expert
803 71 239

The password page uses its own layout layout/password.liquid and that file doesn't pull in sections/header.liquid like the main layout.

 

Open up sections/main-password-header.liquid and around line 13 you should find this code:

    {%- else -%}
      <h1 class="h2">{{ shop.name }}</h1>
    {%- endif -%}

 

Apply the same change from header.liquid here:

    {%- else -%}
      {% render 'svg-logo' %}
      {% comment %}<h1 class="h2">{{ shop.name }}</h1>{% endcomment %}
    {%- endif -%}

 

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
smef
Excursionist
20 0 4

you are a life saver