Narrative Theme, change logo

philmatz
New Member
5 0 0

Hi,

I am setting up my shop with Narrative theme. If uploading my logo on the header it is very bad quality, so I found a tutorial on how to upload a svg file (https://marketingfuzz.com/svg-logo-in-shopify). This works very well and I am able to upload the logo and it has good quality. Here a sample code (took out the url and image path) of my svg file, which I uploaded and it works good.

<p><a href="http://www.xxxx.com"><img src="https://cdn.shopify.com/s/files/1/0576/7836/4857/files/xxxsvg?v=xxxx" width="180.96" height="26" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></a></p>

The header Narrative theme has the possibility to have one logo for main pages and another transparent logo. I never coded in Shopify, but coded in other languages. My question is were I have to insert the above code to be able view the main and transparent logo correctly? I think I identified the section of source code were it need to be added, but can someone help me to identify the exact spot and make it work. Here the source code section. 

 

{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name gets precedence with `h1` tag on homepage, div on other pages.
{% endcomment %}
{% if request.page_type == 'index' %}
<h1 class="site-header__logo-wrapper h4" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="site-header__logo-wrapper h4" itemscope itemtype="http://schema.org/Organization">
{% endif %}

<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo">
{%- capture image_size %}x{{ section.settings.logo_max_height }}{% endcapture -%}

{% if section.settings.logo %}
<style>
.site-header__logo-image {
height: {{ section.settings.logo_max_height | append: 'px' }};
}
</style>

<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.enable_transparent %}
{% 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 %}
{% else %}
{{ shop.name }}
{% endif %}

 

Thank you,

Philipp

0 Likes