Dual option on landing page

Dual option on landing page

Miss-Biscotto
Visitor
3 0 0

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. 

Replies 3 (3)

Artzen_tech
Shopify Partner
552 113 112

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

Artzen_tech_0-1715350012151.png


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

Artzen_tech_2-1715350214400.png

 

There you will find the option to add image and also the url.

Artzen_tech_1-1715350197278.png

 

After doing all these steps go to frontend and on the header you will see 2 logos like the below.

Artzen_tech_3-1715350292562.png


If my solution helped you, then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Miss-Biscotto
Visitor
3 0 0

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. 

Artzen_tech
Shopify Partner
552 113 112

@Miss-Biscotto 
Then we can discuss that thing in the inbox, if you wish to.

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify