Integrating Minimal Webshop with Framer

Learn how to easily add a Minimal Webshop to your framer site. Follow our step-by-step guide to adding the webshop widget and showcase your products.

Available as a video tutorial

Youtube video

Step 1: Create your Framer Website

If you happen to have a website built with framer, integrating a minimal webshop is a pretty straightforward process you can handle yourself. In this guide, we show how to add a minimal webshop to a framer site, using a practical example of a freelance designer's portfolio page where they are selling digital products.

Screenshot of a framer website

Step 2: Set Up Your Webshop

First create an MinimalWebshop account. Then add your products. This is the backbone of your online store, so make sure everything is well organized and presentable. The products that you add here will be directly displayed on your framer site.

Screenshot of MinimalWebshop

Step 3: Copy the Embed Snippet

After having all your products in place, navigate to the 'Settings' section and click on 'Embed Shop.' Here, you’ll find a code snippet. Copy this chunk of code for later use. Remember, this is the bridge that connects your Minimal Webshop to the 'Shop' page you created on your framer site. Keep this code snippet handy as we'll need it in the next step.

Screenshot of MinimalWebshop

Step 4: Embedding the Shop on the framer site

Returning to your framer site, from the 'Insert' menu, find the "Utility" section at the bottom and drag the 'Embed' widget into the spot of your website where you want the webshop to appear.

Screenshot of Embed widget in framer

Step 5: Paste the Code

In the properties sidebar under "Embed", switch "Type" to HTML and then paste the code you copied from MinimalWebshop into the text box below.

Screenshot of Webshop

Further up in the "Size" section, set the width to 80% Rel, the height to 2000 Fixed and add a "Max Width" to 1180 Fixed. You can play with these values to make the webshop fit well into your website.

Screenshot of Webshop

The editor won't show a preview of your webshop, but don't worry, hit the publish button and select update to publish your webshop to your domain.

Step 6: Publish the Webshop on Your Website

And there you have it! You've just added a sleek, minimalist webshop to your framer site.

Screenshot of Webshop
Get started today with MinimalWebshop

Get started today for free

Start selling your own products in no time.

Start a free account today