Solved
Hi There
We was wondering whether someone would be able to help us achieve a "sitemap" like back button link which appears when a visitor/customer selects any product/brand category on our website, basically the same as the attached:
@KetanKumar Thanks again for this. By way of update, it appears to be showing now but in the top left corner of our page, but we want to move it down slightly so it looks professional. Would you be able to tell us how to do this? Please see screenshot below:
Here's our theme.liquid code for your reference (we have tried moving the {% render 'breadcrumbs' %} code further down but then the breadcrumbs doesn't appear at all
<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>{%- comment -%}smartseo_integration_begin{%- endcomment -%}{% include 'smartseo' %}{%- comment -%}smartseo_integration_end{%- endcomment -%}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_button }}">
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
<link rel="preconnect" href="https://fonts.shopify.com" crossorigin>
<link rel="preconnect" href="https://monorail-edge.shopifysvc.com">
{%- assign header_font = settings.type_header_font -%}
{%- assign base_font = settings.type_base_font -%}
{%- assign base_font_bolder = base_font | font_modify: 'weight', 'bolder' -%}
{%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}
{%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
{%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}
<link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style">
<link rel="preload" as="font" href="{{ header_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ base_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ base_font_bold | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" href="{{ 'theme.js' | asset_url }}" as="script">
<link rel="preload" href="{{ 'lazysizes.js' | asset_url }}" as="script">
<!-- Global site tag (gtag.js) - Google Ads: 475737900 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-475737900"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-475737900');
</script>
{%- if canonical_url != blank -%}
<link rel="canonical" href="{{ canonical_url }}">
{%- endif -%}
{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%}
{%- capture seo_title -%}
{%- if request.page_type == 'search' and search.performed == true -%}
{{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
{%- else -%}
{{ page_title }}
{%- endif -%}
{%- if current_tags -%}
{%- assign meta_tags = current_tags | join: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}}
{%- endif -%}
{%- if current_page != 1 -%}
– {{ 'general.meta.page' | t: page: current_page }}
{%- endif -%}
{%- assign escaped_page_title = page_title | escape -%}
{%- unless escaped_page_title contains shop.name -%}
– {{ shop.name }}
{%- endunless -%}
{%- endcapture -%}
{%- comment smartseo_integration_begin_meta_data -%}<title>{{ seo_title | strip }}</title>{%- endcomment smartseo_integration_end_meta_data -%}
{%- if page_description -%}
{%- comment smartseo_integration_begin_meta_data -%}<meta name="description" content="{{ page_description | escape }}">{%- endcomment smartseo_integration_end_meta_data -%}
{%- endif -%}
{% include 'social-meta-tags' %}
{% include 'css-variables' %}
<style>*,::after,::before{box-sizing:border-box}body{margin:0}body,html{background-color:var(--color-body)}body,button{font-size:calc(var(--font-size-base) * 1px);font-family:var(--font-stack-body);font-style:var(--font-style-body);font-weight:var(--font-weight-body);color:var(--color-text);line-height:1.5}body,button{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}.border-bottom{border-bottom:1px solid var(--color-border)}.btn--link{background-color:transparent;border:0;margin:0;color:var(--color-text);text-align:left}.text-right{text-align:right}.icon{display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor}.icon__fallback-text,.visually-hidden{position:absolute!important;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}svg.icon:not(.icon--full-color) circle,svg.icon:not(.icon--full-color) ellipse,svg.icon:not(.icon--full-color) g,svg.icon:not(.icon--full-color) line,svg.icon:not(.icon--full-color) path,svg.icon:not(.icon--full-color) polygon,svg.icon:not(.icon--full-color) polyline,svg.icon:not(.icon--full-color) rect,symbol.icon:not(.icon--full-color) circle,symbol.icon:not(.icon--full-color) ellipse,symbol.icon:not(.icon--full-color) g,symbol.icon:not(.icon--full-color) line,symbol.icon:not(.icon--full-color) path,symbol.icon:not(.icon--full-color) polygon,symbol.icon:not(.icon--full-color) polyline,symbol.icon:not(.icon--full-color) rect{fill:inherit;stroke:inherit}li{list-style:none}.list--inline{padding:0;margin:0}.list--inline>li{display:inline-block;margin-bottom:0;vertical-align:middle}a{color:var(--color-text);text-decoration:none}.h1,.h2,h1,h2{margin:0 0 17.5px;font-family:var(--font-stack-header);font-style:var(--font-style-header);font-weight:var(--font-weight-header);line-height:1.2;overflow-wrap:break-word;word-wrap:break-word}.h1 a,.h2 a,h1 a,h2 a{color:inherit;text-decoration:none;font-weight:inherit}.h1,h1{font-size:calc(((var(--font-h1-desktop))/ (var(--font-size-base))) * 1em);text-transform:none;letter-spacing:0}@media only screen and (max-width:749px){.h1,h1{font-size:calc(((var(--font-h1-mobile))/ (var(--font-size-base))) * 1em)}}.h2,h2{font-size:calc(((var(--font-h2-desktop))/ (var(--font-size-base))) * 1em);text-transform:uppercase;letter-spacing:.1em}@media only screen and (max-width:749px){.h2,h2{font-size:calc(((var(--font-h2-mobile))/ (var(--font-size-base))) * 1em)}}p{color:var(--color-body-text);margin:0 0 19.44444px}@media only screen and (max-width:749px){p{font-size:calc(((var(--font-size-base) - 1)/ (var(--font-size-base))) * 1em)}}p:last-child{margin-bottom:0}@media only screen and (max-width:749px){.small--hide{display:none!important}}.grid{list-style:none;margin:0;padding:0;margin-left:-30px}.grid::after{content:'';display:table;clear:both}@media only screen and (max-width:749px){.grid{margin-left:-22px}}.grid::after{content:'';display:table;clear:both}.grid--no-gutters{margin-left:0}.grid--no-gutters .grid__item{padding-left:0}.grid--table{display:table;table-layout:fixed;width:100%}.grid--table>.grid__item{float:none;display:table-cell;vertical-align:middle}.grid__item{float:left;padding-left:30px;width:100%}@media only screen and (max-width:749px){.grid__item{padding-left:22px}}.grid__item[class*="--push"]{position:relative}@media only screen and (min-width:750px){.medium-up--one-quarter{width:25%}.medium-up--push-one-third{width:33.33%}.medium-up--one-half{width:50%}.medium-up--push-one-third{left:33.33%;position:relative}}.site-header{position:relative;background-color:var(--color-body)}@media only screen and (max-width:749px){.site-header{border-bottom:1px solid var(--color-border)}}@media only screen and (min-width:750px){.site-header{padding:0 55px}.site-header.logo--center{padding-top:30px}}.site-header__logo{margin:15px 0}.logo-align--center .site-header__logo{text-align:center;margin:0 auto}@media only screen and (max-width:749px){.logo-align--center .site-header__logo{text-align:left;margin:15px 0}}@media only screen and (max-width:749px){.site-header__logo{padding-left:22px;text-align:left}.site-header__logo img{margin:0}}.site-header__logo-link{display:inline-block;word-break:break-word}@media only screen and (min-width:750px){.logo-align--center .site-header__logo-link{margin:0 auto}}.site-header__logo-image{display:block}@media only screen and (min-width:750px){.site-header__logo-image{margin:0 auto}}.site-header__logo-image img{width:100%}.site-header__logo-image--centered img{margin:0 auto}.site-header__logo img{display:block}.site-header__icons{position:relative;white-space:nowrap}@media only screen and (max-width:749px){.site-header__icons{width:auto;padding-right:13px}.site-header__icons .btn--link,.site-header__icons .site-header__cart{font-size:calc(((var(--font-size-base))/ (var(--font-size-base))) * 1em)}}.site-header__icons-wrapper{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;-webkit-justify-content:flex-end;-ms-justify-content:flex-end;justify-content:flex-end}.site-header__account,.site-header__cart,.site-header__search{position:relative}.site-header__search.site-header__icon{display:none}@media only screen and (min-width:1400px){.site-header__search.site-header__icon{display:block}}.site-header__search-toggle{display:block}@media only screen and (min-width:750px){.site-header__account,.site-header__cart{padding:10px 11px}}.site-header__cart-title,.site-header__search-title{position:absolute!important;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0;display:block;vertical-align:middle}.site-header__cart-title{margin-right:3px}.site-header__cart-count{display:flex;align-items:center;justify-content:center;position:absolute;right:.4rem;top:.2rem;font-weight:700;background-color:var(--color-btn-primary);color:var(--color-btn-primary-text);border-radius:50%;min-width:1em;height:1em}.site-header__cart-count span{font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:calc(11em / 16);line-height:1}@media only screen and (max-width:749px){.site-header__cart-count{top:calc(7em / 16);right:0;border-radius:50%;min-width:calc(19em / 16);height:calc(19em / 16)}}@media only screen and (max-width:749px){.site-header__cart-count span{padding:.25em calc(6em / 16);font-size:12px}}.site-header__menu{display:none}@media only screen and (max-width:749px){.site-header__icon{display:inline-block;vertical-align:middle;padding:10px 11px;margin:0}}@media only screen and (min-width:750px){.site-header__icon .icon-search{margin-right:3px}}.announcement-bar{z-index:10;position:relative;text-align:center;border-bottom:1px solid transparent;padding:2px}.announcement-bar__link{display:block}.announcement-bar__message{display:block;padding:11px 22px;font-size:calc(((16)/ (var(--font-size-base))) * 1em);font-weight:var(--font-weight-header)}@media only screen and (min-width:750px){.announcement-bar__message{padding-left:55px;padding-right:55px}}.site-nav{position:relative;padding:0;text-align:center;margin:25px 0}.site-nav a{padding:3px 10px}.site-nav__link{display:block;white-space:nowrap}.site-nav--centered .site-nav__link{padding-top:0}.site-nav__link .icon-chevron-down{width:calc(8em / 16);height:calc(8em / 16);margin-left:.5rem}.site-nav__label{border-bottom:1px solid transparent}.site-nav__link--active .site-nav__label{border-bottom-color:var(--color-text)}.site-nav__link--button{border:none;background-color:transparent;padding:3px 10px}.site-header__mobile-nav{z-index:11;position:relative;background-color:var(--color-body)}@media only screen and (max-width:749px){.site-header__mobile-nav{display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center}}.mobile-nav--open .icon-close{display:none}.main-content{opacity:0}.main-content .shopify-section{display:none}.main-content .shopify-section:first-child{display:inherit}.critical-hidden{display:none}</style>
<script>
window.performance.mark('debut:theme_stylesheet_loaded.start');
function onLoadStylesheet() {
performance.mark('debut:theme_stylesheet_loaded.end');
performance.measure('debut:theme_stylesheet_loaded', 'debut:theme_stylesheet_loaded.start', 'debut:theme_stylesheet_loaded.end');
var url = "{{ 'theme.css' | asset_url }}";
var link = document.querySelector('link[href="' + url + '"]');
link.loaded = true;
link.dispatchEvent(new Event('load'));
}
</script>
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}" type="text/css" media="print" onload="this.media='all';onLoadStylesheet()">
<style>
{{ header_font | font_face: font_display: 'swap' }}
{{ base_font | font_face: font_display: 'swap' }}
{{ base_font_bold | font_face: font_display: 'swap' }}
{{ base_font_bolder | font_face: font_display: 'swap' }}
{{ base_font_italic | font_face: font_display: 'swap' }}
{{ base_font_bold_italic | font_face: font_display: 'swap' }}
</style>
<script>
var theme = {
breakpoints: {
medium: 750,
large: 990,
widescreen: 1400
},
strings: {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }},
regularPrice: {{ 'products.product.regular_price' | t | json }},
salePrice: {{ 'products.product.sale_price' | t | json }},
sale: {{ 'products.product.on_sale' | t | json }},
fromLowestPrice: {{ 'products.product.from_lowest_price_html' | t: lowest_price: '[price]' | json }},
vendor: {{'products.product.vendor' | t | json }},
showMore: {{ 'general.filters.show_more' | t | json }},
showLess: {{ 'general.filters.show_less' | t | json }},
searchFor: {{ 'general.search.search_for' | t | json }},
addressError: {{ 'sections.map.address_error' | t | json }},
addressNoResults: {{ 'sections.map.address_no_results' | t | json }},
addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
authError: {{ 'sections.map.auth_error_html' | t | json }},
newWindow: {{ 'general.accessibility.link_messages.new_window' | t | json }},
external: {{ 'general.accessibility.link_messages.external' | t | json }},
newWindowExternal: {{ 'general.accessibility.link_messages.new_window_and_external' | t | json }},
removeLabel: {{ 'cart.label.remove' | t: product: '[product]' | json }},
update: {{ 'cart.label.update' | t | json }},
quantity: {{ 'cart.label.quantity' | t | json }},
discountedTotal: {{ 'cart.label.discounted_total' | t | json }},
regularTotal: {{ 'cart.label.regular_total' | t | json }},
priceColumn: {{ 'cart.label.price_column' | t | json }},
quantityMinimumMessage: {{ 'products.product.quantity_minimum_message' | t | json }},
cartError: {{ 'cart.general.cart_error' | t | json }},
removedItemMessage: {{ 'cart.general.removed_item_html' | t: quantity: '[quantity]', link: '[link]' | json }},
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
oneCartCount: {{ 'cart.popup.cart_count' | t: count: 1 | json }},
otherCartCount: {{ 'cart.popup.cart_count' | t: count: '[count]' | json }},
quantityLabel: {{ 'cart.popup.quantity_label' | t: quantity_count: '[count]' | json }},
products: {{ 'general.search.products' | t | json }},
loading: {{ 'general.search.loading' | t | json }},
number_of_results: {{ 'general.search.number_of_results' | t: result_number: '[result_number]', results_count: '[results_count]' | json }},
number_of_results_found: {{ 'general.search.number_of_results_found' | t: results_count: '[results_count]' | json }},
one_result_found: {{ 'general.search.one_result_found' | t | json }}
},
moneyFormat: {{ shop.money_format | json }},
moneyFormatWithCurrency: {{ shop.money_with_currency_format | json }},
settings: {
predictiveSearchEnabled: {{ settings.predictive_search_enabled | json }},
predictiveSearchShowPrice: {{ settings.predictive_search_show_price | json }},
predictiveSearchShowVendor: {{ settings.predictive_search_show_vendor | json }}
},
stylesheet: "{{ 'theme.css' | asset_url }}"
}
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
{%- if request.page_type contains 'customers/' -%}
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
{%- endif -%}
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>
<script type="text/javascript">
if (window.MSInputMethodContext && document.documentMode) {
var scripts = document.getElementsByTagName('script')[0];
var polyfill = document.createElement("script");
polyfill.defer = true;
polyfill.src="{{ 'ie11CustomProperties.min.js' | asset_url }}";
scripts.parentNode.insertBefore(polyfill, scripts);
}
</script>
{{ content_for_header }}
{% include 'qikify-navigator' %}
{% include 'qikify-smartmenu-data' %}
<script type="text/javascript" src="https://sdk.qikify.com/tmenu/app-v5.js?token=XQJkgKcFgd0U808MOvyMVHgGcEmNwYRc&shop=luvita-cosmetics.myshopify.com" defer="defer"></script>
<script src="https://shopoe.net/app.js"></script>
<!-- Google Webmaster Tools Site Verification -->
<meta name="google-site-verification" content="Yd86J22LbVMbojf7fiQ3bL98-Abj4mIHM4KDD3JWU7w" />
</head>
{% include 'globo.formbuilder.scripts' %}
<body class="template-{{ request.page_type | handle }}">
<a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>
{%- if settings.enable_ajax -%}
{% include 'cart-popup' %}
{%- endif -%}
{% section 'header' %}
{% render 'breadcrumbs' %}
<div class="page-container drawer-page-content" id="PageContainer">
<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
{% section 'footer' %}
<div id="slideshow-info" class="visually-hidden" aria-hidden="true">
{{- 'sections.slideshow.navigation_instructions' | t -}}
</div>
</div>
<ul hidden>
<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
<li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
</ul>
<!-- BestPush Snippet Start -->
{% render 'bestpush' %}
<!-- BestPush Snippet End -->
{% include 'gtranslate', float: 'yes' %}
<div class="globo-formbuilder add-by-option" data-id=26071 ></div>
<!-- Stamped.io Styles -->
<style>.stamped-badge[data-rating="0"], .stamped-badge[data-rating="0,0"], .stamped-badge[data-rating="0.0"] { display: initial !important; }</style>
</body>
</html>
Thanks @KetanKumar!
We still need to bring it down a bit, away from the top border (Please see the below screenshot). Please could you help?
