Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello,
I have two arms to my business and would like a landing page where customers can click on one of two logos to take them to the right area.
If that’s not possible I’d be happy to add my second logo beside the first one on the homepage which when clicked takes the customer to a page specific to that part of the business.
Very techno challenged here but willing to try any suggestions.
thank you.
Hi @Miss-Biscotto
Its Artzen Technologies! We will be happy to help you today.
you can show 2 logos in the header, with 2 different links to both logos.
Just follow the below steps:-
1) Go to your Online Store
2) Edit Code
3) Find header.liquid file
4) Find header__heading class div
When you find that then replace it with:-
<h1 class="header__heading" >
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
{%- if settings.logo != blank -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true
}}
</div>
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
<div class="second-logo">
<a href="{{ section.settings.logo_url }}" class="header__heading-link link link--text focus-inset">
<img src="{{ section.settings.second-logo | img_url: 'master' }}">
</a>
</div>
</h1>
and then go below to the schema and add following code:-
{
"type": "image_picker",
"id": "second-logo",
"label": "Second Logo Image"
},
{
"type": "url",
"id": "logo_url",
"label": "Second Logo Image Link"
},
when you add the above code then Go to Customize then in header
There you will find the option to add image and also the url.
After doing all these steps go to frontend and on the header you will see 2 logos like the below.
If my solution helped you, then please mark it as accepted.
Let me know if need further assistance
Regards,
Artzen Technologies
Thank you for taking the time to reply. I have tried to follow your instructions but panicked when I clicked Save and was alerted to a JavaScript syntax error. So I just exited. I think I might need someone to make these changes for me.
@Miss-Biscotto
Then we can discuss that thing in the inbox, if you wish to.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024