How to sell with Sellfy from your own website/blog
In this article:
How to use your own website with Sellfy
How does the embedded checkout work for customers?
What does the embedded checkout look like on my site?
How to customize the Buy Now button
How to embed All products or a Product category
How to link your website to Sellfy
How to embed the Shopping Cart feature
How to embed Sellfy into WordPress
How to embed Sellfy into Squarespace
How to embed Sellfy using the Wix editor
How to sell from your own website with Sellfy
If you already have a website and want customers to purchase through your own site, you can use Sellfy in two different ways:
- Embed Sellfy onto your website
- Link from your website to Sellfy
Embed Sellfy onto your website
Important! Sellfy provides iframes for all embed options. To use any of the embed options, you need to be able to access your website code and paste the iframe code snippet into your existing website code.
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.
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.
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 from your website to Sellfy
If you prefer using your own custom Buy now buttons for your site 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 > Checkout > Payment at the top of the pop-up window. See the video below:
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 your customers see when purchasing a product from your site.
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
- Go to Store settings > Embed options
- Click Buy now button below Choose Embed Type
- Select Product from the drop-down
- Customize Buy now button (text only)
- 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)
- Copy-paste the code into your website code where you want the button to be displayed
Embedding from the Product preview page
- Go to Products
- From your list, select the product you'd like to embed
- Click Share to the right of the product price
- The action will prompt a pop-up window
- Copy the code below the Buy now button
- 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 (including preview images and the product description) is displayed on your website, rather than just the buy now button.
To embed a single product on your website, follow the steps below:
- Go to Store Settings > Embed options
- Click Single product
- From the list, select the product you want to embed
- Scroll down and Copy the code from the text box
- 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.
- Go Store Settings > Embed options
- Select All products
- If you use Product categories, you can select the category you want to embed from the dropdown
- Scroll down and Copy the code from the text box
- Paste the code into your website HTML or Javascript editor
Note: You can choose which products to show in the embedded window in the Products section. Simply 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 link your website to Sellfy
Important! In order to use this option, you'll need to have access to your website code (WordPress, Squarespace, etc.) and a basic understanding of coding. Sellfy is not able to log into your WebHost account and link your website for you.
If you prefer using your own custom buttons instead of embedding Sellfy, you can do so by linking a button from your website to Sellfy. You can link to any of your Sellfy store pages (simply copy the unique URL from the address bar) or a single product page.
Here's an example of a seller who linked a custom button from their own website to a Sellfy product page by copy-pasting the unique product page URL. They've also linked their website in the (Sellfy) store Navigation menu "RETURN TO SITE" so that customers can easily navigate back to their blog. See how to do this here.
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:
- Go Store settings > Embed options
- Click Buy Now button in the Choose Embed Type section
- Select a product from the drop-down menu
- Scroll down and copy the generated code from the Embed Shopping Cart window (the code will be the same for all products)
- Paste the code into your website's 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:
- Log in to your WordPress account
- Navigate to the Admin panel > Pages > Add new
- Go to Settings in the top right corner, and select Code editor
- Go to your Sellfy account > Store settings > Embed options
- Copy the embed code from the Sellfy embed options (Buy now button, Single product or All products)
- Paste the code into the page editor on your WordPress site
- Customize the height of the widget by changing the number (see the last screenshot of this section) > click Publish
- 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 into Squarespace
To embed Sellfy onto your Squarespace website, you'll first choose what you want to embed. You can select between:
Once you know which option to embed, simply copy-paste Sellfy's embed code to your website code using 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.
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:
- Go to your Wix account > Add
- Select Embed > Embed a site
- Go to your Sellfy account > Copy the web address from the Single product embed option
- Paste the address into the Wix widget > Apply
- Drag and resize the product card inside Wix
- Click Publish
See the demo video below:
FAQs
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 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>.