Embeds

​

Live demo

​

Adding it

<script src="https://shoply.gg/sdk/embed.js" defer></script>

<!-- The whole product: the buyer picks the option first. -->
<button data-shoply-product="PRODUCT_ID">Buy now</button>

<!-- One option: straight to paying. -->
<button data-shoply-product="PRODUCT_ID" data-shoply-variant="VARIANT_ID">Buy now</button>

​

What a button can say

​

Filling in what you already know

<button
  data-shoply-product="PRODUCT_ID"
  data-shoply-email-from="#email"
  data-shoply-billing-name="Ada Lovelace"
  data-shoply-billing-country="GB">
  Buy now
</button>

​

From your own script

shoplyEmbed.open({ product: "PRODUCT_ID", variant: "VARIANT_ID", theme: "dark" });

shoplyEmbed.open({
  product: "PRODUCT_ID",
  email: "ada@example.com",
  billing: { name: "Ada Lovelace", line1: "1 Example Street", city: "London", postalCode: "N1 9GU", country: "GB" },
});

shoplyEmbed.close();

window.addEventListener("shoply:paid", () => {
  // The order has been paid.
});

window.addEventListener("shoply:close", () => {
  // The checkout was closed.
});

​

Your store’s analytics

<script src="https://shoply.gg/sdk/shoply.js"></script>
<script>shoply.init("YOUR_STORE_ID");</script>

​

Things to know

• The checkout runs on checkout.shoply.gg, in a frame. Card details never touch your page.
• Prices, the buyer’s currency, coupons and stock are the same as on your Shoply store.
• The first screen shows the product’s picture, name and price, with View Description under the price where the product has one. It opens the description in a small panel, as plain text.
• A product whose options ask the buyer questions asks them on a page of their own once an option is picked, with Continue to Payment, and the payment waits for the required ones. See custom fields.
• The product’s extras from Upselling are offered under it on the paying screen: one box with an extra’s name, its price and Add. Where there are several, the name opens a list of them. An extra you tick for the buyer starts added, and one you include is listed with the total.
• The buyer’s controls are at the top right: a menu with the look (light or dark) and the language in it, Pay on My Phone, and Currency where your store has adaptive pricing on. With it off there is one currency and nothing to pick. “Secure checkout by Shoply” is the last line at the foot.
• A buyer closes it by pressing anywhere on your page outside it, or with Escape. On a phone, where it covers the screen, it has a cross at the top right as well. Opened by itself, as Pay on My Phone opens it, there is nothing behind it to go back to.
• It has a thin outline, so a dark checkout does not run into a dark page behind it.
• An embed sells one product at a time. For a cart, or for a checkout that is part of your page instead of over it, use the Checkout Kit.
• A product that is private cannot be bought through the embed.