Brooklyn Theme - how to move "Back to [collection]" link to top of product page?

New Member
4 0 0

Hello,

For my store I'm using the Brooklyn theme, which has a link at the bottom of product pages saying "Back to [collection name]". I'm hoping to improve the UX by moving this link to the top of product pages, ideally in the top left corner directly above product images.

Here is a link to a product on my store so you can see what this looks like. https://hirschmusic.myshopify.com/collections/jazz-ensemble/products/mambo The password is "jazz".

Thank you! Any help is appreciated!

0 Likes
Tourist
26 0 1

Hi Anna,

I see the problem. This is a small theme fix. You may like to take some Shopify experts help for this.

Thanks

1 Like
Shopify Staff
Shopify Staff
723 40 103

Hey, Anna!

Katy here from Shopify. ?

To do this you'll just need to move and adjust some of the code already located within your product-template.liquid section of your theme. 

If you could go to your Admin > Online store > Themes > Actions > Edit code > Sections > product-template.liquid. 

Here we can move the code which controls this return link. You should be able to find this around line 348:

If you could cut this and paste it to the top of this section, ideally somewhere around line 10. You can then add an additional class to help with the alignment and spacing on both desktop and mobile versions of your theme. 

This should then do the trick for you.  Feel free to let me know if this helps! 


Katy

 

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
10 0 0

@Katy We are using Venture theme and having a similar issue. We managed to lift the "Back to..." link above product image, but it's currently centered on the page. We tried the following code, but it's still centered. We would like to make it left-aligned on the page as well. How can we do it? Thanks!

{% if collection %}
  <div class="text-left" style="text-align:left; margin-bottom:40px;">
    <a href="{{ collection.url }}" class="h1 return-link">
      {% include 'icon-arrow-thin-left' %}
      {{ 'products.product.collection_return' | t: collection: collection.title }}
    </a>
  </div>
{% endif %}
0 Likes