This guide will walk you through adding a functional shopping cart to your Framer site using the Frameship plugin. By following these steps, you'll be able to configure, style, and connect the cart component to your Shopify store data, enabling a complete cart experience for your e-commerce site.

Add the Cart Component

1. Open the Frameship Plugin

In Framer, go to Plugins and open the Frameship plugin.

1. Insert the Cart Component

Go to the Components section within Frameship, then go to the Cart tab.

Select the Cart Component and drag it onto your canvas.

Customize the Cart UI

1. Unlink the Cart Instance

Double-click on the cart component to open it, then unlink the instance.

Inside the cart, you will see the Cart Button and the Cart Layer. Double-click on the Cart Layer to open this, and unlink the instance as well.

This allows you to customize the cart design.

1. Optional Styling

Each part of the Cart Component is customizable. You can adjust colors, fonts, and spacing within the Cart Product List to match your brand’s style.

The cart is not functional on preview or published without a paid license activated. Purchase & activate a license to remove banner on published sites.

And that’s it! You’ve successfully added and connected a fully functional shopping cart to your Framer site with Frameship.