Skip to main content

Custom pages

Sesami can be integrated with any page on the web.

In a Shopify store​

You can add the Sesami button to any page, Anywhere on your store.

Static pages​

First, you have to create a static page and place this snippet on the page code:

<form method="post" id="cartform" action="/cart/add">
  <input type="hidden" name="id" data-productid="PRODUCT-ID" value="VARIANT-ID">
  <div
    id="sesami__buttonWrapper"
    data-sesami-product-id="PRODUCT-ID"
    data-sesami-variant-id="VARIANT-ID"
  ></div>
  <input type="submit" value="Add to cart">
</form>

note

Replace PRODUCT-ID and VARIANT-ID

Home page​

Using a similar approach, you can add the Sesami button to the home page of your store, Some themes let you pick a Featured product to be displayed on the home page, and if you want to display a Sesami service as a Featured product, you can find the theme file that renders featured product section and add this code to it:

{% if product.tags contains "sesami-service" %} 
  <div
    id="sesami__buttonWrapper"
    data-sesami-product-id="{{product.id}}" data-sesami-variant-id="{{product.selected_or_first_available_variant.id}}"
  ></div> 
{% endif %}

Not sure what is a product tag? check Product tagging

On an external website​

Sesami does have the needed components to be integrated with any external website using the Shopify storefront APIs.

  • The following Sesami wrapper element needs to be present on the page with an additional shop-idattribute:
info

Please check Anatomy of Sesami button if you are not familiar with the different options you can pass to the Sesami button.

<div
  id="sesami__buttonWrapper"
  data-sesami-product-id="PRODUCT_ID"
  data-sesami-shop-id="SHOP_ID"
  data-sesami-variant-id="VARIANT_ID">
</div>
  • Also, since this is an external website, Sesami script needs to be added manually:
<script async src="https://cdn.sesami.co/shopify.js"></script>

After these two steps, sesami:loaded event will be fired on the window whenever the Sesami button is loaded on the page, after the Sesami button is loaded, the change event can be listened to on the input fields that are created inside the wrapper element.

Depending on business logic, an order can be created with these properties right after the change event, or after clicking an “Add to cart” button similar to the normal Shopify flow.

Read more about Sesami events