Kollectin Store Embed Manual

Add your Kollectin store to any website:

You can easily embed your Kollectin Store onto any website—whether you're using a custom HTML site, a builder like Wix or Squarespace, or a CMS like WordPress. This guide walks you through the steps for all major platforms.

🔗 Step 1: Get Your Store iFrame Code

1. Access Your Kollectin Store
   • On the Kollectin App - Share your store link on the App by pressing + > Share My Store
   • Select ‘Share My Store to Shopper’ > Select ‘Copy Link’
   • Open the link in your browser.
2. Log In
   • Click the Menu (top left).
   • Log in with your Kollectin account.
3. Generate Your Embed Code
   • Select “Embed my store on other website” from the menu.
   • You’ll see a iframe representation of your store > Click the COPY button in the lower-right to copy the full iFrame code.

🌐 Step 2: Embed the Code into Your Website

✅ A. For HTML-Based or Custom-Coded Websites

1. Open your site's HTML editor.
2. Paste the iFrame code where you want the store to appear (below is just an example, do not copy the following code):

   <iframe src="https://your-store.kollectin.com/embed" width="100%" height="600px" style="border:none;"></iframe> 

3. Save and preview the changes.

✅ B. For Website Builders

Wix

• Add an Embed Code element.
• Paste your iFrame code inside it.
• Resize and adjust position.
• Publish.

Squarespace

• Insert a Code Block on your page.
• Paste the iFrame code.
• Save and publish.

Shopify

• Go to Online Store > Pages or Themes > Customize.
• Use the HTML editor or custom liquid section to paste the iFrame.
• Save and publish.

Webflow

• Drag in an Embed component.
• Paste the iFrame code.
• Adjust layout and publish.

✅ C. For WordPress

1. Log into WordPress Admin
   • Navigate to Pages or Posts in the dashboard.
   • Choose the one you want to edit and click Edit.
2. Add a Custom HTML Block
   • In the Gutenberg editor, click the “+” icon.
   • Search for and select “Custom HTML.”
3. Paste the iFrame Code
   • In the Custom HTML block, paste the iFrame code (below is for example only, do not copy):

     <iframe src="https://your-store.kollectin.com/embed" width="100%" height="600px" style="border:none;"></iframe> 

4. Preview and Publish
   • Click Preview to make sure the store looks correct.
   • Click Publish or Update to save changes.

💡 Pro Tips

• Set width="100%" to ensure the store fits all screen sizes.
• Adjust height as needed based on your content layout.
• If your website has restrictions on embedding, contact your web provider or developer for help inserting HTML.