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

Store Design
,
1

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!

2

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

3

Hi @LeauxKey ,

We can use the breadcrumb to create this functionality.

4

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.

5

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-143841_Chrome.jpg785×784 18 KB

Screenshot_20220817-143758_Chrome.jpg
Screenshot_20220817-143758_Chrome.jpg1080×1918 166 KB

Screenshot_20220817-143740_Chrome.jpg
Screenshot_20220817-143740_Chrome.jpg1080×2400 172 KB

6

Hello @LeauxKey ,

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

#1. Add this code in theme.liquid before close check the

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

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

screenshot: https://prnt.sc/PAXojS4tRppL

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

7

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 230151.jpg1151×771 101 KB

Screenshot 2022-08-25 230550.jpg
Screenshot 2022-08-25 230550.jpg1164×810 68.4 KB

Thanks again for your help.

8

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

Output: https://prnt.sc/P6qknbgZMTAO

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

9

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.

10

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

11

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!