Versions Compared

Key

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

Turning on add Using Add to cart buttons in your preezie results has proven to increase conversion rate by at least 2x!For example, typical conversion rate of completed users = 5%, add to cart users = 10% conversionshown 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

...