In this guide, we will walk you through how this process works, including customizing your collections to match your website aesthetic.
Finding Embed options 🔎
When you select your collection that you would like to to embed on your website, select "share" and then "embed".
Embedding as a Widget vs. Products only
Widget: When choosing to embed your collection as a Widget, visitors of your site will be able to see the name of the collection, your name, as well as a scrollable list of what is featured in that collection. They will have the option of clicking "view collection", which will take them to your shoppable page on SideDoor. When an item is clicked, they will be directed to more information about that individual product (instead of the entire collection) and they can then choose to add to cart for purchase.
Products Only: Choosing "products only" allows designers to share the entire collection as a snippet on their website.
When embedding, there's an option to make the visible grid larger, or smaller by expanding or contracting the bottom right-hand corner. This will automatically adjust the size of the code snippet that gets coded into your website, and it will be live and shoppable on your site as you wish it to be shown.
After you have finished making adjustments and customizations to your collection that you wish to embed, you will see a code snippet appear at the bottom of this page.
It should look like this:
To embed this code on your site, simply copy this code snippet and paste it within the HTML code on your site, or by inserting it as a 'custom code' block on your CMS (content management system), such as Squarespace, Wix, WordPress, or others.
For more context on how the HTML <iframe> tag works, take a look at this helpful page from the official W3Schools site here.
If you have any questions about embeds, how they work, and how to implement them, please feel free to contact the SideDoor customer success team by either the chat feature on the bottom-right of your screen or by emailing us at: [email protected].
-Your SideDoor CS team