FROM CACHE - en_header

Link Logo to External URL

Solved
happylittledesi
New Member
5 0 0

I would really appreciate help in linking my shop logo to an external URL.  I have looked in the theme.liquid file, but cannot seem to find where to change the URL.  My shop is https://shop.000worldwide.com/.  The theme I am using is called Japser which I purchased from themeforest.  Unfortunately, the theme developer no longer provides support.  Any help would be great appreciated!

Accepted Solution (1)

Accepted Solutions
KarlOffenberger
Shopify Partner
1873 184 868

This is an accepted solution.

Ah yes, I see, your theme author has the logo code in a snippet (see that {%- include logo ... %} bit of code there?). So that will be in Snippets / logo.liquid then.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie

View solution in original post

Replies 12 (12)
KarlOffenberger
Shopify Partner
1873 184 868

Hi,

 

Given that you're using a commercial theme, it isn't possible to help you out with a definitive answer or guide because we simply cannot look in to the code of your theme. However, the logo related code is typically found in Sections / header.liquid and would be contained in an anchor tag such as

 

<a href="/">
  ...other HTML to display <h1 /> title or <img /> logo
</a>

So keeping your eyes peeled for such an anchor tag with href="/" to root will give you a clue. Then all you need to do is change that href value to wherever you want to redirect.

 

Hope this helps!

 

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
happylittledesi
New Member
5 0 0
Hi, I really appreciate the response. I am attaching a screenshot and
hoping that you might be able to tell me if this is the right spot to edit
the URL. I can't find a section labeled specifically as logo. Only this
section for favicons? Thanks again for your help!


[image: 5747778580643840.png]
This is the only thing I can find that seems to be
happylittledesi
New Member
5 0 0

Thanks so much for your response.  I am attaching a screenshot and am wondering if you could take a look and tell me if this is the right area.  I located the header.liquid file and located the header section that I am using.  But, I cannot find an <a href="">  to update the link.  Does this appear to be the right area?  Thank again.  I really appreciate your help.

KarlOffenberger
Shopify Partner
1873 184 868

The screenshot didn't get attached. But all you need to do is, from within your admin, navigate to your Online Store > Themes > Actions > Edit code and once in the code editor, you will find a file tree in the left pane. There you'd open the folder Sections and the file header.liquid. Then hit Ctrl + F to search within that file for this string of text

 

<a href="/" class="logo"

And that will be the anchor you need to modify.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
happylittledesi
New Member
5 0 0

Thanks again,  I just uploaded a screenshot.  I did ctrl F to search for the section, as you recommended. But I can't seem to locate a matching section.  Any other thoughts on where it could be?  Here's a screenshot of the header.liquid file and the only reference I could find to the logo for the header I am using.

 

5300765598679040.png

KarlOffenberger
Shopify Partner
1873 184 868

This is an accepted solution.

Ah yes, I see, your theme author has the logo code in a snippet (see that {%- include logo ... %} bit of code there?). So that will be in Snippets / logo.liquid then.

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
happylittledesi
New Member
5 0 0

YES!  Found it!  Thanks so much for your help and the explanation!

ElizabethMyers
Tourist
6 0 1

Can I add a chapter to this question? I am using Debut theme and need to link the logo to an external URL and I am hoping, @KarlOffenberger, that you can help! I have located the destination code but don't know how to modify it propoerly.

Here's the existing code in header.liquid:

<div class="grid__item {{ logo_classes }}">
{% 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="h2 site-header__logo">
{% else %}
<div class="h2 site-header__logo">
{% endif %}
{% if section.settings.logo %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<img class="lazyload js"
src="{{ section.settings.logo | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
style="max-width: {{ section.settings.logo_max_width }}px">
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<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 }}"
style="max-width: {{ section.settings.logo_max_width }}px;">
</noscript>
</a>
{% else %}
<a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>

There seem to be 2 instances of

<a href="{{ routes.root_url }}"

...that need to be changed to the external URL.
Can you help? The external URL is https://www.cereschill.com/

KileyBug
New Member
2 0 0

I am having this exact same problem as @ElizabethMyers ! Using Debut Theme, not seeing "href:"/" anywhere. Trying to update the logo link to go to my cart page instead of home page. Here's my code:

 


@ElizabethMyers wrote:

Can I add a chapter to this question? I am using Debut theme and need to link the logo to an external URL and I am hoping, @KarlOffenberger, that you can help! I have located the destination code but don't know how to modify it propoerly.

Here's the existing code in header.liquid:

<div class="grid__item {{ logo_classes }}">
{% 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="h2 site-header__logo">
{% else %}
<div class="h2 site-header__logo">
{% endif %}
{% if section.settings.logo %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<img class="lazyload js"
src="{{ section.settings.logo | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
style="max-width: {{ section.settings.logo_max_width }}px">
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<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 }}"
style="max-width: {{ section.settings.logo_max_width }}px;">
</noscript>
</a>
{% else %}
<a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>

There seem to be 2 instances of

<a href="{{ routes.root_url }}"

...that need to be changed to the external URL.
Can you help? The external URL is https://www.cereschill.com/




JonathanLi
New Member
1 0 0

I had the same issue actually, but it's just a matter of replacing the {{routes.root_url}} with the page you're trying to link it to. There should only be two instances that you have to replace, and they should be underneath/near the logo class. You were absolutely right in saying that that was the thing that needed to be replaced. I'm not a particularly skilled programmer myself, but it worked out for me.

peterbacon
New Member
4 0 0

Hello - I am having the same issue for my password "landing page" I am using the "Streamline" theme from shopify. Can someone help me with the code so my logo image links to my home page URL? Here is the code: 

 

<header
  data-section-id="{{ section.id }}"
  data-section-type="password-header"
  class="password-page__header"
  role="banner">

  <div class="password-page__logo">
    <h1 class="h2{% if section.settings.logo != blank %} password-page__logo-image{% endif %}" itemscope itemtype="http://schema.org/Organization">
      {% if section.settings.logo != blank %}
        {%- assign header_logo_size = section.settings.desktop_logo_width | append: 'x' -%}
        {%- assign header_logo_size_mobile = section.settings.mobile_logo_width | append: 'x' -%}
        {% style %}
          .password-page__logo h1 {
            max-width: {{ section.settings.mobile_logo_width }}px;
          }
          @media only screen and (min-width: 769px) {
            .password-page__logo h1 {
              max-width: {{ section.settings.desktop_logo_width }}px;
            }
          }
        {% endstyle %}
        <img
          class="small--hide"
          src="{{ section.settings.logo | img_url: header_logo_size }}"
          srcset="{{ section.settings.logo | img_url: header_logo_size }} 1x, {{ section.settings.logo | img_url: header_logo_size, scale: 2 }} 2x"
          alt="{{ section.settings.logo.alt | default: shop.name }}"
          itemprop="logo">
        <img
          class="medium-up--hide"
          src="{{ section.settings.logo | img_url: header_logo_size_mobile }}"
          srcset="{{ section.settings.logo | img_url: header_logo_size_mobile }} 1x, {{ section.settings.logo | img_url: header_logo_size_mobile, scale: 2 }} 2x"
          alt="{{ section.settings.logo.alt | default: shop.name }}">
      {% else %}
        <span>{{ shop.name }}</span>
      {% endif %}
    </h1>
  </div>

  <a href="#LoginModal" class="js-modal-open-login-modal btn btn--password btn--small">
    <span class="password__lock">
      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-lock" viewBox="0 0 17 20"><path fill="#FFF" d="M15.725 8.333H15.3V6.875C15.3 3.02 12.313 0 8.5 0 4.687 0 1.7 3.02 1.7 6.875v1.458h-.425C.571 8.333 0 8.893 0 9.583v9.167C0 19.44.571 20 1.275 20h14.45c.704 0 1.275-.56 1.275-1.25V9.583c0-.69-.571-1.25-1.275-1.25zM4.25 6.875C4.25 4.381 6.077 2.5 8.5 2.5s4.25 1.88 4.25 4.375v1.458h-8.5V6.875zm5.95 8.142c0 .91-.754 1.65-1.683 1.65h-.034c-.93 0-1.683-.74-1.683-1.65v-1.7c0-.911.754-1.65 1.683-1.65h.034c.93 0 1.683.739 1.683 1.65v1.7z"/></svg>
    </span>
    {{ 'general.password_page.password_link' | t }}
  </a>
</header>

{% schema %}
  {
    "name": "Header",
    "class": "password-header-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo image"
      },
      {
        "type": "range",
        "id": "desktop_logo_width",
        "label": "Desktop logo width",
        "default": 200,
        "min": 80,
        "max": 400,
        "step": 10,
        "unit": "px"
      },
      {
        "type": "range",
        "id": "mobile_logo_width",
        "label": "Mobile logo width",
        "default": 140,
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "px",
        "info": "Set as a max-width, may appear smaller"
      }
    ]
  }
{% endschema %}

 

Dallas2
New Member
2 0 0

Hey! I have put the url in place of the href anchor tag in both places - the file saves (finally) but makes no difference to the link that the logo in linked to... and ideas?