Skip to main content

​
Shopify integration

Integrate Selektable into your Shopify store by adding the embed script and widget button to your product template.

​
Setup

​
1. Add the embed script

Add the script to your theme’s theme.liquid file, before the closing </body> tag. Replace store_xxx with your Store ID from the Selektable dashboard: 
<script src="https://app.selektable.com/widgets/embed.js" data-store-id="store_xxx" async></script>

​
2. Add the widget button

Add the following to your product template (typically sections/main-product.liquid or similar): 
<button
  type="button"
  class="selektable-try-on"
  id="selektable-btn"
  data-product-id="{{ product.selected_or_first_available_variant.id }}"
  data-product-image="{{ product.selected_or_first_available_variant.featured_image.src | image_url: width: 1024 | default: product.featured_image | image_url: width: 1024 }}"
>
  View in your room
</button>

<script>
document.getElementById('selektable-btn').addEventListener('click', function() {
  var btn = this;
  Selektable.open('widget_abc123', {
    productId: btn.dataset.productId,
    productTitle: {{ product.title | json }},
    productImage: btn.dataset.productImage,
    productUrl: {{ product.url | json }},
    productImages: [
      {% for image in product.images limit: 5 %}
      {
        id: {{ image.id }},
        src: {{ image.src | image_url: width: 1024 | json }},
        alt: {{ image.alt | json }}
      }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ],

    // Cart integration using Shopify AJAX API
    onAddToCart: async function(product, qty) {
      const response = await fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: product.id, quantity: qty })
      });
      return { success: response.ok };
    },

    onViewCart: function() {
      window.location.href = '/cart';
    },

    onCheckout: function() {
      window.location.href = '/checkout';
    }
  });
});
</script>

​
3. Handle variant changes

Update the button data when the customer selects a different variant: 
<script>
document.addEventListener('variant:changed', function(e) {
  var btn = document.getElementById('selektable-btn');
  if (btn && e.detail && e.detail.variant) {
    btn.dataset.productId = e.detail.variant.id;
    if (e.detail.variant.featured_image) {
      btn.dataset.productImage = e.detail.variant.featured_image.src;
    }
  }
});
</script>
The variant:changed event name depends on your theme. Some themes use variantChange or dispatch custom events. Check your theme’s JavaScript for the correct event name.

​
Order webhooks

To enable conversion tracking, set up an order webhook:
  1. Go to Settings → Notifications → Webhooks
  2. Create a webhook:
    • Event: Order creation
    • URL: https://app.selektable.com/api/webhooks/shopify/orders
    • Format: JSON

​
Styling the button

Add CSS to match your theme: 
.selektable-try-on {
  /* Match your theme's button styles */
  display: inline-block;
  padding: 10px 20px;
  margin-top: 10px;
  cursor: pointer;
}