Add to cart buttons

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:

Note, we highly recommend testing the feature first by adding to a test or cloned journey in isolation before adding to your live journeys!

1 For Shopify customers
2 Custom integration for all other eCommerce platforms
- 2.1 Connect it to your product feed
- 2.2 Turn on the feature
- 2.3 Add your custom code
- 2.4 Turn on and style your buttons
3 Turn on and style your buttons
- 3.1 Style your buttons
4 For Magento customers (coming soon)

For Shopify customers

Connect it to your product feed

To connect your Shopify feed to your cart, you’ll need to add the Product ID join to our preezie results. Please get in touch with support@preezie.com to help you with this, the steps are:
- In https://doorman.preezie.com/home/importer/product-fields choose your Product database
- Click Create New Field
  - Name: prz_addToCartId
  - Type: String
  - Feed Path: variants/id
  - Hit Save

Now you have added a new product field you need to re-run your feed (or wait for it to run automatically) for each product to propagate the Shopify ID value into prz_addToCartId
To do it manually: Go to https://admin.preezie.com/app/products/feeds find your feed, hit Run
- Once the feed has Success status, go to https://admin.preezie.com/app/products/products and find any product to check the new field is present, for example:

Turn on the feature

Then turn on the feature in your CMS admin > Settings > Tenant settings
Get in touch with support@preezie.com if you need help with this
- In the admin tab select Shopify then Active
- If your website has a custom shopping cart integration then you can add an optional Redirect for the shopper directly to your cart page (in a new tab)
  - This is used in the case where the cart is not automatically refreshed when preezie adds products to your cart, i.e. it looks like nothing has happened!
- Hit > Save API Integration

Turn on and style your buttons

You’re now ready to turn on and style your buttons, see the styling guide below.

Custom integration for all other eCommerce platforms

Connect it to your product feed

To connect your feed to your cart, you’ll need to add the Product ID field that your website’s add to cart is using to map to your preezie database attributes. This is the join between the results and your website’s cart. Please get in touch with support@preezie.com to help you with the steps below
- In https://doorman.preezie.com/home/importer/product-fields choose your Product database
- Click Create New Field
  - Name: prz_addToCartId
  - Type: String
  - Feed Path: (this needs to match your feed’s cart product id, e.g. id)
  - Hit Save

Now you have added a new product field you need to re-run your feed (or wait for it to run automatically) for each product to propagate the Product ID value into prz_addToCartId
To do it manually: Go to https://admin.preezie.com/app/products/feeds find your feed, hit Run
- Once the feed has Success status, go to https://admin.preezie.com/app/products/products and find any product to check the new field is present, for example:

Turn on the feature

Turn on the feature in your CMS admin > Settings > Tenant settings
Get in touch with support@preezie.com if you need help with this
- In the admin tab select Custom then Active
- If you require it then you can add an optional Redirect to your cart page after the shopper clicks add to cart (in a new tab)
- Hit > Save API Integration

Add your custom code

Now the feature is on, each time the add to cart button is clicked a preezie custom event przAddToCartEvent will fire. You then need to place this script on your pages with your own custom add to cart events that your platform uses.

The event param requires 2 variables to be passed,

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

const przAddToCartEventInterval = setInterval(() => {
  const przWidget = document.getElementsByClassName('preezie-widget-app')[0]
  if (przWidget) {
    clearInterval(przAddToCartEventInterval)
    przWidget.addEventListener('przAddToCartEvent', (event) => {
      // !!!!!!!!!!!!IMPORTANT!!!!!!!!!!!!
      // event: { detail: { id: '125173761', quantity: 1 } }
      // Please implement your own custom logic to handle the 'add to cart' event here
    })
  }
}, 2000)

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

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)

<script>
  const przAddToCartEventInterval = setInterval(() => {
    const przWidget = document.getElementsByClassName('preezie-widget-app')[0]
    if (przWidget) {
      clearInterval(przAddToCartEventInterval)
      przWidget.addEventListener('przAddToCartEvent', (event) => {
        //!!!!!!!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

You’re now ready to turn on and style your buttons, see the styling guide below.

Turn on and style your buttons

Now go to the workflow where you want to show add to cart buttons > Edit
UI Result & Behaviours > check Show Add to Cart button on results page
Add to cart button text on result page > Type the CTA text that each button will show, e.g. Add to cart
- Hit Save

Style your buttons

By default your buttons will be styled the same as your Learn more buttons, if you’re not using these or want to style add to cart differently then follow these steps:

In your workflow Edit > Test Guide Widget

Now choose RESULTS > Product result > CTA behaviour
- Here you have various configurations to style position, design and hover states:

RESULTS > Product result > CTA behaviour: Config name	Options	What it does

RESULTS > Product result > CTA behaviour: Config name	Options	What it does
Button positions	First / Second
Learn more font	preezie fonts or your uploaded custom font
Add to cart font	preezie fonts or your uploaded custom font
Add to cart behaviour
Optional copy	Text field	Copy shown underneath the add to cart button, e.g. Free shipping over $50
Added button text	Text field	Button text shown when they add to cart
Use custom icon	On/Off
Icon / Hover state / Added state	Image upload	Upload an image to replace the HTML button. You can use different images for
Mobile sizing / Desktop sizing
Learn more sizing
Learn more width	px	Optional fixed width of the button in pixels. If blank the px is taken from NAVIGATION > Footer Buttons width
Learn button margin top	Gap between the button and the item above it
Add to cart sizing
Button width	px	Optional fixed width of the button in pixels. If blank the px is taken from NAVIGATION > Footer Buttons width
Margin top	Gap between the button and the item above it
Font size, Text color etc,	Various	Controls various colours, sizing of the buttons

This means you’ll be able to match your website’s button design:

Once you hit Save! this will be immediately reflected in your widget.

For Magento customers (coming soon)

Coming soon.