Having a "sitemap-like" link buttons for each product page

Solved
Luvita
Excursionist
34 0 6

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:

Screenshot 2021-01-21 at 21.04.26.png

KetanKumar
Shopify Partner
14125 1644 5063

@Luvita 

Thanks for post 

it's not possible to  Shopify 

Shopify allow this so please try it

https://shopify.dev/tutorials/customize-theme-add-breadcrumbs

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Luvita
Excursionist
34 0 6

Thanks @KetanKumar.

We followed the above guide but unfortunately our breadcrumbs doesn't appear anywhere on the products pages. Would you be able to perhaps take a look?

0 Likes
Luvita
Excursionist
34 0 6

@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:

Screenshot 2021-01-22 at 12.42.43.png

 

 

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: ', ' -%} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {%- endif -%}
    {%- if current_page != 1 -%}
      &ndash; {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      &ndash; {{ 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>

 

KetanKumar
Shopify Partner
14125 1644 5063

@Luvita 


Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Luvita
Excursionist
34 0 6

Thanks @KetanKumar

We appreciate your help greatly. Please see below our website URL for your review:

https://www.luvita.co.uk/

Thank you.

KetanKumar
Shopify Partner
14125 1644 5063

@Luvita 

Thanks 

i have updated your above code

<!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: ', ' -%} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {%- endif -%}
    {%- if current_page != 1 -%}
      &ndash; {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      &ndash; {{ 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' %}
  
                             <div class="page-width"> {% render 'breadcrumbs' %}</div>


  <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>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Luvita
Excursionist
34 0 6

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?

Screenshot 2021-01-22 at 16.56.39.png

0 Likes
KetanKumar
Shopify Partner
14125 1644 5063

@Luvita 

Sorry for facing this issue, it's my pleasure to help us.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes