Adding your store to any Website
You can embed your entire online store, widgets, single product cards, or “Buy Now” buttons to any existing website or blog in minutes. You’ll just need to copy and paste the store code to your website page, and customers will be able to start purchasing right on your website. It's as simple as copy and paste.
Adding an entire store to an existing website
You can add your entire online store to another website as long as you can add custom code to that site. There may be an HTML, source tab, or a special block or setting where you can add your store code.
Here are the general instructions on how to add an online store to a website:
From your store admin panel, go to Sales channels → Overview.
Scroll to the "Sell on your website" section and click Learn more next to the "Custom website" section.
Click Copy code to Clipboard. This is the ready-made code for your store.
Go to your website editor and open the page where you want to display the store.
Paste the code to the source code for that page. There may be an HTML, source tab, or a separate button to add code — this will vary depending on the website. If you are not sure how to add custom code to your website, please contact your website developer for more detailed instructions.
Save and publish the changes.
After publishing, your store will appear on the website. Your customers can start placing orders, and you can start processing them.
Adding a category of products to an existing website
You can also add just a certain category of products to your website. This way you can show different products on different website pages or even on different websites. All of the orders will appear in your store admin panel or in your mobile apps for iOS or Android.
To show products from a certain category on your website:
Copy this code:
<div id="my-store-STOREID"></div> <div><script data-cfasync="false" type="text/javascript" src="https://app.shopsettings.com/script.js?STOREID&data_platform=code" charset="utf-8"></script><script type="text/javascript"> xProductBrowser("id=my-store-STOREID", "defaultCategoryId=CATEGORYID"); </script></div>Replace STOREID in the code with your store ID. You can copy it from the bottom of your store admin panel.
Replace CATEGORYID in the code with the ID of the category that you want to add to the website. To find the category ID, go to your store admin panel and open the category you want to put on the website. Then copy the ID from the browser address bar. You will see numbers following “id=” — this is the product or category ID:
4. Add the updated code to the source code of your site page, save the changes, and check the result.
That's it. Now the category specified in the integration code will appear on your site. Repeat the above steps for other categories or to add a category to different site pages.
Adding “Buy Now” buttons / single product cards to an existing website
You can also sell products directly anywhere on your site by using “Buy Now” buttons. You can add products to your blog page, sidebar, or any other place on your site. Customers will be able to place orders directly by clicking on the “Buy Now” button.
To add products individually, you will need to copy the desired product’s code and paste it to the website page where you want to show the product.
To add a single product to a website page:
From your store admin, go to Catalog → Products.
Open the desired product.
Open the "Buy Now" button tab:
4. Check the product details you want to display:
5. Select the appearance options. You can see the changes in the preview:
6. Copy the code from the box below:
7. Log in to your site or blog’s admin panel.
8. Paste the code to the desired page. Depending on your website, that may be HTML, source tab, or a separate button to add code. If you are not sure how to add custom codes to your website, please contact your website developer for more detailed instructions.
9. Save and publish the page.
And you're done! A beautiful product card or “Buy Now” button is ready for your customers.