Narrative theme - Adding logo (png/svg) overlay on slider section

PauloL
Tourist
10 0 4

@KetanKumar hello!

Thank you,

This is the link
https://hln-europe.myshopify.com/

The name of the store is different now and the logo is the one you see bellow ("alpha bravo"). I have the svg logo made, and imported into the files. I just need to find out where to change the code on the Narrative Theme...

Is this anywhere close? This is the original code...
Screen Shot 2021-01-22 at 13.43.56.png

Thank you for your help,

Paulo

0 Likes
KetanKumar
Shopify Partner
14046 1637 5034

@PauloL 

Thanks it can be done custom code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
PauloL
Tourist
10 0 4

Yes it can

Can you point me to where should I change the code? Any hint?

Thank you

KetanKumar
Shopify Partner
14046 1637 5034

@PauloL 

Yes, i think are you able code 

see this article 

https://marketingfuzz.com/svg-logo-in-shopify

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PauloL
Tourist
10 0 4

Lovely, thank you very much

I have seen that article before and it is very helpful. But in the Narrative theme, I find that the code has different references for the source.

            <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">


Thats where Im stuck at... it differs from the Debut Theme code presented on the article..


Thank you very much for your help

KetanKumar
Shopify Partner
14046 1637 5034

@PauloL 

Thanks or the update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
achoo2
Tourist
7 0 2

Hi @KetanKumar 

do you mind posting the code here so I can learn a bit of DIY?

PauloL
Tourist
10 0 4

@achoo2 this was what I did:

1 - On you shopify store, go to COSTUMIZE and on the header section, upload the logos you want (png or jpeg)

2 - Go to your code, select the ASSETS folder. Upload your .svg file

2 - Then under SECTIONS, select the HEADER.LIQUID

3 - Look for where you have the word "LOGO" on the code

4 - Replace the section with this:
(notice the first line "<div class="site-header__logo h1" ....  it is where the code starts, dont delete this line!>

<div class="site-header__logo h1" itemscope itemtype="http://schema.org/Organization">

        {%- if request.page_type == "index" -%}
          {%- if section.settings.logo_slideshow != blank -%}
            <a href="/" itemprop="url" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
              <img src="{{ 'Logo_w.svg' | asset_url }}" width="{{section.settings.logo_max_width}}" alt="{{ shop.name }}" itemprop="logo">
            </a>
          {%- endif -%}
        {%- else -%}
          {%- if section.settings.logo != blank -%}
            <a href="/" itemprop="url" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
              <img src="{{ 'Logo_w.svg' | asset_url }}" width="{{section.settings.logo_max_width}}" alt="{{ shop.name }}" itemprop="logo">
            </a>
          {%- else -%}
            <a href="{{ routes.root_url }}" class="site-header__link site-header__logo-link" itemprop="url">{{ shop.name }}</a>
          {%- endif -%}
        {%- endif -%}

      </div>

 
5 - Change "Logo_w.svg" for the name on your svg file (the one you've uploaded to the assets folder).

6 - If you need to play with the size of the image on your page, go back to your code, and under SECTIONS, you'll have the THEME.CSS.LIQUID

7 - 
Look for ".site-header__logo". Mine is on line 3408. Play around with the "max-height" value to change size.
(here's mine as an example):

.site-header__logo {
  //remove default margin when this is an <h1> tag
  margin: 20px;

  img {
    max-height: 50px;
    display: block;
    margin: 0 auto;
  }

 

0 Likes
achoo2
Tourist
7 0 2

Hi @PauloL 

 

thanks for that, however, I was looking to code the logo (could be PNG or SVG) on top of my existing slider, 

Screen Shot 2021-01-28 at 12.28.11 pm.png

 

so basically code a fixed logo on top of the video slider as an overlay (where the red box is) 

0 Likes
PauloL
Tourist
10 0 4

Can you tell me what theme are you using?

0 Likes