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: Connect Your Shopify Store

1. Follow the steps to either connect your store, or our demo store.

2. Connect using these:

   1. Public URL:

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

      • Return to Framer and paste this URL into Frameship.

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

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

3. For more detail and video instructions, find them here.

Sync Shopify Details

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

• Create a new collection:

  • Name it (e.g., “Frameship”).

4. Once connected, click Sync to pull all your Shopify products into Framer. Any updates in Shopify (like new products) can be synced by pressing Sync in the CMS.

Step 4: Connect your License

1. Go into the plugin settings, and click on Manage Licenses.

   

2. Select the license you wish to connect and press Activate.

3. If you do not have a license, click on Buy License.

4. You will then have a connected license! You will see the green dot and URL of your site next to the license that is attached.

Step 5: Create your Product Pages

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 Components, then Cart and insert the Cart component to your page.

     • Customize it to suit your design needs within each component.

       

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 Components such as Multi-Currency or User Account buttons.

  
  

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