What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Back to Collection Coding Help PLEASE

Solved

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

LeauxKey
Tourist
6 1 0

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!

Accepted Solutions (2)
Maulik_Patel
Explorer
44 9 25

This is an 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

If helpful then please Like and Accept Solution.

View solution in original post

LeauxKey
Tourist
6 1 0

This is an 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.

View solution in original post

Replies 10 (10)

Maulik_Patel
Explorer
44 9 25

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

If helpful then please Like and Accept Solution.

SmallTask
Shopify Partner
973 41 55

Hi @LeauxKey,

 

We can use the breadcrumb to create this functionality.

banned

LeauxKey
Tourist
6 1 0

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
Tourist
6 1 0

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

Screenshot_20220817-143841_Chrome.jpg

Screenshot_20220817-143758_Chrome.jpg

Screenshot_20220817-143740_Chrome.jpg

Maulik_Patel
Explorer
44 9 25

This is an 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

If helpful then please Like and Accept Solution.
LeauxKey
Tourist
6 1 0

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.   

Screenshot 2022-08-25 230151.jpg

Screenshot 2022-08-25 230550.jpg

Thanks again for your help. 

Maulik_Patel
Explorer
44 9 25

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.

If helpful then please Like and Accept Solution.
LeauxKey
Tourist
6 1 0

This is an 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
Tourist
5 0 0

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
Visitor
2 0 0

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