I would like to have different logos for my mobile/desktop version (Colorblock theme)

Technical Q&A
1

I would like this logo for the desktop version:

by AIRPARK (4).png
by AIRPARK (4).png500×500 18 KB

And this one for the mobile version:

AIRPARC-Logo.png
AIRPARC-Logo.png333×327 3.32 KB

2

Hi @acon24_Austria

I hope you are well.

You can follow my detailed instructions below here:

Step 1: Go to Shopify admin > Files > Upload your 2 images for logo: (https://prnt.sc/oMOVxHEOSkb_).

Step 2: Go to your theme > Customization > Adjust Desktop logo here: (https://prnt.sc/JzKNCtf0F4pT).

Step 3: Open your theme > Edit code > Add the code below to the file header.liquid, here is the screenshot for your reference: (https://prnt.sc/f0EAb7tQObKy).

Code for Step 3:

#logo-mobile{
    display: none;
  }
  @media screen and (max-width: 768px){
   body #logo-mobile {
        display: block;
    }
    #logo-desktop {
        display: none;
    }
  }

Step 4: In header.liquid file continue to add this code below there, screenshot for your reference: (https://prnt.sc/p1TwupX30BN7).

Code for Step 4:

id="logo-desktop"

Step 5: Continue to add the code below to the header.liquid file: (https://prnt.sc/YxyO7bb4b8m0).

Here is the code for Step 5:


            {%- if settings.logo != blank -%}
              

                {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
                {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
                {% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %}
                {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
                
![{{ logo_alt }}|4106x1372](upload://qQKMXzD0zLD1nxw1fukeWKeFD19.png)

              

            {%- else -%}
              {{ shop.name }}
            {%- endif -%}

Step 6: In the code for Step 5 here: (https://prnt.sc/UsFujgChphB8), you should replace it with the Mobile logo link that you uploaded to the Shopify admin > Files feature from Step 1. You can copy the Mobile logo like this: (https://prnt.sc/8aLthGoOZolh).

I hope it can help. Please let me know if you have any trouble with the guide. Thank you!

Best,

Daisy - Avada Support Team .

3

www.acon24.at

4

Sorry, i made a mistake in the coding. It does work, thank you very much!

5

With the code you provided, im trying to find a way to change the size of the mobile logo. Ive tried changing some values, but to no avail.

6

Hi @acon24_Austria

May I have your store URL for further investigation? Thank you!

Best,

Daisy - Avada Support Team.

7

www.acon24.at | Password: rtewff