Brooklyn Theme separate logo on home page and product page

Fleekbrowz
New Member
6 0 0

Hi Shopify Gurus,

I need your help. I would like to have two separate logos; white version on home page and black version on product page. However Brooklyn theme only allows me to upload one logo which is used on all pages.

How can I add two separate logos ?

Thanks.

Regards,

Calvin

 

0 Likes
PeanutButter
Shopify Partner
330 66 137

hi @Fleekbrowz, this needs custom code.

If you are confortable with editing code I can provide code modifications so you can apply these.  If not, I can request collaborator access to your site and apply the changes myself

Let me know what option you prefer

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
Fleekbrowz
New Member
6 0 0

Hi @PeanutButter,

Thanks for the reply. Can you share with me the code ? I believe this needs to be added onto the header.liquid edit code section ?

Regards

Calvin

0 Likes
PeanutButter
Shopify Partner
330 66 137

yes, code will be in header.liquid.

So, you want white version of the logo in homepage, black version in product page.  What about the rest of the pages (collections, pages, blog...)? Do you want black ir white version there?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
Fleekbrowz
New Member
6 0 0

White logo on home page only.. rest of the website logo will be black.

0 Likes
PeanutButter
Shopify Partner
330 66 137

Ok, will guide you through it

First of all I recommend making a copy of your theme and making the changes there in case you break stuff.

Then, to to Sections/header.liquid about line line 388 and paste this

    {
      "type": "image_picker",
      "id": "logo_white",
      "label": {
        "cs": "Logo White",
        "da": "Logo White",
        "de": "Logo White",
        "en": "Logo White",
        "es": "Logo White",
        "fi": "Logo White",
        "fr": "Logo White",
        "it": "Logo White",
        "ja": "ロゴ White",
        "ko": "로고 White",
        "nb": "Logo White",
        "nl": "Logo White",
        "pl": "Logo White",
        "pt-BR": "Logotipo White",
        "pt-PT": "Logótipo White",
        "sv": "Logotyp White",
        "th": "โลโก้ White",
        "tr": "Logo White",
        "vi": "Logo White",
        "zh-CN": "logo White",
        "zh-TW": "商標 White"
      }
    },

You should end up with this:

Screen Shot 2021-01-27 at 22.19.26.png

 

This will create a new setting in the header section and you should see this now in the customizer:

Screen Shot 2021-01-27 at 22.22.01.png

While you try this, I will write the liquid code with the conditional to output one or the other logo

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
Fleekbrowz
New Member
6 0 0

Hi @PeanutButter,

New setting is visible in customizer.

Screenshot 2021-01-27 at 21.31.13.png

 

0 Likes
PeanutButter
Shopify Partner
330 66 137

Great!

Not find the following around line 148 of sections/header.liquid:

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

 and replace with this:

                  	{% if section.settings.logo_white and request.page_type == 'index' %}
                  		{% assign logo = section.settings.logo_white %}
                  	{% else %}
                  		{% assign logo = section.settings.logo %}
                  	{% endif %}
                    <img class="site-header__logo-image" src="{{ logo | img_url: image_size }}" srcset="{{ logo | img_url: image_size }} 1x, {{ logo | img_url: image_size, scale: 2 }} 2x" alt="{{ logo.alt | default: shop.name }}" itemprop="logo">
                  	

 

The code uses the white logo in the homepage only if you have selected a logo for the logo_white setting. If not, it will use the default for all pages.
Let me know if you have any issue.

If my solution fixes your issue please Like and mark as accepted

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
Fleekbrowz
New Member
6 0 0

Slight misunderstanding from my side. I already made a custom logo in two colours (black and white) and saved as png file. 

So I want to use white png file on home page only and black png file on rest of the website.

 

0 Likes
PeanutButter
Shopify Partner
330 66 137

yes, this is what the code I sent does.

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes