Shopify themes, liquid, logos, and UX
Hi,
how do i have to change the code to get one logo for the header at homepage and a different one for the header at collection sites?
Im using the debut design. The code underneath is taken from header.liquid.
Please help!
{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name gets precedence with H1 tag on homepage, div on other pages.
{% endcomment %}
{% if request.page_type == 'index' %}
<h1 class="h2 site-header__logo">
{% else %}
<div class="h2 site-header__logo">
{% endif %}
{% if section.settings.logo %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<img class="lazyload js"
src="{{ section.settings.logo | img_url }}"
data-src="{{ img_url }}"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
>
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<img 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 }}"
>
</noscript>
</a>
{% else %}
<a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
Hello @Mototech271 ,
Check the login in the code
{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name gets precedence with H1 tag on homepage, div on other pages.
{% endcomment %}
{% if request.page_type == 'index' %}
<h1 class="h2 site-header__logo">
{% else %}
<div class="h2 site-header__logo">
{% endif %}
{% if section.settings.logo and template == 'index'%}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<img class="lazyload js"
src="{{ section.settings.logo | img_url }}"
data-src="{{ img_url }}"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
>
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<img 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 }}"
>
</noscript>
</a>
{% else %}
<a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}
{% if template != 'index'%}
// Your INNER PAGES LOGO CODE WILL GO HERE
// Once you add the logo code use else for next line
<a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
You can add static code in comment ( Your INNER PAGES LOGO CODE WILL GO HERE ) or you can create another option to upload logo for inner pages parallel to the existing logo settings.
And once you create settings then in place of static code call that logo dynamically in same way as theme existing code for homepage.
Thanks
That worked!
Thank you so much!
Hi please I tried but I think i don understand how to make it work.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024