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.

1. Insert the Cart Component:

   • Go to the Build section within Frameship.

   • Select the Cart Component and click Add Cart.

   • Drag the cart component to the desired location on 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. This allows you to customize the cart design.

1. Style the Cart Frame:

   • The Cart Frame is the main user interface for the cart. Style it as needed to match your site's design.

2. Customize the Cart Product List:

   • Inside the Cart Frame, you’ll find the Cart Product List, which is linked to items added to the cart.

   • This includes a default layout for when there are products in the cart, as well as an empty cart layout. Both can be styled to your preference.

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

Step 3: Link the Cart to Shopify Data

1. Set Up a Collection List:

   • Click on the Plus icon at the top left.

   • Select Collections and choose the Shopify collection you’ve already set up for your store.

   • Drag this collection list to a neutral area outside of other components so it functions independently.

     

     
     

2. Sync Cart with Collection Data:

   • Click on the Cart Product List component.

   • Scroll to the Component Settings and select your Shopify collection (e.g., “My Store”) to sync the cart with your Shopify products.

Step 4: Test and Publish

1. Preview Your Project:

   • Use the Framer preview to check how items are added to the cart and verify that the cart icon displays the current contents.

2. Publish and Test Live:

   • Publish your Framer site and test the cart functionality on the live site.

   • Check that items are correctly added to the cart and that the cart component updates as expected.

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