How can I add navigation buttons to Dawn theme product pages?

[shehnaz17]

Hi everyone,

I am working on Dawn theme and unable to figure out on how to add back, next button and show all products icon to product pages, something as in below screenshot. I need to launch my website in a few days and stuck on this, appreciate any suggestions. Thank you.

Thank you,

Shehnaz

[KetanKumar]

@shehnaz17

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[shehnaz17]

@KetanKumar Thank for your help. Here’s the URL : https://support-5156.myshopify.com/?key=a89695b08296190eefad47efd01618a2f753667cd0047ac479d05cf7106d9be5

[Ren]

Hi @shehnaz17 ,

This is a feature that requires coding into your theme. Typically, if you are unfamiliar with code, you can hire a Shopify Expert to help you. If you’re interested in doing so yourself, I came across some resources that may be helpful.

Here is a third-party Youtube tutorial explaining how to add a back button to your Dawn theme. I must stress that this is third-party and therefore I cannot guarantee success though it appears to have worked for others and it’s luckily a very recent resource.

I found this advice from a Shopify Partner and found success with the code in my own theme:

Go to sections > featured-collection.liquid file, find ‘product_card_product’ and add code:


Code:

collection: section.settings.collection,

Finally, if you’d like to attempt these changes yourself, please take some time to familiarize yourself with how Shopify’s code editor works and be sure to create a duplicate copy of your theme to play around in, so in the event that something goes wrong, you still have your current, functional theme in good shape. I hope this helps!

It sounds like you are days away from launching, congratulations! Very excited for you and your business venture. Are you running into any other pain points I might be able to help guide you with?

Also, be sure to study our Launch Checklist so you can feel confident about hitting that Publish button when the times comes!

[KetanKumar]

@shehnaz17

thanks for for all details if you need prev - next product button on product page try this code

• You will need to go to Online Store > Actions > Edit Code.
• Open up the Sections folder and select main-product.liquid.

       {% if collection.previous_product %}
       
{{ '← Previous Product' | link_to: collection.previous_product }}

       {% endif %}
       {% if collection.next_product %}
       {{ 'Next Product →' | link_to: collection.next_product }}

       {% endif %}
     

[shehnaz17]

Hi @KetanKumar Where should exactly, I place this code in main-product.liquid?

[KetanKumar]

@shehnaz17

please share code so i will update

[SocialAutoPost]

Code our partner friend @KetanKumar posted will work. You need to add it under in the main-product.liquid

       {% if collection.previous_product %}
       
{{ '← Previous Product' | link_to: collection.previous_product }}

       {% endif %}
       {% if collection.next_product %}
       {{ 'Next Product →' | link_to: collection.next_product }}

       {% endif %}
     

The most vital thing to know here is it will only work if the Product is OPENED via the COLLECTION page.

The below URL WILL HAVE Previous and Next navigations :

https://support-5156.myshopify.com/collections/ready-to-wear-spring-summer-2021/products/look-16

Below URL WILL NOT have Previous and Next navigations :

https://support-5156.myshopify.com/products/look-16

Image Reference :