Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Tip

Using Add to cart buttons in preezie results has shown to…

  • Increase conversion rate by 10%

    • e.g. 50% of shoppers now engage with the results with 7% going on to buy

  • Gain between 2-11% add to cart CTR (dependent on the product types)

  • Over 2x the average result page conversion rate when clicked compared

    • This ranges from 5-30% of those who use add to cart go on to buy

  • Increase the engagement with the result page to 50%

Tip: Use this feature with Stacks bundling to grow Conversion AND AOV

Here’s a guide to adding add to cart buttons to your preezie product recommendations. This allows shoppers to directly purchase their preezie recommendations:

...

  • id: the exact product variant id that will be added to the cart, note this needs to match the id passed to prz_addToCartId as above

  • quantity: the quantity that is being passed, i.e. 1

Code Block
languagejs
setTimeoutconst przAddToCartEventInterval = setInterval(() => {

  const przWidget = document.getElementsByClassName('preezie-widget-app')[0]
  if if(przWidget) {
    clearInterval(przAddToCartEventInterval)
    przWidget.addEventListener('przAddToCartEvent', (event) => {
      // !!!!!!!!!!!!IMPORTANT!!!!!!!!!!!!
      // event: { detail: { id: '125173761', quantity: 1 } }


       // addPlease implement your own custom "logic to handle the 'add to cart"' eventsevent here

    })

  }          

}, 2000);

Hence each time the add to cart button is clicked przAddToCartEvent is fired and subsequently the actions within your customised script above.

Note

Example Below
As an example, here’s a custom example of a Shopify add to cart script

...

.
Updates are needed, please read the code comments below for instructions on updates.
(Note, you need to update the fetch

...

URL to your own

...

,
and you need to implement the logic to update the cart UI on your site)

Code Block
<script>
        setTimeout
  const przAddToCartEventInterval = setInterval(() => {
             const przWidget = document.getElementsByClassName('preezie-widget-app')[0]
             if (przWidget) {
                 clearInterval(przAddToCartEventInterval)
      przWidget.addEventListener('przAddToCartEvent', (event) => {
                console.log(event.detail);
                fetch("https://preezietest
        //!!!!!!!Important!!!!!!!
        // Please note that this is an example only.
        // You will need to implement your own custom logic to handle the 'add to cart' event on your site.
        fetch('https://changeme.myshopify.com/cart/add.js"', {
                 
          method: "'POST", 
                 ',
          mode: "'cors"',
                           cache: "'no-cache", 
                 ',
          credentials: "'same-origin", 
                 ',
          headers: {
                    "
            'Content-Type"': "'application/json"    
                 '
          },
                 
          redirect: "'follow", 
                 ',
          referrerPolicy: "'no-referrer", 
                 ',
          body: JSON.stringify({" items": event.detail })
      ), 
              });
            })
          }          
         }).then((response) => {
          // Put your cart UI code here
        })
      })
    }
  }, 2000);
     
</script>

Turn on and style your buttons

...