Shopify themes, liquid, logos, and UX
morning everyone,
i need to hide the cart icon on the right side of the header, and put it the “shop” voice in his place.
The “shop” should be bring the user to another site.
Thank you very much.
hi, @Ste_cor , you should provide store url
if you have also development knowledges then modify the liquid code of your cart in the header
Thank you
Hi @Ste_cor,
What theme are you using? Please send me the theme name, and I will check it for you
http://hidden-garage-label.myshopify.com
I'm using Baseline theme 2.6.1., made by Switch themes.
Hi @Ste_cor,
Please send me the code of header.liquid file, I will check it for you
{%- comment -%}
This is a required section for the Shopify Theme Store.
It is available in the "Header" section in the theme editor.
Theme Store required settings
- Show announcement
- Text: message to announce
- Link: link of the announcement bar
Theme Store optional settings
- Home page only: only shows on the home page
{%- endcomment -%}
{%- liquid
assign layout = section.settings.layout
assign section_color = 'header'
assign overlay_text_color = section.settings.overlay_text_color
assign show_icons = section.settings.show_icons
assign link_all = section.settings.show_all_navigation_links
if section.settings.overlay_homepage and template.name == 'index'
assign overlay_header = true
if section.settings.sticky_header
assign overlay_header_with_sticky = true
else
assign overlay_header_without_sticky = true
endif
endif
assign drop_down_cols_position = 'justify-center'
if section.settings.layout contains 'menu_left'
assign drop_down_cols_position = 'justify-start'
endif
-%}
<style>
[data-color-scheme="header"] {
--color-scheme-accent: var(--color-{{ section.settings.color_scheme }}-accent);
--color-scheme-text: var(--color-{{ section.settings.color_scheme }}-text);
--color-scheme-background: var(--color-{{ section.settings.color_scheme }}-background);
--color-scheme-background-hex: var(--color-{{ section.settings.color_scheme }}-background-hex);
--color-scheme-background-0: var(--color-{{ section.settings.color_scheme }}-background-0);
--color-scheme-meta: var(--color-{{ section.settings.color_scheme }}-meta);
--color-scheme-text--overlay: var(--color-{{ section.settings.color_scheme }}-text--overlay);
--color-scheme-accent--overlay: var(--color-{{ section.settings.color_scheme }}-accent--overlay);
--color-scheme-accent-placeholder: var(--color-{{ section.settings.color_scheme }}-text-placeholder);
}
</style>
{% comment %}
Logo
{% endcomment %}
{%- capture header_logo %}
{% if template.name == 'index' %}
<h1 class="">
{% else %}
<div class="h1">
{% endif %}
<a href="{{ routes.root_url }}" class="inline-block py-2 logo-image break-all">
{% if section.settings.logo != blank %}
{%- assign logo = section.settings.logo -%}
{% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
{%- unless overlay_header_without_sticky and section.settings.overlay_logo != blank -%}
<img src="{{ logo | img_url: image_size }}"
srcset="{{ logo | img_url: image_size }} 1x, {{ logo | img_url: image_size, scale: 2 }} 2x, {{ logo | img_url: image_size, scale: 3 }} 3x"
alt="{{ logo.alt | default: shop.name }}"
{% if overlay_header_with_sticky and section.settings.overlay_logo != blank %}x-show="headerIsStuck"{% endif %}>
{%- endunless -%}
{%- if overlay_header and section.settings.overlay_logo != blank -%}
{%- assign logo = section.settings.overlay_logo -%}
<img src="{{ logo | img_url: image_size }}"
srcset="{{ logo | img_url: image_size }} 1x, {{ logo | img_url: image_size, scale: 2 }} 2x, {{ logo | img_url: image_size, scale: 3 }} 3x"
alt="{{ logo.alt | default: shop.name }}"
{% if overlay_header_with_sticky %}x-show="!headerIsStuck"{% endif %}>
{%- endif -%}
{% else %}
{{ shop.name }}
{% endif %}
</a>
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
{%- endcapture -%}
{% comment %}
Regular Nav
{% endcomment %}
{% comment %}theme-check-disable LiquidTag{% endcomment %}
{%- capture header_menu %}
{%- liquid
assign menu_style = layout | split: 'menu_' | last
assign counter = 0
if menu_style == 'center' or menu_style == 'below'
assign list_classes = 'justify-center -ml-4'
assign item_classes = 'ml-4'
elsif menu_style == 'left'
assign list_classes = 'justify-start'
assign item_classes = 'mr-4'
elsif menu_style == 'right'
assign list_classes = 'justify-end'
assign item_classes = 'ml-4'
endif
-%}
{%- unless layout contains 'spread' -%}
<ul class="flex flex-wrap self-stretch items-stretch {{ list_classes }}">
{%- endunless -%}
{%- for link in linklists[section.settings.menu].links -%}
{%- assign child_menu = '' -%}
{%- assign grandchild_menu = '' -%}
{%- if link.links != blank -%}
{%- if link_all -%}
{% capture link_dropdown %}
<div class="ml-16">
<a {% if link.active %}aria-current="page"{% endif %} class="inline-block font-heading py-1" href="{{ link.url }}">
{{ link.title }}
</a>
</div>
{% endcapture %}
{%- endif -%}
{%- for child_link in link.links -%}
{%- if link.levels == 2 -%}
{% if child_link.links != blank %}
{%- capture grandchild_menu %}
{{- grandchild_menu -}}
<div class="ml-16">
<h2 class="font-heading mb-2">
{% if link_all %}<a {% if child_link.active %}aria-current="page"{% endif %} class="inline-block py-1" href="{{ child_link.url }}" {% if child_link.active %}aria-current="page"{% endif %}>{% endif %}
{{ child_link.title }}
{% if link_all %}</a>{% endif %}
</h2>
<ul>
{%- for grandchild_link in child_link.links -%}
<li class="">
<a {% if grandchild_link.active %}aria-current="page"{% endif %} class="inline-block py-1" href="{{ grandchild_link.url }}">{{ grandchild_link.title }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endcapture -%}
{%- else -%}
{%- capture child_menu %}
{{- child_menu -}}
<li class="">
<a {% if child_link.active %}aria-current="page"{% endif %} class="inline-block py-1" href="{{ child_link.url }}">{{ child_link.title }}</a>
</li>
{%- endcapture -%}
{%- endif -%}
{%- else -%}
{% comment %}Only second level template {% endcomment %}
{%- capture child_menu %}
{{- child_menu -}}
<li class="inline-block ml-4">
<a {% if child_link.active %}aria-current="page"{% endif %} class="inline-block py-2" href="{{ child_link.url }}">{{ child_link.title }}</a>
</li>
{%- endcapture -%}
{%- endif -%}
{%- endfor -%}
{%- unless layout contains 'spread' -%}
<li class="self-stretch flex {{ item_classes }}">
{%- endunless -%}
<div class="self-stretch flex no-js-focus-wrapper">
<button class="inline-block py-2 flex items-center {% if settings.header_uppercase %}uppercase{% endif %}"
@Click="openMenu({{ counter }})"
x-bind:aria-expanded="menuOpen.menu{{ counter }}? true: 'false'"
aria-controls="menu{{ counter }}">
<span class="inline-block pr-1">{{ link.title }}</span>
<span class="inline-block align-middle svg-scale mr-1 transform origin-center rotate transition" :class="{'rotate-180': menuOpen.menu{{ counter }}}">{% render 'icon-chevron-down' %}</span>
</button>
<div class="no-js-focus-container absolute left-0 bottom-0 w-full transform translate-y-full z-20 bg-scheme-background text-scheme-text border-t-grid border-b-grid border-grid-color"
id="menu{{ counter }}"
x-cloak
x-show="menuOpen.menu{{ counter }}"
x-transition:enter="transition ease duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease duration-00"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
data-header-dropdown
@focusout="focusOut($event, 'menu{{ counter }}')"
@Click.away.prevent="menuOpen.menu{{ counter }} = false"
data-color-scheme="{{ section_color }}">
<div class="section-x-padding text-{{ section.settings.dropdown_text_align }}">
{%- if child_menu != blank and grandchild_menu == blank -%}
<ul class="-ml-4 py-2">
{{ child_menu }}
</ul>
{%- elsif child_menu != blank -%}
<div class="flex py-4 {{ drop_down_cols_position }} -ml-16">
{{ link_dropdown }}
<ul class="ml-16">
{{ child_menu }}
</ul>
{{ grandchild_menu }}
</div>
{% else -%}
<div class="flex py-4 -ml-16 {{ drop_down_cols_position }} -ml-16">
{{ link_dropdown }}
{{ grandchild_menu }}
</div>
{%- endif -%}
</div>
</div>
</div>
{%- unless layout contains 'spread' -%}
</li>
{%- endunless -%}
{% assign counter = counter | plus: 1 %}
{%- else -%}
{%- unless layout contains 'spread' -%}
<li class="inline-flex flex items-stretch {{ item_classes }}">
{%- endunless -%}
<a {% if link.active %}aria-current="page"{% endif %} class="flex py-2 relative {% if layout contains 'spread' %}self-stretch flex flex-col inline-block{% endif %}" href="{{ link.url }}">
<span class="inline-block m-auto">{{ link.title }}</span>
{%- if link.active -%}
<span class="block w-theme-width h-2 bg-border absolute -bottom-2 left-1/2 -translate-x-1/2"></span>
{%- endif -%}
</a>
{%- unless layout contains 'spread' -%}
</li>
{%- endunless -%}
{%- endif -%}
{%- endfor -%}
</ul>
{% comment %}theme-check-enable LiquidTag{% endcomment %}
{%- endcapture -%}
{%- capture header_menu_toggle -%}
<button class="js-enabled inline-block py-2 {% if settings.header_uppercase %}uppercase{% endif %}"
x-bind:aria-expanded="$store.drawer.menuDrawerOpen"
@Click="$store.drawer.menuDrawerOpen = !$store.drawer.menuDrawerOpen"
data-menu-drawer-toggle>
{%- if show_icons -%}
<span class="visually-hidden">{{ 'layout.navigation.menu' | t }}</span>
<span class="inline-block w-5 h-5 align-middle">{%- render 'icon-menu' -%}</span>
{%- else -%}
{{ 'layout.navigation.menu' | t }}
{%- endif -%}
</button>
{%- endcapture -%}
{% comment %}
Accounts
{% endcomment %}
{% if shop.customer_accounts_enabled %}
{%- capture customer_accounts %}
{% if customer %}
<a class="inline-block py-2 flex {% if layout contains 'spread'%}h-full{% endif %}" href="{{ routes.account_url }}">
{%- if show_icons -%}
<span class="visually-hidden">{{ 'layout.customer.account' | t }}</span>
<span class="my-auto inline-block w-5 h-5 align-middle">{%- render 'icon-account' -%}</span>
{%- else -%}
<span class="my-auto">{{ 'layout.customer.account' | t }}</span>
{%- endif -%}
</a>
{% else %}
<a class="inline-block py-2 flex {% if layout contains 'spread'%}h-full{% endif %}" href="{{ routes.account_login_url }}">
{%- if show_icons -%}
<span class="visually-hidden">{{ 'layout.customer.log_in' | t }}</span>
<span class="my-auto inline-block w-5 h-5 align-middle">{%- render 'icon-account' -%}</span>
{%- else -%}
<span class="my-auto">{{ 'layout.customer.log_in' | t }}</span>
{%- endif -%}
</a>
{% endif %}
{%- endcapture -%}
{% endif %}
{% comment %}
Cart
{% endcomment %}
{%- capture header_cart %}
<a href="{{ routes.cart_url }}"
class="inline-block py-2 flex {% if settings.header_uppercase %}uppercase{% endif %}{% if layout contains 'spread'%} h-full{% endif %}"
{% if settings.ajax_cart_method == 'drawer' %}
data-cart-drawer-toggle
x-bind:aria-expanded="$store.drawer.cartDrawerOpen"
@Click.prevent="$store.drawer.cartOpener = $event.currentTarget; $store.drawer.cartDrawerOpen = !$store.drawer.cartDrawerOpen"
@keydown.space="$store.drawer.cartOpener = $event.currentTarget; $store.drawer.cartDrawerOpen = !$store.drawer.cartDrawerOpen"
{% endif %}
>
{%- if show_icons -%}
<div class="relative my-auto align-middle">
<span x-show="$store.cartCount.count > 0" class="absolute top-1 right-0 w-2 h-2 rounded-full bg-scheme-accent" data-color-scheme="{{ section_color }}"></span>
<span class="inline-block w-5 h-5 fill-current align-top">{%- render 'icon-cart' -%}</span>
<span class="visually-hidden" x-text="$store.cartCount.countWithText()"></span>
</div>
{%- else -%}
<span class="my-auto">{{ 'layout.cart.title' | t }} (<span x-text="$store.cartCount.count" data-cart-count>{{ cart.item_count }}</span>)</span>
{%- endif -%}
</a>
{%- endcapture -%}
<a class="in-page-link skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>
<section
x-data="ThemeSection_header()"
x-init="mounted()"
data-section-id="{{ section.id }}"
data-section-type="header"
data-dropdown-count="{{ counter }}"
class="{% if overlay_header %}absolute top-0 left-0 right-0 z-50{% endif %}"
{% if section.settings.sticky_header %}data-sticky="true"{% endif %}
data-color-scheme="{{ section_color }}"
data-overlay-header-with-sticky="{{ overlay_header_with_sticky | default: false }}"
data-overlay-text-color="{{ overlay_text_color }}"
>
<header
x-ref="header"
class="border-b-grid relative z-10 text-scheme-text border-scheme-text {% unless overlay_header %}border-theme-color bg-scheme-background{% endunless %}"
data-color-scheme="{%- if overlay_header_without_sticky -%}{{ overlay_text_color }}{%- else -%}{{ section_color }}{%- endif -%}">
<nav class="relative hidden {% if settings.header_uppercase %}uppercase{% endif %} {% unless layout contains 'menu_drawer' %}lg:block{% endunless %}" aria-label="Primary">
<div class="section-x-padding flex items-stretch justify-between {% if layout contains 'spread' %}flex-wrap{% endif %} py-2">
<div class="flex items-stretch {% if layout contains 'center' %}flex-grow w-1/3{% endif %}">
{% if layout contains 'logo_left' %}
<div class="{% unless layout contains 'spread' %}mr-6{% endunless %}">
{{ header_logo }}
</div>
{% endif %}
{% if layout contains 'menu_left' %}
{{ header_menu }}
{% endif %}
</div>
{% if layout contains 'menu_spread' %}
{{ header_menu }}
{% elsif layout contains 'center' %}
<div class="{% unless layout contains 'logo_center' %}flex-grow w-1/3 lg:w-3/4{% endunless %} flex items-stretch justify-center text-center">
{% if layout contains 'logo_center' %}
{{ header_logo }}
{% endif %}
{% if layout contains 'menu_center' %}
{{ header_menu }}
{% endif %}
</div>
{% endif %}
{%- if shop.customer_accounts_enabled and layout == 'logo_left_menu_spread' and show_icons == false -%}
<div class="{% unless layout contains 'spread' %}ml-4 flex items-stretch{% endunless %} whitespace-nowrap">
{{ customer_accounts }}
</div>
{%- endif -%}
{% if section.settings.show_search and layout == 'logo_left_menu_spread' and show_icons == false %}
<div class="{% unless layout contains 'spread' %}ml-4 flex items-stretch{% endunless %} whitespace-nowrap">
{% render 'header-search',
layout: layout,
section_color: section_color,
show_icons: show_icons
%}
</div>
{%- endif -%}
<div class="flex items-stretch justify-end text-right {% if layout contains 'center' %}flex-grow w-1/3{% endif %}">
{%- liquid
if layout contains 'menu_right'
echo header_menu
endif
assign show_extras = false
if layout != 'logo_left_menu_spread'
assign show_extras = true
endif
if layout == 'logo_left_menu_spread' and show_icons
assign show_extras = true
endif
-%}
{%- if shop.customer_accounts_enabled and show_extras -%}
<div class="ml-4 whitespace-nowrap flex items-stretch">
{{ customer_accounts }}
</div>
{%- endif -%}
{% if section.settings.show_search and show_extras %}
<div class="ml-4 whitespace-nowrap flex items-stretch">
{% render 'header-search',
layout: layout,
section_color: section_color,
show_icons: show_icons
%}
</div>
{% endif %}
<div class="{% if show_extras %}ml-4{% endif %} flex items-stretch whitespace-nowrap">
{{ header_cart }}
</div>
</div>
</div>
{% if layout contains 'menu_below' %}
<div class="section-x-padding flex items-center justify-center py-2 border-t-grid border-grid-color">
{{ header_menu }}
</div>
{% endif %}
</nav>
{% comment %}
Mobile Nav
{% endcomment %}
<div class="{% unless layout contains 'menu_drawer' %}lg:hidden{% endunless %}{% if settings.header_uppercase %} uppercase{% endif %}">
<div class="lg:relative section-x-padding flex items-center justify-between py-2">
<div class="flex items-center {% if layout contains 'logo_center' %}flex-grow w-1/3{% endif %}">
{% if layout contains 'logo_left' %}
<div class="mr-4">
{{ header_logo }}
</div>
{% endif %}
{% if layout contains 'logo_center' %}
{{ header_menu_toggle }}
{% endif %}
</div>
{% if layout contains 'logo_center' %}
<div class="justify-center text-center shrink-0">
{{ header_logo }}
</div>
{% endif %}
<div class="flex justify-end text-right {% if layout contains 'logo_center' %}flex-grow w-1/3{% endif %}">
{% if layout contains 'logo_left' %}
{{ header_menu_toggle }}
{% endif %}
{% if layout contains 'menu_drawer' %}
{%- if shop.customer_accounts_enabled -%}
<div class="hidden lg:block whitespace-nowrap ml-4">
{{ customer_accounts }}
</div>
{%- endif -%}
{% endif %}
{% if section.settings.show_search %}
<div class="whitespace-nowrap ml-2 lg:ml-4 ">
{% render 'header-search',
layout: layout,
section_color: section_color,
show_icons: show_icons,
location: 'mobile'
%}
</div>
{% endif %}
<div class="ml-2 lg:ml-4 whitespace-nowrap">
{{ header_cart }}
</div>
</div>
</div>
</div>
</header>
</section>
{% if settings.enable_breadcrumbs %}
{% render 'breadcrumbs', section_color: 'header' %}
{% endif %}
<noscript>
<style>
.no-js-focus-wrapper:focus-within .no-js-focus-container {
display: block !important;
}
{% if layout == 'logo_center_menu_drawer' %}
.section-sidebar {
display: block !important;
}
{%- endif -%}
</style>
</noscript>
<style>
{% if section.settings.sticky_header %}
.section-header {
position: sticky;
top: 0;
z-index: 30;
}
:root {
--sticky-header-height: 66px;
}
{% else %}
:root {
--sticky-header-height: 0;
}
{% endif %}
</style>
{% if section.settings.logo != blank %}
<style>
.logo-image {
display: block;
max-width: {{ section.settings.logo_max_width }}px;
}
</style>
{% endif %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "{{ shop.name }}",
{% if section.settings.logo %}
{% assign image_size = section.settings.logo.width | append: 'x' %}
"logo": "https:{{ section.settings.logo | img_url: image_size }}",
{% endif %}
"sameAs": [
"{{ settings.social_twitter_link }}",
"{{ settings.social_facebook_link }}",
"{{ settings.social_pinterest_link }}",
"{{ settings.social_instagram_link }}",
"{{ settings.social_tumblr_link }}",
"{{ settings.social_snapchat_link }}",
"{{ settings.social_youtube_link }}",
"{{ settings.social_vimeo_link }}"
],
"url": "{{ shop.url }}{{ page.url }}"
}
</script>
{% if template.name == 'index' %}
{% assign potential_action_target = shop.url | append: routes.search_url | append: "?q={search_term_string}" %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ shop.url | append: page.url | json }}
}
</script>
{% endif %}
{% schema %}
{
"name": "Header",
"class": "section-header relative z-20",
"settings": [
{
"type": "header",
"content": "Header"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "range",
"id": "logo_max_width",
"min": 20,
"max": 450,
"step": 10,
"unit": "px",
"label": "Custom logo width",
"default": 250
},
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"default": "main-menu",
"info": "This menu is only displayed on desktop. To change navigation for mobile/drawer menu, go to sidebar settings."
},
{
"type": "select",
"id": "layout",
"options": [
{ "value": "logo_left_menu_left", "label": "Logo left / menu left"},
{ "value": "logo_left_menu_right", "label": "Logo left / menu right"},
{ "value": "logo_left_menu_center", "label": "Logo left / menu center"},
{ "value": "logo_left_menu_spread", "label": "Logo left / menu spread"},
{ "value": "logo_left_menu_below", "label": "Logo left / menu below"},
{ "value": "logo_center_menu_left", "label": "Logo center / menu left"},
{ "value": "logo_center_menu_drawer", "label": "Logo center / menu drawer"}
],
"label": "Desktop layout"
},
{
"type": "select",
"id": "dropdown_text_align",
"options": [
{ "value": "left", "label": "Left"},
{ "value": "center", "label": "Center"},
{ "value": "right", "label": "Right"}
],
"label": "Dropdown text align"
},
{
"type": "checkbox",
"id": "show_all_navigation_links",
"label": "Enable links to drop-down link headings"
},
{
"type": "checkbox",
"id": "show_search",
"label": "Show search"
},
{
"type": "checkbox",
"id": "sticky_header",
"label": "Sticky header"
},
{
"type": "checkbox",
"id": "show_icons",
"label": "Show icons",
"info": "Show icons for menu, search and cart"
},
{
"type": "select",
"id": "color_scheme",
"label": "Color scheme",
"options": [
{ "value": "primary", "label": "Primary"},
{ "value": "secondary", "label": "Secondary"},
{ "value": "tertiary", "label": "Tertiary"}
],
"default": "primary"
},
{
"type": "header",
"content": "Overlay Settings"
},
{
"type": "checkbox",
"id": "overlay_homepage",
"label": "Overlay header over home page"
},
{
"type": "select",
"id": "overlay_text_color",
"label": "Overlay text color",
"options": [
{ "value": "primary", "label": "Primary text"},
{ "value": "secondary", "label": "Secondary text"},
{ "value": "tertiary", "label": "Tertiary text"},
{ "value": "white", "label": "White"},
{ "value": "black", "label": "Black"}
],
"default": "white"
},
{
"type": "image_picker",
"id": "overlay_logo",
"label": "Overlay logo image"
}
]
}
{% endschema %}
Hi @Ste_cor,
You just need to change the link and text here, it will display well:
Thank you Namphan.
This is only for change the link? About hide the cart and profile icons?
Can you help me?
Thank you in advance
Hi @Ste_cor,
Please change all code:
<a href="CART LINK"
class="inline-block py-2 flex {% if settings.header_uppercase %}uppercase{% endif %}{% if layout contains 'spread'%} h-full{% endif %}"
>
<span class="my-auto">SHOP</span>
</a>
Thank you very much Namphan, it works!
Another issue, How can i delete the login button?
It's nearby the shop name however!
Hi @Ste_cor,
Please remove code here:
hello @Ste_cor
can you please share your Website URL
thanks
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024