How can we help?

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.

Step 1: Add the Cart Component

1. Open the Frameship Plugin:

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

2. 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.

Step 2: 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.

2. 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.

Note: You will see a banner in the cart if you have not activated your license or you are using a free trial of Frameship. Purchase or activate your license to remove this banner.

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