Change Header Logo for One Collection or Template - OOTS Turbo Theme

Paul_Castle · January 10, 2023, 3:47pm

I’d like to use a different logo for one collection or template, whichever is easier. I’ve seen solutions for other themes but I’m not confident enough to try them on this particular theme - Turbo by Out of the Sandbox. Is this something I need to engage a dev for and if so, how should I go about finding one?

Many thanks in advance for your help.

Paul

Salil17 · January 11, 2023, 10:27am

Hi Paul, I’ll be happy to help you for changing logo on different templates

Litos · January 11, 2023, 12:06pm

Hi @Paul_Castle ,

Please send me the code of header.liquid file, I will guide you in detail

Paul_Castle · January 11, 2023, 4:31pm

Thank you Litos, here is the code…

{% comment %} Structured data {% endcomment %}

{% if template.name == ‘index’ %}

{% endif %}

{%- assign locale_selector = false -%}
{%- assign currency_selector = false -%}

{%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
{%- assign currency_selector = true -%}
{%- endif -%}

{%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}

{% comment %}Mobile navigation{% endcomment %}

{% if section.settings.promo_text != blank %}

{% endif %}

{% if section.settings.phone_number != blank %}

{{ section.settings.phone_number }}

{% if shop.customer_accounts_enabled %}
{% if customer %}

{{ customer.name }}
{{ 'layout.customer.log_out' | t }}
{{ 'layout.customer.log_in' | t }}

{% if locale_selector or currency_selector or settings.show_multiple_currencies == true %}
{%
render ‘localization-switcher-mobile’,
additional_classes: ‘mobile-menu__disclosure’,
currency_selector: currency_selector,
locale_selector: locale_selector,
show_currency: section.settings.show_currency_selector,
%}
{% endif %}

{% if section.settings.logo_mobile != blank %} {{ shop.name | escape }}

{% elsif section.settings.logo != blank %} {{ shop.name | escape }}

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

{% if section.settings.search_enabled %} {% endif %}

{% if section.settings.show_cart %}

{% endif %}

{% if section.settings.search_enabled %}

{% endif %}

{% if template contains “index” %}
{%- assign feature_image = true -%}
{% elsif template contains “collection” %}
{%- assign feature_image = true -%}
{% elsif template contains “blog” %}
{%- assign feature_image = true -%}
{% elsif template contains “article” %}
{%- assign feature_image = true -%}
{% elsif template contains “contact” %}
{%- assign feature_image = true -%}
{% elsif template contains “product” %}
{%- assign feature_image = true -%}
{% elsif template contains “gallery” %}
{%- assign feature_image = true -%}
{% elsif template contains “banner” %}
{%- assign feature_image = true -%}
{% elsif template contains “faq” %}
{%- assign feature_image = true -%}
{% elsif template contains “search” %}
{%- assign feature_image = true -%}
{% elsif template contains “cart” %}
{%- assign feature_image = true -%}
{% else %}
{%- assign feature_image = false -%}
{% endif %}

{% comment %}Main navigation{% endcomment %}

{% if section.settings.promo_text != blank %}

{% endif %}

{% if section.settings.social_icons_header %} {% render 'social-icons' %} {% endif %}

{{ section.settings.phone_number }}

{% if section.settings.top_bar_menu != blank %}
{% for link in linklists[section.settings.top_bar_menu].links %}

{{ link.title }}

{% render 'localization-switcher', additional_classes: 'header-menu__disclosure', id: 'header__selector-form', currency_selector: currency_selector, locale_selector: locale_selector, show_currency: section.settings.show_currency_selector %}

{% if shop.customer_accounts_enabled %}

{% if customer %}{{ 'layout.customer.my_account' | t }}{% else %}{{ 'layout.customer.log_in' | t }}{% endif %}

{% if section.settings.show_cart %}

{% unless settings.cart_action == ‘ajax’ and template contains ‘cart’ %}

{% for item in cart.items %}
{% if item.variant.compare_at_price > item.variant.price %}
{%- assign saving = item.variant.compare_at_price | minus: item.variant.price | times: item.quantity -%}
{%- assign total_saving = saving | plus: total_saving -%}
{% endif %}

{% if item.image %}

{% endif %}

{{ item.product.title }} {% unless item.product.has_only_default_variant or item.variant.title contains "Title" %} - {% for option in item.product.options %} {{ item.variant.options[forloop.index0] }} {% unless forloop.last %}/{% endunless %} {% endfor %} {% endunless %}
{% if item.selling_plan_allocation.selling_plan %}

{{ item.selling_plan_allocation.selling_plan.name }}
{% endif %}
{% if item.properties %}
{% for p in item.properties %}
{% if p.last != blank %}

{{ p.first }}: {{ p.last }}
{% endif %} {% endfor %} {% endif %}

{% if item.price > 0 %} {% render 'price-element', price: item.final_price %}
{% if item.price < item.variant.compare_at_price or item.line_level_discount_allocations.size > 0 %}

{%
render ‘price-element’,
price: item.variant.compare_at_price
%}

{% endif %}
{% else %}
{{ settings.free_price_text }}
{% endif %}

{%
render ‘unit-price’,
item: item,
variant: item.variant,
product: item.product,
class: ‘mini-cart__unit-price’
%}

{% if item.line_level_discount_allocations.size > 0 %}
{% for discount_allocation in item.line_level_discount_allocations %}

{{ discount_allocation.discount_application.title }}
{% endfor %} {% endif %}

<input type=“number” min=“0” size=“2” class=“quantity” name=“updates” id=“updates_{{ item.id }}” value=“{{ item.quantity }}” data-cart-quantity-input=“mini-cart” {% if settings.limit_quantity and item.variant.inventory_management != blank and item.variant.inventory_quantity > 0 and item.variant.inventory_policy == “deny” %}max=“{{ item.variant.inventory_quantity }}”{% endif %}/>

{% if cart.cart_level_discount_applications != blank %} {% for discount_application in cart.cart_level_discount_applications %} {{ discount_application.title }} - {% render 'price-element', price: discount_application.total_allocated_amount %} {% endfor %} {% endif %}
{% render 'price-element', price: cart.total_price %}
{{ ‘layout.general.subtotal’ | t }}
{% if settings.display_savings and total_saving > 0 or settings.display_savings and cart.total_discount > 0 %} {% assign total_savings = total_saving | plus: cart.total_discount %} {% render 'price-element', price: total_savings %}
{{ ‘layout.general.savings’ | t }}
{% endif %}
{%- capture taxes_shipping_checkout -%} {%- if cart.taxes_included and shop.shipping_policy.body != blank -%} {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }} {%- elsif cart.taxes_included -%} {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }} {%- elsif shop.shipping_policy.body != blank -%} {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }} {%- else -%} {{ 'cart.general.tax_and_shipping' | t }} {%- endif -%} {%- endcapture -%}
{{ taxes_shipping_checkout }}
{% if settings.display_special_instructions and settings.go_to_checkout %} {{ cart.note }} {% endif %}
{% if settings.display_tos_checkbox and settings.go_to_checkout %}

{{ 'cart.general.agree_to_terms_html' | t }}
{% if settings.tos_page != blank %}
{{ ‘cart.general.view_terms’ | t }}
{% endif %}

{% endif %}
{% if settings.cart_message != blank %}

{{ settings.cart_message }}
{% endif %}
{% if settings.go_to_checkout %}
{% if settings.show_lock_icon %}{% endif %}{{ ‘layout.general.checkout’ | t }}
{% else %}
{% if settings.show_lock_icon and settings.go_to_checkout %}{% endif %}{{ ‘layout.general.go_to_cart’ | t }}
{% endif %}

{% endunless %}

{% endif %}

{% capture logo %}

{% if section.settings.logo_home != blank %} {{ shop.name | escape }}

{% endif %}

{% if section.settings.logo != blank %}
{{ shop.name | escape }}
{% else %}
{{ shop.name }}
{% endif %}

{% endcapture %}

{% assign menu_style = ‘wide’ %}
{% if section.settings.vertical_menu %}
{% assign menu_style = ‘vertical’ %}
{% endif %}

{% capture menu_left %}
{%
render ‘navigation-desktop’,
menu: section.settings.main_linklist,
style: menu_style,
%}
{% endcapture %}

{% capture menu_right %}
{%
render ‘navigation-desktop’,
menu: section.settings.main_linklist2,
style: menu_style,
%}
{% endcapture %}

{% capture search %}
{% if section.settings.search_enabled %}

{% endif %} {% endcapture %}

{% if section.settings.menu_position == ‘inline’ %}
{% if section.settings.logo_position == ‘left’ %}
{{ logo }}

{{ search }}
{% else %}

{{ search }}
{% endif %}
{% else %}
{{ logo }}

{% endif %}

{% comment %}
If JS is disabled we always want the non-feature_image style,
but we add these dynamically here to avoid waiting for the main
bundle to load. This prevents styling jumps for the majority,
who do use JS.

After the bundle loads, separate code toggles these classes during
editor events, etc.
{% endcomment %}

div.header__logo, div.header__logo img, div.header__logo span, .sticky_nav .menu-position--block .header__logo { max-width: {{ section.settings.logo_display_width | append: 'px' }}; }

{% schema %}
{
“name”: “Header”,
“class”: “shopify-section–header”,
“settings”: [
{
“type”: “header”,
“content”: “Announcement bar”
},
{
“type”: “richtext”,
“id”: “promo_text”,
“label”: “Text”,
“info”: “Maximum character limit is 170”
},
{
“type”: “header”,
“content”: “Top bar”
},
{
“type”: “checkbox”,
“id”: “social_icons_header”,
“label”: “Show social media header icons”,
“default”: true
},
{
“type”: “text”,
“id”: “phone_number”,
“label”: “Phone number”,
“info”: “1-800-555-5555”
},
{
“type”: “link_list”,
“id”: “top_bar_menu”,
“label”: “Menu”,
“info”: “This menu won’t show drop-down items”
},
{
“type”: “checkbox”,
“id”: “show_cart”,
“label”: “Show cart”,
“default”: true
},
{
“type”: “select”,
“id”: “cart_icon”,
“label”: “Cart icon”,
“default”: “cart”,
“options”: [
{
“value”: “cart”,
“label”: “Cart”
},
{
“value”: “bag”,
“label”: “Bag”
}
]
},
{
“type”: “header”,
“content”: “Language selector”,
“info”: “To add a language, go to your language settings.”
},
{
“type”: “checkbox”,
“id”: “show_locale_selector”,
“label”: “Show language selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Country selector”,
“info”: “To add a country, go to your payment settings.”
},
{
“type”: “checkbox”,
“id”: “show_currency_selector”,
“label”: “Show country selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Logos”
},
{
“type”: “range”,
“id”: “logo_display_width”,
“label”: “Logo display width”,
“step”: 5,
“min”: 105,
“max”: 205,
“default”: 205,
“unit”: “px”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo”,
“info”: “400 x 200px recommended”
},
{
“type”: “image_picker”,
“id”: “logo_home”,
“label”: “Secondary logo over content (optional)”,
“info”: “400 x 200px recommended”
},
{
“type”: “image_picker”,
“id”: “logo_mobile”,
“label”: “Mobile logo”,
“info”: “100 x 50px recommended”
},
{
“type”: “header”,
“content”: “Menus”
},
{
“type”: “link_list”,
“id”: “main_linklist”,
“label”: “Main menu”,
“default”: “main-menu”
},
{
“type”: “link_list”,
“id”: “main_linklist2”,
“label”: “Secondary menu”
},
{
“type”: “checkbox”,
“id”: “vertical_menu”,
“label”: “Enable vertical menus”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “dropdown_click”,
“label”: “Open dropdowns on click instead of hover”,
“default”: false
},
{
“type”: “header”,
“content”: “Search”
},
{
“type”: “checkbox”,
“id”: “search_enabled”,
“label”: “Show search”,
“default”: true
},
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “checkbox”,
“id”: “fixed_header”,
“label”: “Fixed (‘sticky’) header”,
“default”: true
},
{
“type”: “select”,
“id”: “logo_position”,
“label”: “Logo position”,
“info”: “Applies when menu position has been set to ‘Inline with logo’”,
“default”: “center”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
}
]
},
{
“type”: “select”,
“id”: “logo_alignment”,
“label”: “Logo alignment”,
“info”: “Applies when menu position has been set to ‘Under logo’”,
“default”: “center”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
}
]
},
{
“type”: “select”,
“id”: “menu_position”,
“label”: “Menu position”,
“default”: “inline”,
“options”: [
{
“value”: “inline”,
“label”: “Inline with logo”
},
{
“value”: “block”,
“label”: “Under logo”
}
]
},
{
“type”: “select”,
“id”: “menu_alignment”,
“label”: “Menu alignment”,
“default”: “align_left”,
“options”: [
{
“value”: “align_left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “align_right”,
“label”: “Right”
}
]
}
]
}

{% endschema %}

Paul_Castle · January 11, 2023, 4:33pm

Hi Litos. here is the code…

{% comment %} Structured data {% endcomment %}

{% if template.name == ‘index’ %}

{% endif %}

{%- assign locale_selector = false -%}
{%- assign currency_selector = false -%}

{%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
{%- assign currency_selector = true -%}
{%- endif -%}

{%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}

{% comment %}Mobile navigation{% endcomment %}

{% if section.settings.promo_text != blank %}

{% endif %}

{% if section.settings.phone_number != blank %}

{{ section.settings.phone_number }}

{% if shop.customer_accounts_enabled %}
{% if customer %}

{{ customer.name }}
{{ 'layout.customer.log_out' | t }}
{{ 'layout.customer.log_in' | t }}

{% if locale_selector or currency_selector or settings.show_multiple_currencies == true %}
{%
render ‘localization-switcher-mobile’,
additional_classes: ‘mobile-menu__disclosure’,
currency_selector: currency_selector,
locale_selector: locale_selector,
show_currency: section.settings.show_currency_selector,
%}
{% endif %}

{% if section.settings.logo_mobile != blank %} {{ shop.name | escape }}

{% elsif section.settings.logo != blank %} {{ shop.name | escape }}

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

{% if section.settings.search_enabled %} {% endif %}

{% if section.settings.show_cart %}

{% endif %}

{% if section.settings.search_enabled %}

{% endif %}

{% if template contains “index” %}
{%- assign feature_image = true -%}
{% elsif template contains “collection” %}
{%- assign feature_image = true -%}
{% elsif template contains “blog” %}
{%- assign feature_image = true -%}
{% elsif template contains “article” %}
{%- assign feature_image = true -%}
{% elsif template contains “contact” %}
{%- assign feature_image = true -%}
{% elsif template contains “product” %}
{%- assign feature_image = true -%}
{% elsif template contains “gallery” %}
{%- assign feature_image = true -%}
{% elsif template contains “banner” %}
{%- assign feature_image = true -%}
{% elsif template contains “faq” %}
{%- assign feature_image = true -%}
{% elsif template contains “search” %}
{%- assign feature_image = true -%}
{% elsif template contains “cart” %}
{%- assign feature_image = true -%}
{% else %}
{%- assign feature_image = false -%}
{% endif %}

{% comment %}Main navigation{% endcomment %}

{% if section.settings.promo_text != blank %}

{% endif %}

{% if section.settings.social_icons_header %} {% render 'social-icons' %} {% endif %}

{{ section.settings.phone_number }}

{% if section.settings.top_bar_menu != blank %}
{% for link in linklists[section.settings.top_bar_menu].links %}

{{ link.title }}

{% render 'localization-switcher', additional_classes: 'header-menu__disclosure', id: 'header__selector-form', currency_selector: currency_selector, locale_selector: locale_selector, show_currency: section.settings.show_currency_selector %}

{% if shop.customer_accounts_enabled %}

{% if customer %}{{ 'layout.customer.my_account' | t }}{% else %}{{ 'layout.customer.log_in' | t }}{% endif %}

{% if section.settings.show_cart %}

{% unless settings.cart_action == ‘ajax’ and template contains ‘cart’ %}

{% for item in cart.items %}
{% if item.variant.compare_at_price > item.variant.price %}
{%- assign saving = item.variant.compare_at_price | minus: item.variant.price | times: item.quantity -%}
{%- assign total_saving = saving | plus: total_saving -%}
{% endif %}

{% if item.image %}

{% endif %}

{{ item.product.title }} {% unless item.product.has_only_default_variant or item.variant.title contains "Title" %} - {% for option in item.product.options %} {{ item.variant.options[forloop.index0] }} {% unless forloop.last %}/{% endunless %} {% endfor %} {% endunless %}
{% if item.selling_plan_allocation.selling_plan %}

{{ item.selling_plan_allocation.selling_plan.name }}
{% endif %}
{% if item.properties %}
{% for p in item.properties %}
{% if p.last != blank %}

{{ p.first }}: {{ p.last }}
{% endif %} {% endfor %} {% endif %}

{% if item.price > 0 %} {% render 'price-element', price: item.final_price %}
{% if item.price < item.variant.compare_at_price or item.line_level_discount_allocations.size > 0 %}

{%
render ‘price-element’,
price: item.variant.compare_at_price
%}

{% endif %}
{% else %}
{{ settings.free_price_text }}
{% endif %}

{%
render ‘unit-price’,
item: item,
variant: item.variant,
product: item.product,
class: ‘mini-cart__unit-price’
%}

{% if item.line_level_discount_allocations.size > 0 %}
{% for discount_allocation in item.line_level_discount_allocations %}

{{ discount_allocation.discount_application.title }}
{% endfor %} {% endif %}

<input type=“number” min=“0” size=“2” class=“quantity” name=“updates” id=“updates_{{ item.id }}” value=“{{ item.quantity }}” data-cart-quantity-input=“mini-cart” {% if settings.limit_quantity and item.variant.inventory_management != blank and item.variant.inventory_quantity > 0 and item.variant.inventory_policy == “deny” %}max=“{{ item.variant.inventory_quantity }}”{% endif %}/>

{% if cart.cart_level_discount_applications != blank %} {% for discount_application in cart.cart_level_discount_applications %} {{ discount_application.title }} - {% render 'price-element', price: discount_application.total_allocated_amount %} {% endfor %} {% endif %}
{% render 'price-element', price: cart.total_price %}
{{ ‘layout.general.subtotal’ | t }}
{% if settings.display_savings and total_saving > 0 or settings.display_savings and cart.total_discount > 0 %} {% assign total_savings = total_saving | plus: cart.total_discount %} {% render 'price-element', price: total_savings %}
{{ ‘layout.general.savings’ | t }}
{% endif %}
{%- capture taxes_shipping_checkout -%} {%- if cart.taxes_included and shop.shipping_policy.body != blank -%} {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }} {%- elsif cart.taxes_included -%} {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }} {%- elsif shop.shipping_policy.body != blank -%} {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }} {%- else -%} {{ 'cart.general.tax_and_shipping' | t }} {%- endif -%} {%- endcapture -%}
{{ taxes_shipping_checkout }}
{% if settings.display_special_instructions and settings.go_to_checkout %} {{ cart.note }} {% endif %}
{% if settings.display_tos_checkbox and settings.go_to_checkout %}

{{ 'cart.general.agree_to_terms_html' | t }}
{% if settings.tos_page != blank %}
{{ ‘cart.general.view_terms’ | t }}
{% endif %}

{% endif %}
{% if settings.cart_message != blank %}

{{ settings.cart_message }}
{% endif %}
{% if settings.go_to_checkout %}
{% if settings.show_lock_icon %}{% endif %}{{ ‘layout.general.checkout’ | t }}
{% else %}
{% if settings.show_lock_icon and settings.go_to_checkout %}{% endif %}{{ ‘layout.general.go_to_cart’ | t }}
{% endif %}

{% endunless %}

{% endif %}

{% capture logo %}

{% if section.settings.logo_home != blank %} {{ shop.name | escape }}

{% endif %}

{% if section.settings.logo != blank %}
{{ shop.name | escape }}
{% else %}
{{ shop.name }}
{% endif %}

{% endcapture %}

{% assign menu_style = ‘wide’ %}
{% if section.settings.vertical_menu %}
{% assign menu_style = ‘vertical’ %}
{% endif %}

{% capture menu_left %}
{%
render ‘navigation-desktop’,
menu: section.settings.main_linklist,
style: menu_style,
%}
{% endcapture %}

{% capture menu_right %}
{%
render ‘navigation-desktop’,
menu: section.settings.main_linklist2,
style: menu_style,
%}
{% endcapture %}

{% capture search %}
{% if section.settings.search_enabled %}

{% endif %} {% endcapture %}

{% if section.settings.menu_position == ‘inline’ %}
{% if section.settings.logo_position == ‘left’ %}
{{ logo }}

{{ search }}
{% else %}

{{ search }}
{% endif %}
{% else %}
{{ logo }}

{% endif %}

{% comment %}
If JS is disabled we always want the non-feature_image style,
but we add these dynamically here to avoid waiting for the main
bundle to load. This prevents styling jumps for the majority,
who do use JS.

After the bundle loads, separate code toggles these classes during
editor events, etc.
{% endcomment %}

div.header__logo, div.header__logo img, div.header__logo span, .sticky_nav .menu-position--block .header__logo { max-width: {{ section.settings.logo_display_width | append: 'px' }}; }

{% schema %}
{
“name”: “Header”,
“class”: “shopify-section–header”,
“settings”: [
{
“type”: “header”,
“content”: “Announcement bar”
},
{
“type”: “richtext”,
“id”: “promo_text”,
“label”: “Text”,
“info”: “Maximum character limit is 170”
},
{
“type”: “header”,
“content”: “Top bar”
},
{
“type”: “checkbox”,
“id”: “social_icons_header”,
“label”: “Show social media header icons”,
“default”: true
},
{
“type”: “text”,
“id”: “phone_number”,
“label”: “Phone number”,
“info”: “1-800-555-5555”
},
{
“type”: “link_list”,
“id”: “top_bar_menu”,
“label”: “Menu”,
“info”: “This menu won’t show drop-down items”
},
{
“type”: “checkbox”,
“id”: “show_cart”,
“label”: “Show cart”,
“default”: true
},
{
“type”: “select”,
“id”: “cart_icon”,
“label”: “Cart icon”,
“default”: “cart”,
“options”: [
{
“value”: “cart”,
“label”: “Cart”
},
{
“value”: “bag”,
“label”: “Bag”
}
]
},
{
“type”: “header”,
“content”: “Language selector”,
“info”: “To add a language, go to your language settings.”
},
{
“type”: “checkbox”,
“id”: “show_locale_selector”,
“label”: “Show language selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Country selector”,
“info”: “To add a country, go to your payment settings.”
},
{
“type”: “checkbox”,
“id”: “show_currency_selector”,
“label”: “Show country selector”,
“default”: true
},
{
“type”: “header”,
“content”: “Logos”
},
{
“type”: “range”,
“id”: “logo_display_width”,
“label”: “Logo display width”,
“step”: 5,
“min”: 105,
“max”: 205,
“default”: 205,
“unit”: “px”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo”,
“info”: “400 x 200px recommended”
},
{
“type”: “image_picker”,
“id”: “logo_home”,
“label”: “Secondary logo over content (optional)”,
“info”: “400 x 200px recommended”
},
{
“type”: “image_picker”,
“id”: “logo_mobile”,
“label”: “Mobile logo”,
“info”: “100 x 50px recommended”
},
{
“type”: “header”,
“content”: “Menus”
},
{
“type”: “link_list”,
“id”: “main_linklist”,
“label”: “Main menu”,
“default”: “main-menu”
},
{
“type”: “link_list”,
“id”: “main_linklist2”,
“label”: “Secondary menu”
},
{
“type”: “checkbox”,
“id”: “vertical_menu”,
“label”: “Enable vertical menus”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “dropdown_click”,
“label”: “Open dropdowns on click instead of hover”,
“default”: false
},
{
“type”: “header”,
“content”: “Search”
},
{
“type”: “checkbox”,
“id”: “search_enabled”,
“label”: “Show search”,
“default”: true
},
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “checkbox”,
“id”: “fixed_header”,
“label”: “Fixed (‘sticky’) header”,
“default”: true
},
{
“type”: “select”,
“id”: “logo_position”,
“label”: “Logo position”,
“info”: “Applies when menu position has been set to ‘Inline with logo’”,
“default”: “center”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
}
]
},
{
“type”: “select”,
“id”: “logo_alignment”,
“label”: “Logo alignment”,
“info”: “Applies when menu position has been set to ‘Under logo’”,
“default”: “center”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
}
]
},
{
“type”: “select”,
“id”: “menu_position”,
“label”: “Menu position”,
“default”: “inline”,
“options”: [
{
“value”: “inline”,
“label”: “Inline with logo”
},
{
“value”: “block”,
“label”: “Under logo”
}
]
},
{
“type”: “select”,
“id”: “menu_alignment”,
“label”: “Menu alignment”,
“default”: “align_left”,
“options”: [
{
“value”: “align_left”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “align_right”,
“label”: “Right”
}
]
}
]
}

{% endschema %}

Paul_Castle · January 15, 2023, 12:26pm

Would very much appreciate help with this. Many thanks.

Litos · January 15, 2023, 3:17pm

Hi @Paul_Castle ,

Please follow the steps below:

Step 1: Go to Metafields > Collections > Add definition. You need to create metafield to save logo for each collection:

Step 2: Go to each collection and upload the logo:

Step 3: Change all code header.liquid file:


{% comment %} Structured data {% endcomment %}

{% if template.name == 'index' %}

{% endif %}

{%- assign locale_selector = false -%}
{%- assign currency_selector = false -%}

{%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
{%- assign currency_selector = true -%}
{%- endif -%}

{%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}

{% comment %}Mobile navigation{% endcomment %}

{% if template contains "index" %}
{%- assign feature_image = true -%}
{% elsif template contains "collection" %}
{%- assign feature_image = true -%}
{% elsif template contains "blog" %}
{%- assign feature_image = true -%}
{% elsif template contains "article" %}
{%- assign feature_image = true -%}
{% elsif template contains "contact" %}
{%- assign feature_image = true -%}
{% elsif template contains "product" %}
{%- assign feature_image = true -%}
{% elsif template contains "gallery" %}
{%- assign feature_image = true -%}
{% elsif template contains "banner" %}
{%- assign feature_image = true -%}
{% elsif template contains "faq" %}
{%- assign feature_image = true -%}
{% elsif template contains "search" %}
{%- assign feature_image = true -%}
{% elsif template contains "cart" %}
{%- assign feature_image = true -%}
{% else %}
{%- assign feature_image = false -%}
{% endif %}

{% comment %}Main navigation{% endcomment %}

{% comment %}
If JS is disabled we always want the non-feature_image style,
but we add these dynamically here to avoid waiting for the main
bundle to load. This prevents styling jumps for the majority,
who do use JS.

After the bundle loads, separate code toggles these classes during
editor events, etc.
{% endcomment %}

{% schema %}
{
"name": "Header",
"class": "shopify-section--header",
"settings": [
{
"type": "header",
"content": "Announcement bar"
},
{
"type": "richtext",
"id": "promo_text",
"label": "Text",
"info": "Maximum character limit is 170"
},
{
"type": "header",
"content": "Top bar"
},
{
"type": "checkbox",
"id": "social_icons_header",
"label": "Show social media header icons",
"default": true
},
{
"type": "text",
"id": "phone_number",
"label": "Phone number",
"info": "1-800-555-5555"
},
{
"type": "link_list",
"id": "top_bar_menu",
"label": "Menu",
"info": "This menu won't show drop-down items"
},
{
"type": "checkbox",
"id": "show_cart",
"label": "Show cart",
"default": true
},
{
"type": "select",
"id": "cart_icon",
"label": "Cart icon",
"default": "cart",
"options": [
{
"value": "cart",
"label": "Cart"
},
{
"value": "bag",
"label": "Bag"
}
]
},
{
"type": "header",
"content": "Language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Country selector",
"info": "To add a country, go to your [payment settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show country selector",
"default": true
},
{
"type": "header",
"content": "Logos"
},
{
"type": "range",
"id": "logo_display_width",
"label": "Logo display width",
"step": 5,
"min": 105,
"max": 205,
"default": 205,
"unit": "px"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo",
"info": "400 x 200px recommended"
},
{
"type": "image_picker",
"id": "logo_home",
"label": "Secondary logo over content (optional)",
"info": "400 x 200px recommended"
},
{
"type": "image_picker",
"id": "logo_mobile",
"label": "Mobile logo",
"info": "100 x 50px recommended"
},
{
"type": "header",
"content": "Menus"
},
{
"type": "link_list",
"id": "main_linklist",
"label": "Main menu",
"default": "main-menu"
},
{
"type": "link_list",
"id": "main_linklist2",
"label": "Secondary menu"
},
{
"type": "checkbox",
"id": "vertical_menu",
"label": "Enable vertical menus",
"default": false
},
{
"type": "checkbox",
"id": "dropdown_click",
"label": "Open dropdowns on click instead of hover",
"default": false
},
{
"type": "header",
"content": "Search"
},
{
"type": "checkbox",
"id": "search_enabled",
"label": "Show search",
"default": true
},
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "fixed_header",
"label": "Fixed ('sticky') header",
"default": true
},
{
"type": "select",
"id": "logo_position",
"label": "Logo position",
"info": "Applies when menu position has been set to 'Inline with logo'",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
]
},
{
"type": "select",
"id": "logo_alignment",
"label": "Logo alignment",
"info": "Applies when menu position has been set to 'Under logo'",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
]
},
{
"type": "select",
"id": "menu_position",
"label": "Menu position",
"default": "inline",
"options": [
{
"value": "inline",
"label": "Inline with logo"
},
{
"value": "block",
"label": "Under logo"
}
]
},
{
"type": "select",
"id": "menu_alignment",
"label": "Menu alignment",
"default": "align_left",
"options": [
{
"value": "align_left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "align_right",
"label": "Right"
}
]
}
]
}

{% endschema %}

Topic		Replies	Views
Dynamic header Logo based on Collection or Product - Dawn Theme Store Design design , header , customizations , collection-page , third-party-themes	0	5	December 15, 2023
Broadcast - Cart aligned with announcement bar instead of logo Store Design	5	8	August 31, 2021
How To Move The Announcement Bar Inbetween The Logo And The Navigation Menu? Store Design	4	72	October 22, 2022
How can I have a different logo on homepage only? (Dawn theme) Technical Q&A	35	2	October 21, 2023
Symmetry theme: Need to add store name below the logo in the header Store Design	15	86	April 26, 2021

Change Header Logo for One Collection or Template - OOTS Turbo Theme

Related topics