Shopify

Suggest Edits

Background

Spresso Price Optimization is a plug and play solution to provide dynamic pricing functionality to every item in your catalog. Using our proprietary AI, we can fine tune pricing on a per-SKU basis to maximize gross margin OR conversion rates based on your priorities.

How it works

You can get up and running with Spresso in 3 easy steps:

  1. Send us your current catalog. The preferred method of delivery is a nightly SFTP upload - just like you would to any other ad / affiliate network.
  2. Install our JS SDK on your Shopify store.
  3. Wherever pricing is displayed on your Shopify store, replace your static prices with Spresso DOM markers.

Technical Details

Catalog Intake

Timely and up to data catalog information is a core component of fueling Spresso's AI model.

👉

Refer to catalog guide here for details and methods.

JS SDK

For a SPA, or a system where you have full control over the HTML files, add the Spresso snippet to the <head> of your HTML.

<script	
src=”https://spressoURL”
type=”text/javascript”
async=”true”
>
</script>

For all other implementations, add this code somewhere in your JS bundle.

const spressoInit = (options) => {  
    window.SpressoSdk = window.SpressoSdk || {  
        init: function (o) {  
            SpressoSdk.options = o;  
        },  
    };  
    var s = document.createElement('script');  
    s.type = 'text/javascript';  
    s.async = true;  
    s.src = 'https\://spressoURL’;  
    s.onload = function () {  
        window.SpressoSdk.init(options);  
    };  
    var x = document.getElementsByTagName('script')[0];  
    x.parentNode.insertBefore(s, x);  
};

Then in your main JS entry point, run:
spressoInit({ … any options here });

Displaying Dynamic Pricing with DOM markers.

In order to ensure that Spresso’s AI-generated prices are displayed, replace your static pricing from the HTML and replace it with markers that tell Spresso’s SDK what price to inject. The Spresso JS code registers a mutation observer which searches the DOM for any Spresso data attributes. When it finds the data attribute, it will replace the content of that element, if blank, with an AI-generated price from Spresso’s system. If the element is not blank, Spresso will leave the contents unchanged.

Original HTML:
<span class="price-display">{price}</span>

Spresso-compatible HTML:

<span  
      class="price-display"  
      data-spresso-item-id=”SKU-123”  
      data-spresso-id-type=”ProductSku”  
      data-spresso-pricing-display=”range”  
      data-spresso-fallback-id=”987123”

>
  &nbsp;&nbsp;&nbsp;&nbsp&nbsp;

</span>

NOTE: The reason we use multiple spaces ( ) above is to ensure that when the price is injected by Spresso’s system, the DOM element retains its width and does not get resized.

Description of DOM markers:
data-spresso-item-id: The identifier Spresso uses to determine which item’s price to inject. You can use any unique identifier, provided you send us the entire list of identifiers when delivering your catalog.

data-spresso-id-type: The type of the identifier provided, available options are VariantSku (default), ProductSku, VariantId (the variant primary key in your system), ProductId (the product primary key in your system) or a custom identifier type you create during catalog intake.

data-spresso-pricing-display: If the identifier type above is ProductSku or ProductId, the display attribute must be provided. This allows Spresso to determine how to display pricing for the product. The available options are min, max and range. Min will display the price of the lowest-cost variant of this product, Max displays the price of the highest-cost variant and range displays both min and max prices, separated by “ - ”

data-spresso-fallback-id: The primary key for this item in your e-commerce system. This is used in scenarios where a price from Spresso’s API is unavailable for any reason (ex: catalog intake not completed). Since you are removing all prices from your HTML, if Spresso’s API cannot return a price for this item, we use the fallback identifier to fetch the catalog price via your Shopify's API and display that instead so that an end user always sees a price where one should be displayed.

data-spresso-price-context: Indicates to the Spresso AI system the part of your site on which the price is being displayed. Available options are gallery (default) and pdp. Any location where the product is displayed as part of a list, i.e. ad-hoc carousel, personalized gallery etc should all use gallery or not add this attribute, pdp should be used only for the main item on a PDP page.

Please reach out to the Spresso team to set up time with a sales engineer discuss integration options and to better understand your unique store setup and any customizations you may have already made

Updated 20 days ago