Integrating Minimal Webshop with Framer

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.

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.

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.

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.

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

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.

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.

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