How to embed Sellfy on my website

In this article:

What embed options does Sellfy offer?

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 embed a Product card

How to embed a Store view

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 does Sellfy offer?

If you already have a website and are looking to integrate Sellfy into your existing site, there are three embed options to choose from. You can watch our video below for more information.

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 Product


This will add an entire product, uploaded images, description, and the buy now button onto your site. To customize what this shows, you'll edit the product in Sellfy and then embed the code into your site.

Embed a Store view

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. 

This will add your entire Sellfy store page to your site. It will allow you to take advantage of the Sellfy store page setup, with all your products displayed. Though, if you're simply looking to connect a custom domain to your Sellfy store, you can do this too!


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?

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.


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

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 website: 


How to embed a Product card

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 Product Card
  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 a Store view

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 Store View
  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.

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, Product card or Store view)
  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 Product card 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