Narrative Theme - how to avoid the Add to Cart button (in the product page) to send to cart page?

BennettParkar
New Member
1 0 0

Hello guys!

Could you please help me how to avoid the Add to Cart button in the product page to send me directly to cart page? I`d like to stay in product page because my clients frequently buy more then 3 different products, so it`s annoying when then go to cart and need to come back to shop so many times. 

I`d like the Add to Cart button behave like it behaves when the sliding cart drawer is turned on. But I don`t want to turn the sliding cart Drawer on.

Thank you guys!

0 Likes
Bo
Shopify Staff
Shopify Staff
1684 178 490

Hey there, @BennettParkar 

 

Bo here from Shopify Support! 

 

That is a really great question and it can be achieved with some coding. This tutorial is specific to an unedited version of the Narrative theme, (VERSION 9.0.9). We cannot guarantee results for themes that have been modified with custom coding and/or apps. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial.

 

Edit your theme code

To edit your theme code:

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Layout directory, click theme.liquid.

    prodpage02.png

  4. Find the closing </body> tag. On a new line right above the closing </body> tag, paste the following code:

    {% render 'ajaxify-cart' %}

     




  5. Click Save.
  6. In the Snippets directory, click Add a new snippet:

    prodpage05.png

  7. Name your snippet ajaxify-cart, and click Create snippet:

    prodpage06.jpg

    Your new snippet will open in the code editor.

  8. In your new ajaxify-cart.liquid file, paste this code hosted on GitHub.

    Caution: In the pasted code, replace all instances of .size() with .length. The .size() method is depreciated as of JQuery 1.8.

  9. Click Save.

Click here to view a demo store that lets customers stay on the product page when they add products to the cart. Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

 

Bo | 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
ZoeW
New Member
1 0 0

Hi there just wondering if this has been updated as I cannot see how to make this work on my site - please let me know if there is a step missing as the demo also appears to be showing incorrectly? Thank you 

0 Likes
Bo
Shopify Staff
Shopify Staff
1684 178 490

Hey there, @ZoeW 

 

This tutorial appears to be up to date and the demo store is working: 

 

This tutorial prevents the customer from being brought to the cart page as soon as they add an item to their cart on the Narrative theme. Is this what you are trying to achieve? Could you send me a link to your store so that I can check it out, please? Could you please also let me know what device and browser you are using when testing out the add to cart function? Thank you! 

 

All the Best,

Bo 

Bo | 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
jmeredith65
New Member
1 0 0

Hello @Bo ,

I have a quick question. I have implemented this add to cart work around and am now much closer to the end result I am trying to achieve, however there are two issues left. It's also worth noting that I am using this fix on a product page created with a 3rd party app. I am having the following 2 issues.

1. Currently the notification icon is not popping up next to the cart icon that's located in the upper right corner of the screen. I am trying to get it to pop up with its animation. For example In your demonstration video, you add a pair of sunglasses and get a "1" next to your cart. On my site, this icon is just a plain circle that will animate onto the screen next to the cart button.

2. I would like the cart drawer to pop open showing the newly added items inside once the add to cart button is pressed.

How may I implement these features using the Ajaxify fix and is this even possible with a 3rd party page builder?

 

0 Likes
Bo
Shopify Staff
Shopify Staff
1684 178 490

Hey there, @jmeredith65 

 

As there is a third-party page builder involved here I will be unable to assist you with this issue. I would recommend reaching out to the developer of the app for support.

 

Your other request go beyond what we can support here at Shopify Support. What I would recommend is looking into hiring a Shopify Expert.

 

All the Best,

Bo

Bo | 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