Liquid, JavaScript, themes, sales channels
Hi,
My store is https://www.razz.blue/.
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.
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.
Solved! Go to the solution
This is an accepted solution.
First you need to create your SVG file as a snippet in the theme:
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.
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.
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 🙂
This is an accepted solution.
First you need to create your SVG file as a snippet in the theme:
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.
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.
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.
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.
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 -%}
you are a life saver
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024