Narrative Theme: Add navigation links on product pages

Highlighted
Tourist
4 0 2

Hi All!

I love the clean look of the narrative theme. However, I found one issue for me, which is: navigating between products is quite cumbersome as there is no button to go back to the collection or to move to the next or previous product once on the product page. I would really like to create these buttons.

I have tried coding, but without much success. Has anyone seem the same need? How did you solve it?

Look forward to hearing from you!

Bart

0 Likes
Highlighted
Shopify Staff
Shopify Staff
523 1 88

Hey, Bart!

My name is Alex, I'm a guru here at Shopify!

No problem!  I've found a couple resources that can help with that navigation.  Had you considered breadcrumb navigation at all?  That might be a great way for your customers to get around your site - there's lots of themes that include this option, here's a few of the free options if you're interested in checking them out:

Minimal
Pop
Simple
Supply

If you'd prefer to keep using Narrative, no problem!  We've got a guide on adding that to other themes - there's a little coding involved, but the guide is very step-by-step.  Since this option can produce results that vary from theme to theme, I'd highly recommend backing up your theme before giving this a try; that will let you experiment with the results, without interrupting your customer's experience and allowing you to recover easily if you see unexpected behaviour.

If you'd prefer buttons or links that take you from one product to the next, that would involve custom coding work but it's totally possible!  I'd suggest checking out the collection.next_product and collection.previous_product liquid objects - there's more info on using those right over here.    That's slightly more advanced, so if you're not able to put those into effect yourself you can always reach out to one of our third party experts for hire for help in coding this for you!

Hope that's helped!  Please feel free to let me know, and you can always give us a call or start a live chat at any time.  We're open 24/7 for your convenience and always happy to assist!

Cheers,

Alex | Shopify Guru

1 Like
Highlighted
Tourist
4 0 2

Thanks so much for all this info, Alex! I am going to have a look at it :)

0 Likes
Highlighted
Tourist
4 0 2

Hi Bart,

Please let me know if you were ever able to resolve this and how you did it? I followed the instruction and copied the link (and pasted on line 41 > sections > product-template.liquid) but I still don't have my next/previous buttons🙁

1 Like
Highlighted
Shopify Partner
4439 667 1390

Hello, @Letlhare_eb 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

also do you have flow this all step? or added breadcrumbs

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
Highlighted
Tourist
4 0 2

Hi KetanKumar,

Thank you for your help.

I have successfully added the breadcrumbs though I don't like that they look like links. I'd prefer to have them in grey. My URL is https://letlhare-eb.myshopify.com/ I'm not sure if it's safe to give my password on this platform. Please advise.

Thanks

 

0 Likes
Highlighted
Shopify Partner
4439 667 1390

@Letlhare_eb 

if you have front end password is confidential so please to a personal message as you like.

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