Supercharge Store
Embed products into your own site
At times, you may want to embed products into a custom-built site of your own, but you don't want to go through the hassle of writing code and/or interacting with our API.
In that event, we offer a seamless embed modal that can be displayed within your own site, and lets visitors make purchases without leaving your website or be redirected to a SellApp product page.
Let's dive into how you can do so.
Generating embed code
To start generating embed code, you'll want to navigate to your products dashboard
For the relevant product(s), toggle them on the left hand side next to the product's title
Once you've toggled all of the products you'd like to embed, select the "Generate embed code" option in the navigation bar. Here's how that looks
A modal will pop up with a HTML file. Here's what you'll want to do:
Copy the
<link href="https://cdn.sell.app/embed/style.css" rel="stylesheet" />
and place it in your site's<head>
sectionCopy the
<script src="https://cdn.sell.app/embed/script.js" type="module"></script>
and place it right before your site's closing</body>
sectionCopy the button(s) and place it in the relevant area where your customer will click
Once done, save your site's code and you'll be good to go. Now, when a visitor clicks on the button that you've pasted, our embed modal will appear and seamlessly guide the visitor through the purchase process.
Embed options
As you may have noticed, the embed button's code has a few options that you can set. Here's what they are:
data-sell-darkmode
By default, this is set to
false
. Our embed is shown in 'normal/light' mode, meaning the embed's background is light and all elements are clear.You can set the value to
true
if you'd like the embed to be dark mode; this will make the embed's background dark and all elements darker.
data-sell-theme
- This input accepts a 6-digit HEX color such as
#000000
or#FFFFFF
. The HEX color passed will be used to style certain elements within your embed, so feel free to personalize it to your liking.
- This input accepts a 6-digit HEX color such as
data-sell-variant
- In the event your product has multiple variants and you want to display a specific variant immediately, you can do so by passing the variant's ID in this value.
Happy selling!