How to embed Sellfy on my website

In this article:

What embed options are there?

How does the embedded checkout work for customers?

What does the embedded checkout look like on my site?

How to embed a Buy now button

How to customize the Buy Now button

How to embed a Single product

How to embed All products or a Product category

How to embed the Shopping Cart feature

How to embed Sellfy into WordPress

How to embed Sellfy using the Wix editor

FAQ about embed options


What embed options are there?

If you already have a website and are looking to integrate Sellfy into your existing site, you can embed Sellfy choosing one of the embed options below: 

Embed a Buy now button

This will add a single button to your site. You'll add one button for each product that you're selling. These buttons can be customized and paired with your own site designs, product images, and product description.

Embed a Single product

This option allows you to add a single product with uploaded images, the product description, including the buy now function onto your site. To customize what this shows, you'll edit the product in Sellfy and then embed the code into your site.

Embed All products or a Product category

This allows you to either embed all of your products or a selection of products to your site. It also allows you to take advantage of the Sellfy store page setup. Though, if you're simply looking to connect a custom domain to your Sellfy store, you can do this too!

Link a product page

If you prefer using your won custom Buy now buttons for your site and instead of Sellfy's embed options, you can link the product page to the button by copy-pasting the unique product page URL from the Product editor.

Note: If you are selling from your own website using the embed method, you can enable the cross-domain measurement function to track statistics with Google Analytics. 


How does the embedded checkout work for customers?

Your customers will select the buy now button, and the checkout experience will start for them in a pop-up modal window. They'll be able to stay on your website throughout the checkout process and complete their transaction in the pop-up window. If you choose to enable upsells, they'll be offered to the customer in the pop-up window as well.

If you'd like to allow your customers to add multiple items to their cart before checking out, then you can pair your embed choice of buy now button or product with the shopping cart feature!

What does the embedded checkout look like on my site?

Important! To bypass the Add to cart page and send customers directly to the checkout page, use the Buy now button embed and do not enable the Shopping cart feature.

The checkout journey begins when customers click on the Buy Now button of the product. Then, a pop-up window will appear prompting them to select Add to cart (if you have enabled the shopping Cart feature) to proceed with the purchase. If you are selling different variations of a product, customers can choose a variant from the dropdown menu here.

After they've added the product to the cart, the customer will need to click Continue to proceed to the checkout. At the checkout stage, customers can review their order, including tax charges if you have set up taxes for products, and click Continue to enter their payment details.

Customers are able to follow the checkout journey from Product to Payment at the top of the pop-up window. See below for images:

Note: if you've set up one payment method only for your store, or the product is a Freebie, the payment step is omitted and customers will finish their purchase at the third (checkout) step.

You can review the checkout process directly in your Sellfy account > Embed options > All products > click the Buy now button of a product. The pop-up window is exactly what you're customers see when purchasing a product from your site using Sellfy's embed checkout. 

Here's how it works:


How to embed a Buy Now button 

The process of embedding the Buy Now button involves the copy-paste of a code snippet into your existing website code. If you're not familiar with the terms HTML and Javascript, you may want to contact your site administrator about placing the button.

There are two ways to generate the embed code and insert the button on your site:
  • Using the Embed code generator
  • Through the Product preview page

Using the Embed code generator

  1. Log into your Sellfy account
  2. Navigate to Store settings > Embed options
  3. Click Buy now button below Choose Embed Type
  4. Select Product from the drop-down 
  5. Customize Buy now button (text only)
  6. Preview the result (to refresh the preview and see the text change click anywhere outside of the button text entry field after entering the new button text)
  7. Copy-paste the code into your website code where you want the button to be displayed

Embedding from the Product preview page

  1. Log in to your Sellfy account
  2. Navigate to Products
  3. From your list, select the product you'd like to embed
  4. Click Share to the right of the product price
  5. The action will prompt a pop-up window
  6. Copy the code below the Buy now button
  7. Paste the code into your Website HTML where you want the button to be displayed

How to customize the Buy Now button

Once you've successfully placed the Buy now button on your site, you can customize it to match the style of your website. For more detailed information about how to customize the Buy now button, please refer to this article: How to customize the Sellfy Buy now button?

Here's a great example of a customized Buy Now button on one of our seller's Wordpress websites: 


How to embed a Single product

With this option, the entire embedded product will be displayed on your website, rather than just the buy now button.

To embed a single product on your website, follow the steps below:
  1. Log into your Sellfy account
  2. Navigate to Store SettingsEmbed options
  3. Click Single product
  4. From the list, select the product you want to embed
  5. Scroll down and Copy the code from the text box 
  6. Paste the code into your website HTML or Javascript editor

How to embed All products or a Product category

With this option, you can display all the products that are on your store page in one window and use the store pages, store search and other offered features on your own site page! Though, if you'd rather simply connect your own domain to your Sellfy store, you can do this too.

  1. Log into your Sellfy account
  2. Navigate to Store SettingsEmbed options
  3. Select All products
    1. If you use Product categories, you can select the category you want to embed from the dropdown
  4. Scroll down and Copy the code from the text box 
  5. Paste the code into your website HTML or Javascript editor

Note: You can choose which products to show in the embedded window if you navigate to Products in your user dashboard. There, one-by-one, select the product(s) you'd like to make visible or invisible on your store page and switch the Visible on Sellfy store page toggle on/off in the product editor.


How to embed the Shopping Cart feature

Note: This feature is not compatible with other services, and can't be used on its own. The Shopping Cart will only function with the products you've embedded from Sellfy.com on your site. 

Embed the shopping cart directly onto your site to let your customers purchase multiple products in one go. Without the shopping cart, your customers will be prompted to checkout after selecting the buy now buttons.
To add this feature to your website, follow the instructions below:
  1. Log into your Sellfy account
  2. Navigate to Store settingsEmbed options
  3. Click Buy Now button in the Choose Embed Type section
  4. Select a product from the drop-down menu
  5. Scroll down and copy the generated code from the Embed Shopping Cart window (the code will be the same for all products)
  6. Paste the code into your website HTML


How to embed Sellfy into WordPress

You can integrate Sellfy with your WordPress website by using one of the Sellfy embed options.

Important! WordPress requires a Business or eCommerce account in order to embed the iframes that Sellfy offers. For more details, you can read more here.

To embed the Buy now button, a Product card or Store view into your WordPress site, follow these steps:

  1. Log in to your WordPress account
  2. Navigate to the Admin panel > Pages > Add new
  3. Go to Settings in the top right corner, and select Code editor
  4. Go to your Sellfy account > Store settings > Embed options
  5. Copy the embed code from the Sellfy embed options (Buy now button, Single product or All products)
  6. Paste the code into the page editor on your WordPress site
  7. Customize the height of the widget by changing the number (see the last screenshot of this section) > click Publish 
  8. Your site will now display the Sellfy widget you chose to embed

Note: To get your Sellfy embed code, you must first upload products to your Sellfy account. Only once you uploaded your product files are you able to retrieve the embed codes from your Sellfy account.

Once you click publish, visitors will be able to purchase your products without leaving your WordPress website.


How to embed Sellfy using the Wix editor

If your website is hosted with Wix, we recommend using Wix's embed widget to embed Sellfy onto your Wix website. 

You'll follow these steps:

  1. Go to your Wix account > Add
  2. Select Embed > Embed a site
  3. Go to your Sellfy account > Copy the web address from the Single product embed option
  4. Paste the address into the Wix widget > Apply
  5. Drag and resize the product card inside Wix
  6. Click Publish

See the demo video below:


FAQ about embed options

Q: Does my customer stay on my site for the checkout process? 

A: Yes, your customer will complete their transaction in the pop-up modal window, and they'll stay on your site throughout the entire process.

Q: Can I use the upsell feature with the embedded options?

A: Yes! Your customer will see the upsell option in the pop-up window after they add an item to their cart. They'll be able to add it to their cart or they can decline the offer.

Q: If I embed my store page on my site, will it include a shopping cart?

A: You may enable the Shopping Cart feature on your user dashboard. This will let your customers purchase multiple products at once.

Q: Can I create a custom domain for my store?

A: Yes, absolutely. The Custom Domain feature allows you to make your Sellfy storefront into an extension of your existing website.

Q: What is an iframe embed?

A: An iframe is an HTML document embedded inside another HTML document on a website. The iframe HTML element is often used to insert content from another source, in this case - your products or store.

Q: Is SSL required on my site to embed my product/store?

A: No, an SSL secured website is not required.

Q: I'm using Squarespace. Can I embed Sellfy on my website?

A: Yes, you'll want to use the "code blocks" that Squarespace offers to embed Sellfy. To do this, you will need the Premium feature that's available with Squarespace's Business and Commerce plans. Read more here

Q: I'm using Wix for my website. When I embed the store view, the embed window is cut off and does not stretch across the page. What can I do?

A: In the embed code that you copy from Sellfy, find the height section at the end and change the percentage to 100%. The code should end with height="100%"></iframe>.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us