Hello @dimitrieraw,
1. Go to Online Store->Theme->Edit code
2. Asset->Add new asset (as logo.svg)
then go to header.liquid
search below code
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}"
itemprop="logo">
Replace with this
<img src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
Hey, thanks for your reply. However, my code is looking different from what you've sent. If I remember well, it's the same solution you've provided on another thread that I've read and tried.
This is the code which I have found in regard to the logo on headler.liquid
{% if section.settings.logo %} <img class="site-header__logo-image" src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo"> {% if request.page_type == 'index' and section.settings.transparent_header_enable %} {% if section.settings.transparent_logo == blank %} {%- assign transparent_logo = section.settings.logo -%} {% else %} {%- assign transparent_logo = section.settings.transparent_logo -%} {% endif %} <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ transparent_logo | img_url: image_size }}" srcset="{{ transparent_logo | img_url: image_size }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo"> {% endif %}
Did you add logo.svg in asset
Replace your code with this
{% if section.settings.logo %} <img class="site-header__logo-image" src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}" itemprop="logo"> {% if request.page_type == 'index' and section.settings.transparent_header_enable %} {% if section.settings.transparent_logo == blank %} {%- assign transparent_logo = section.settings.logo -%} {% else %} {%- assign transparent_logo = section.settings.transparent_logo -%} {% endif %} <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}" itemprop="logo"> {% endif %}
did you add logo.svg
Of course I did. It just does not show. The .svg file is added as logo.png in the Assets.
Here is the code in my header.liquid
{% if request.page_type == 'index' %} <h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization"> {% else %} <div class="h1 site-header__logo large--left" itemscope itemtype="http://schema.org/Organization"> {% endif %} {% capture image_size %}{{ logo_max_width | escape }}x{% endcapture %} <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link"> {% if section.settings.logo %} <img class="site-header__logo-image" src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}" itemprop="logo"> {% if request.page_type == 'index' and section.settings.transparent_header_enable %} {% if section.settings.transparent_logo == blank %} {%- assign transparent_logo = section.settings.logo -%} {% else %} {%- assign transparent_logo = section.settings.transparent_logo -%} {% endif %} <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}" itemprop="logo"> {% endif %} {% else %} {{ shop.name }} {% endif %} </a> {% if request.page_type == 'index' %} </h1> {% else %} </div> {% endif %}
Hi @dimitrieraw , I also use Brooklyn theme, and I realised that maybe this is not working for you, because you must replace it in both "if".
So, after you upload your .svg logo with the name "logo.svg", in your theme assets, search for this code (mine is around line 193-207):
{% if section.settings.logo-inverted and template.name == 'index' %} <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
<img id="dab-header-logo" src="{{ section.settings.logo-inverted | img_url: image_size }}" srcset="{{ section.settings.logo-inverted | img_url: image_size }} 1x, {{ section.settings.logo-inverted | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo-inverted.alt | default: shop.name }}" itemprop="logo">
</a> {% elsif section.settings.logo %} <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
<img id="dab-header-logo" src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">
And replace both bold code with this one,
<img src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
Hey!
I know you've switched the theme, but I think someone will find this helpful.
This worked for me!
1. Click Edit Code on your theme
2. Scroll down to Assets and Add a new asset with the name "logo.svg"
3. Go to header.liquid
4. Scroll down to line number 90 or so and spot the following code:
{% if section.settings.logo-inverted and request.page_type == 'index' %}
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
<img src="{{ section.settings.logo-inverted | img_url: image_size }}"
srcset="{{ section.settings.logo-inverted | img_url: image_size }} 1x, {{ section.settings.logo-inverted | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo-inverted.alt | default: shop.name }}"
itemprop="logo">
</a>
{% elsif section.settings.logo %}
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}"
itemprop="logo">
</a>
5. Replace the bolded parts with this:
User | Count |
---|---|
455 | |
194 | |
139 | |
61 | |
42 |