Shopify themes, liquid, logos, and UX
I've been searching for weeks, but I haven't found a solution for what I want to do. I'm trying to setup my store so that all links in the navigation menu in the header and the footer all open in the current tab. Currently, internal links open in the current tab, but external links open in a new tab. The store is a subdomain of my main website and they share some of the same links. I'm trying to make it feel like one website, but it gets confusing for customers when some pages open in the current tab and others open in a new tab. Eventually, customers could easily have 4 or 5 tabs open with no back button functionality. All links opening in the current tab would solve everything.
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the header.liquid file and the footer.liquid file. Remove the target attribute of the <a> tag
The link will open in the current tab after being removed.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Thank you for the reply.
<style>
{%- assign logo_width = 695 -%}
{%- assign logo_max_width = section.settings.logo_max_width | times: 1 -%}
{% if logo_max_width < logo_width %}
{%- assign logo_width = logo_max_width -%}
{% endif %}
.logo__image-wrapper {
max-width: {{ logo_width }}px;
}
/*================= If logo is above navigation ================== */
{% if section.settings.nav_below_logo %}
.site-nav {
{% if section.settings.show_header_lines %}
border-top: 1px solid {{ settings.color_borders }};
border-bottom: 1px solid {{ settings.color_borders }};
{% endif %}
margin-top: 30px;
}
{% unless section.settings.left_aligned_logo %}
.logo__image-wrapper {
margin: 0 auto;
}
{% endunless %}
{% endif %}
/*============ If logo is on the same line as navigation ============ */
{% unless section.settings.nav_below_logo or section.settings.show_header_lines == false %}
.site-header .grid--full {
border-bottom: 1px solid {{ settings.color_borders }};
padding-bottom: 30px;
}
{% endunless %}
{% unless section.settings.nav_below_logo %}
@media screen and (min-width: 769px) {
.site-nav {
text-align: right!important;
}
}
{% endunless %}
</style>
<div data-section-id="{{ section.id }}" data-section-type="header-section">
<div class="header-bar">
<div class="wrapper medium-down--hide">
<div class="post-large--display-table">
{% if section.settings.show_announcement or section.settings.header_search_enable %}
<div class="header-bar__left post-large--display-table-cell">
{% comment %}
Add social links to header
{% endcomment %}
{% comment %}
<div class="header-bar__module header-bar__module--list">
{% include 'social-links' %}
</div>
{% endcomment %}
{% if section.settings.show_announcement %}
<div class="header-bar__module header-bar__message">
{% if section.settings.announcement_link != blank %}
<a href="{{ section.settings.announcement_link }}">
{% endif %}
{{ section.settings.header_text | escape }}
{% if section.settings.announcement_link != blank %}
</a>
{% endif %}
</div>
{% elsif section.settings.header_search_enable %}
<div class="header-bar__module header-bar__search">
{% include 'search-bar' with 'header' %}
</div>
{% endif %}
</div>
{% endif %}
<div class="header-bar__right post-large--display-table-cell">
{% if shop.customer_accounts_enabled %}
<ul class="header-bar__module header-bar__module--list">
{% if customer %}
<li>
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
</li>
<li>
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li>
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li>{{ 'layout.customer.or' | t }}</li>
<li>
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
</ul>
{% endif %}
<div class="header-bar__module">
<span class="header-bar__sep" aria-hidden="true"></span>
<a href="{{ routes.cart_url }}" class="cart-page-link">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
</a>
</div>
<div class="header-bar__module">
<a href="{{ routes.cart_url }}" class="cart-page-link">
{{ 'layout.cart.title' | t }}{% unless cart.item_count == 0 %}:{% endunless %}
<span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
{% if section.settings.header_search_enable %}
{% if section.settings.show_announcement %}
<div class="header-bar__module header-bar__search">
{% include 'search-bar' with 'header' %}
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
<div class="wrapper post-large--hide announcement-bar--mobile">
{% if section.settings.show_announcement %}
{% if section.settings.announcement_link != blank %}
<a href="{{ section.settings.announcement_link }}">
{% endif %}
<span>{{ section.settings.header_text | escape }}</span>
{% if section.settings.announcement_link != blank %}
</a>
{% endif %}
{% endif %}
</div>
<div class="wrapper post-large--hide">
{% unless section.settings.nav_menu == blank and section.settings.header_search_enable == false and shop.customer_accounts_enabled == false %}
<button type="button" class="mobile-nav-trigger" id="MobileNavTrigger" aria-controls="MobileNav" aria-expanded="false">
<span class="icon icon-hamburger" aria-hidden="true"></span>
{{ 'layout.navigation.menu' | t }}
</button>
{% endunless %}
<a href="{{ routes.cart_url }}" class="cart-page-link mobile-cart-page-link">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
{{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
{% include 'mobile-nav' with linklists[section.settings.nav_menu] %}
</div>
<header class="site-header" role="banner">
<div class="wrapper">
{% if section.settings.nav_below_logo %}
<div class="grid--full">
<div class="grid__item">
{% if request.page_type == 'index' %}
<h1 class="site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo != blank %}
<noscript>
{% capture image_size %}{{ logo_width | escape }}x{% endcapture %}
<div class="logo__image-wrapper">
{{ section.settings.logo | img_url: image_size | img_tag: shop.name }}
</div>
</noscript>
<div class="logo__image-wrapper supports-js">
<a href="{{ routes.root_url }}" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
{% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="logo__image lazyload"
src="{{ section.settings.logo | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ shop.name | escape }}"
itemprop="logo">
</a>
</div>
{% else %}
<a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>
</div>
<div class="grid--full medium-down--hide">
<div class="grid__item">
{% include 'site-nav' with linklists[section.settings.nav_menu] %}
</div>
</div>
{% else %}
<div class="grid--full post-large--display-table">
<div class="grid__item post-large--one-third post-large--display-table-cell">
{% if request.page_type == 'index' %}
<h1 class="site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 site-header__logo{% if section.settings.logo == blank %}{% unless section.settings.left_aligned_logo == false and section.settings.nav_below_logo %} post-large--left{% endunless %}{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo != blank %}
<noscript>
{% capture image_size %}{{ logo_width | escape }}x{% endcapture %}
<div class="logo__image-wrapper">
{{ section.settings.logo | img_url: image_size | img_tag: shop.name }}
</div>
</noscript>
<div class="logo__image-wrapper supports-js">
<a href="{{ routes.root_url }}" itemprop="url" style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
{% assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="logo__image lazyload"
src="{{ section.settings.logo | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[120, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ shop.name | escape }}"
itemprop="logo">
</a>
</div>
{% else %}
<a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>
<div class="grid__item post-large--two-thirds post-large--display-table-cell medium-down--hide">
{% include 'site-nav' with linklists[section.settings.nav_menu] %}
</div>
</div>
{% endif %}
</div>
</header>
</div>
FOOTER
<footer class="site-footer small--text-center" role="contentinfo">
<div class="wrapper">
<div class="grid-uniform">
{% if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_google_plus_link != blank or settings.social_instagram_link != blank or settings.social_snapchat_link != blank or settings.social_tumblr_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_fancy_link != blank or settings.social_rss_link != blank %}
{% assign show_social_icons = true %}
{% else %}
{% assign show_social_icons = false %}
{% endif %}
{% case section.blocks.size %}
{% when 0 %}
{% when 1 %}
{% assign column_width = 'text-center' %}
{%- assign article_width = 480 -%}
{% when 2 %}
{% assign column_width = 'post-large--one-half medium--one-half' %}
{%- assign article_width = 480 -%}
{% when 3 %}
{% assign column_width = 'post-large--one-third medium--one-third' %}
{%- assign article_width = 435 -%}
{% when 4 %}
{% assign column_width = 'post-large--one-quarter medium--one-half' %}
{%- assign article_width = 410 -%}
{% when 5 %}
{% assign column_width = 'post-large--one-fifth medium--one-half' %}
{%- assign article_width = 335 -%}
{% when 6 %}
{% assign column_width = 'post-large--one-sixth medium--one-half' %}
{%- assign article_width = 335 -%}
{% endcase %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'blog' %}
<div class="grid__item {{ column_width }} site-footer__links">
{% assign blog = blogs[block.settings.blog] %}
<h3 class="h4"><a href="{{ blog.url }}">{{ 'layout.footer.blog_title' | t }}</a></h3>
{% assign article = blogs[block.settings.blog].articles.first %}
<p class="h5">{{ article.title | link_to: article.url }}</p>
{% if article.image %}
{% capture img_id %}ArticleImage-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{% capture wrapper_id %}ArticleImageWrapper-{{ section.id }}--{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign image_alt = article.title | escape -%}
{% include 'image-style' with image: article.image, width: article_width, height: 480, wrapper_id: wrapper_id, img_id: img_id %}
<p>
<div id="{{ wrapper_id }}" class="article__image-wrapper supports-js">
<div style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="article__image lazyload"
src="{{ article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[90, 120, 150, 180, 360, 480, 600, 750, 940, 1080, 1296]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image_alt }}">
</div>
</div>
</p>
<noscript>
<p>{{ article | img_url: 'large' | img_tag: image_alt, 'article__image' | link_to: article.url }}</p>
</noscript>
{% endif %}
{% if article.excerpt.size > 0 %}
<div class="clearfix">
{{ article.excerpt }}
</div>
{% else %}
<p>{{ article.content | strip_html | truncatewords: 30 }}</p>
{% endif %}
</div>
{% when 'menu' %}
<div class="grid__item {{ column_width }}">
{% unless num_columns == 1 %}
<h3 class="h4">{{ block.settings.menu_title | escape }}</h3>
{% endunless %}
<ul class="site-footer__links{% if num_columns == 1 %} inline-list{% endif %}">
{% for link in linklists[block.settings.menu].links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
{% when 'social' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ 'layout.footer.social_title' | t }}</h3>
{% comment %}
Loop through the social network links
{% endcomment %}
{% include 'social-links' %}
</div>
{% when 'text' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ block.settings.title | escape }}</h3>
<div class="rte">{{ block.settings.richtext }}</div>
</div>
{% when 'newsletter' %}
<div class="grid__item {{ column_width }}">
<h3 class="h4">{{ 'layout.footer.newsletter_title' | t }}</h3>
{% unless block.settings.subtext == blank %}
{{ block.settings.subtext }}
{% endunless %}
{% include 'newsletter-form' %}
</div>
{% endcase %}
{% endfor %}
</div>
<hr class="hr--small hr--clear">
<div class="grid">
<div class="grid__item text-center">
<p class="site-footer__links">{{ 'layout.footer.copyright' | t }} © {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: routes.root_url }}. {{ powered_by_link }}</p>
</div>
</div>
{% if section.settings.show_methods_of_payment %}
{% unless shop.enabled_payment_types == empty %}
<div class="grid">
<div class="grid__item text-center">
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{% for type in shop.enabled_payment_types %}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endunless %}
{% endif %}
</div>
</footer>
Thanks!
By 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, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024