How can we help?

This guide will help you connect Framer with Shopify to create an e-commerce website directly within Framer using our Frameship plugin. By following these steps, you’ll sync your Shopify store with Framer, set up product displays, and configure essential e-commerce components.

Step 1: Open the Frameship Plugin

1. Open Framer and navigate to the Plugins section.

2. Open the Frameship plugin. You’ll find options for building your e-commerce website, including:

   • Templates: Quick-start with pre-built pages.

   • Sections: Pre-designed sections for customizable layouts.

   • Components: Individual elements like product listings and cart buttons.

Tip: Starting with templates is easiest, but sections and components offer flexibility if you want a more custom design.

Step 2: Sync Your Shopify Store

1. Go to Framer CMS, then back to Plugins to open the Frameship plugin.

2. Create a new collection:

   • Name it (e.g., “My Store”).

3. Connect to Shopify:

   • Click on Connect and follow these steps in Shopify.

Sync Shopify Details

• Public URL:

  • In Shopify, preview your online store and copy the public URL.

  • Return to Framer and paste this URL into Frameship.

    

  
  

• Storefront API Access Token:

  • In Shopify, search for “Build Custom Apps.”

  • Create a new app (name it as you wish, e.g., “Framer Connection”).

  • Configure Storefront API Scopes: (EXTREAMLY IMPORTANT)

    • Enable the following permissions:

      • Unauthenticated Write Checkouts

      • Unauthenticated Read Checkouts

      • Unauthenticated Read Product Listings

      • Unauthenticated Read Product Inventory

  • Save and Install the app.

  • Copy the Storefront API Access Token and paste it into Frameship to connect your Shopify store.

4. Once connected, click Import Products to pull all your Shopify products into Framer.

Note: Any updates in Shopify (like new products) can be synced by pressing Sync in Framer.

Step 3: Build Your Website

1. In Framer, go to your canvas and create a new page.

2. Link this new page to the Framer CMS, creating a CMS page for your store collection.

3. Start designing your homepage:

   • Add components from your collection or start with pre-built sections for ease.

   • Customize as desired.

4. To display product information:

   • Select any item (e.g., a product title), then use the content settings to link it to the relevant CMS data, such as the product title, price, or inventory level.

Step 4: Product and Cart Details

1. Product Details:

   • Link components like price, inventory, and variants to your Shopify data to display live product information.

2. Cart Setup:

   • Add the Cart Component to your navbar:

     • Open Frameship, click on Build, and drag the Cart Component to your page.

     • Customize it to suit your design needs.

       

       
       

3. Sync Cart with Your Collection:

   • Go to Collections in the Framer toolbar and add a collection list for your store.

   • Select your cart product list component, set its collection to “My Store,” and save.

Step 5: Test and Publish

1. Preview and Test:

   • Preview your site and test the functionality of the add-to-cart and checkout buttons.

2. Publish:

   • Once satisfied, publish your website.

Now, users can view products, add items to their cart, and complete their checkout directly on your site.

Additional Customizations

You can enhance your store with various features:

• Variants and Product Lists.

• Image Gallery or other Functional Components like the "Add to Cart" button.

And that's it! You’re now set to build and launch a fully functional e-commerce website with Frameship and Framer.