How can I add a back to collection button under product descriptions?

[LeauxKey]

Can someone please help me place a back to collection button under the product description for the products included in collections to make my site easier to navigate ?

Nothing that I've found online thus far has worked. I'm using the Studio theme for my store. Any ideas would be greatly appreciated. Thanks in advance!

[Maulik_Patel · Accepted solution]

Hello @LeauxKey ,

Sorry for the late reply can you try the below code?

#1. Add this code in theme.liquid before </head> close check the

screenshot: https://prnt.sc/j-oOeuoP-DUi

<script>
    var theme = window.theme || {};

    {%- if template == 'collection' -%}
      {%- if current_tags -%}
        {%- capture tag_handles -%}
            {%- for tag in current_tags -%}
              {{- tag | handle | append: '|' -}}
            {%- endfor -%}
        {%- endcapture -%}
      {%- endif -%}
      theme.backToCollection = {
        collection: {
          title: {{ collection.title | json }},
          link: "{{ shop.url }}{{ collection.url }}{%- if current_tags -%}/{{- tag_handles | split: '|' | join: '+' -}}{%- endif -%}"
        }
      };
      sessionStorage.setItem("backToCollection", JSON.stringify(theme.backToCollection.collection));

    {%- elsif template != 'product' -%}
      if (sessionStorage.getItem("backToCollection")) {
        sessionStorage.removeItem("backToCollection")
      }
    {%- endif -%}

    document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
  </script>

#2. Add this code Sections => main-product.liquid before schema check the

screenshot: https://prnt.sc/PAXojS4tRppL

<div id="backToCollection" class="mp_mp"></div>

<script>
  if(sessionStorage.backToCollection) {
    theme.backToCollection = {};
    theme.backToCollection.collection = JSON.parse(sessionStorage.backToCollection);
    var productCollections = {{ product.collections | json }};
    var showCollection = false;
    if (productCollections) {
      productCollections.forEach(function(collection) {
        if (collection.title === theme.backToCollection.collection.title) {
          showCollection = true;
        }
      });
    }
    if(showCollection) {
      var backToCollectionHTML = '<div class="text-center return-link-wrapper page-width"><a href="' + theme.backToCollection.collection.link + '" class="button button--primary">{{  'Back to Collections'  }} ' + theme.backToCollection.collection.title + '</a></div>';
      var backToCollectionContainer = document.getElementById('backToCollection');
      backToCollectionContainer.insertAdjacentHTML('afterbegin', backToCollectionHTML);
    }
  }
</script>

Output: https://prnt.sc/19Hcjy5WsBVe

[Maulik_Patel]

Hello  @LeauxKey,

It is not a standard way to add a "back to collection button under the product description" instead you can use Breadcrumb Navigation on your site. It is mora e SEO friendly way.

I am not aware of the "Studio" Theme has a Breadcrumb Navigation option.You can reach out to theme customer support or create a custom code. Check the below blog for reference.

URL: https://www.shopify.in/partners/blog/breadcrumb-navigation

[SmallTask]

Hi @LeauxKey,

We can use the breadcrumb to create this functionality.

[LeauxKey]

Thank you to @Maulik_Patel and @SmallTask for responding.

I made a screen recording of what I would like to happen. This store appears to have the exact same theme as mine.

Here is the coding that I've tried so far in the product-template.liquid file:

{% if collection %}
  <div class="text-center return-link-wrapper page-width">
    <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
      {% include 'icon-arrow-left' %}
      {{ 'products.product.back_to_collection' | t: title: collection.title }}
    </a>
  </div>
{% endif %}

I'm not sure if it doesn't work anymore or I'm not entering it in the correct place.

[LeauxKey]

Here are screenshots of what I'm trying to accomplish. The back to collection button appears right after the "you may also like" section.

 

 

 

[Maulik_Patel · Accepted solution]

Hello @LeauxKey ,

Sorry for the late reply can you try the below code?

#1. Add this code in theme.liquid before </head> close check the

screenshot: https://prnt.sc/j-oOeuoP-DUi

<script>
    var theme = window.theme || {};

    {%- if template == 'collection' -%}
      {%- if current_tags -%}
        {%- capture tag_handles -%}
            {%- for tag in current_tags -%}
              {{- tag | handle | append: '|' -}}
            {%- endfor -%}
        {%- endcapture -%}
      {%- endif -%}
      theme.backToCollection = {
        collection: {
          title: {{ collection.title | json }},
          link: "{{ shop.url }}{{ collection.url }}{%- if current_tags -%}/{{- tag_handles | split: '|' | join: '+' -}}{%- endif -%}"
        }
      };
      sessionStorage.setItem("backToCollection", JSON.stringify(theme.backToCollection.collection));

    {%- elsif template != 'product' -%}
      if (sessionStorage.getItem("backToCollection")) {
        sessionStorage.removeItem("backToCollection")
      }
    {%- endif -%}

    document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
  </script>

#2. Add this code Sections => main-product.liquid before schema check the

screenshot: https://prnt.sc/PAXojS4tRppL

<div id="backToCollection" class="mp_mp"></div>

<script>
  if(sessionStorage.backToCollection) {
    theme.backToCollection = {};
    theme.backToCollection.collection = JSON.parse(sessionStorage.backToCollection);
    var productCollections = {{ product.collections | json }};
    var showCollection = false;
    if (productCollections) {
      productCollections.forEach(function(collection) {
        if (collection.title === theme.backToCollection.collection.title) {
          showCollection = true;
        }
      });
    }
    if(showCollection) {
      var backToCollectionHTML = '<div class="text-center return-link-wrapper page-width"><a href="' + theme.backToCollection.collection.link + '" class="button button--primary">{{  'Back to Collections'  }} ' + theme.backToCollection.collection.title + '</a></div>';
      var backToCollectionContainer = document.getElementById('backToCollection');
      backToCollectionContainer.insertAdjacentHTML('afterbegin', backToCollectionHTML);
    }
  }
</script>

Output: https://prnt.sc/19Hcjy5WsBVe

[LeauxKey]

Thank you so much! It works perfectly. I really appreciate you taking the time to explain it to me. Is there anyway that I could place the button at the very bottom of the page (under the “you may also like” section) and have it be centered. I've included screenshots of the site and where the buttons showed up. I drew red arrows to where I would like them to go.   

 

Thanks again for your help. 

 

[Maulik_Patel]

Add this 2nd updated code to Sections => product-recommendations.liquid before schema check the screenshot: https://prnt.sc/lZ-IikF6GtJC

<div id="backToCollection" class="mp_mp"></div>

<script>
  if(sessionStorage.backToCollection) {
    theme.backToCollection = {};
    theme.backToCollection.collection = JSON.parse(sessionStorage.backToCollection);
    var productCollections = {{ product.collections | json }};
    var showCollection = false;
    if (productCollections) {
      productCollections.forEach(function(collection) {
        if (collection.title === theme.backToCollection.collection.title) {
          showCollection = true;
        }
      });
    }
    if(showCollection) {
      var backToCollectionHTML = '<div class="text-center return-link-wrapper page-width center"><a href="' + theme.backToCollection.collection.link + '" class="button button--primary">{{  'Back to Collections'  }} ' + theme.backToCollection.collection.title + '</a></div>';
      var backToCollectionContainer = document.getElementById('backToCollection');
      backToCollectionContainer.insertAdjacentHTML('afterbegin', backToCollectionHTML);
    }
  }
</script>

Output: https://prnt.sc/P6qknbgZMTAO

If this code works for you then Accept it as a solution and Like it.

[LeauxKey · Accepted solution]

Wow. Thank you! This is perfect! This actually works better than the “back to collections” buttons on the sites I’ve been referencing because even when I click on a suggested item it still gives me the option to go back to the collection.

I would never have figured this out on my own. Thank you so much for everything.

[Edith]

How To Add A View Collection Button Before Production Description?

Can someone please help me place a back to collection button before the product description on product page to prevent viewers drop out directly?

I attached a picture of 2 target placements. https://ibb.co/S3ZP6Mt

I'm using the Kalles theme. Any ideas would be greatly appreciated. Thanks in advance!

[daviddhzn]

you have answer for dawn theme? I added solution but didnt work