Back

How to Connect Shopify with Framer

Integrating Shopify with Framer allows you to combine the powerful e-commerce capabilities of Shopify with the design flexibility of Framer. This step-by-step guide will walk you through the process of turning any Framer site into a fully functioning Shopify store using Framer Commerce by Matt Jumper.

Nabeel

Founder @ SegmentUI

What is FramerCommerce?

FramerCommerce is a seamless integration tool created by by Matt Jumper that allows you to turn any Framer site into a Shopify store with native customization and zero code management.

FramerCommerce leverages the Shopify API to sync product data such as images, prices, variants, and availability with your Framer site. Use Shopify to manage core product data, which can be imported into Framer CMS for design and content customization. Components can be copied and pasted into any new or existing Framer project and are highly customizable, allowing for design and personalization within Framer while managing product data in Shopify.

DISCLAIMER - FramerCommerce is not associated with SegmentUI. The contents from this post are from their own website and video tutorials.

Step 1: Set Up Shopify

  1. Get Shopify API Credentials:

    • Set up the Shopify app as per the documentation on Framer's site.

    • Obtain the access token from Shopify’s dashboard.

    • Copy the Shopify subdomain (e.g., your-store.myshopify.com).

  1. MagicImport Tool (optional):

    • If you have many products, use the MagicImport tool to export Shopify products into a CSV file.

    • This tool can be found at framercommerce.com/magicimport.

    • Input your Shopify domain and API access token, then download the CSV file.

Step 2: Configure Framer CMS

  1. Create a New Collection in Framer CMS:

    • Name the collection (e.g., Shop).

    • Edit fields to match the product data structure. Ensure all necessary fields (e.g., product name, price, image, variants) exist.

  1. Import CSV Data:

    • Use the import button to upload the CSV file into the Framer CMS.

    • The fields should be automatically populated.

Step 3: Add Global Components

  1. Shopify Wrapper Component:

    • Copy the Shopify wrapper component from the Framer Commerce base template.

    • Paste it into your site and replace the placeholder text with your Shopify domain and access token.

  1. Navigation Component:

    • Copy the navigation component that includes the cart and live cart counter from the base template.

    • Paste it into your site’s navigation area. This component includes the cart trigger, live cart counter, and checkout button.

Step 4: Create Product Cards and Pages

  1. Product Card Component:

    • Copy the product card component along with its CMS collection from the Framer Commerce base template.

    • Paste it into your shop collection page in Framer.

    • Configure the CMS collection to display products dynamically.

  1. Configure Related Products (Optional):

    • Add a filter to the related products section to exclude the current product.

    • Configure the related products section to display relevant items.

  2. Setup Shop Page (Optional):

    • Create a main shop page and add the product collection without filters.

    • Customize the layout (e.g., grid layout) to fit your design preferences.

Step 5: Style, Test and Publish

  1. Style Components
    Customize the product cards, navigation, and other components to match your site’s aesthetic.

  2. Test
    Ensure the add-to-cart button triggers the modal with cart details. Verify that the cart counter updates correctly and checkout works smoothly

  3. Publish the Site
    Once all components are in place and styled, publish your Framer site and test the live site to ensure all elements are functioning correctly.

Conclusion

By following these steps, you can successfully integrate Shopify into your Framer site, creating a powerful and visually appealing e-commerce platform. Enjoy the design flexibility of Framer while leveraging the robust e-commerce capabilities of Shopify.

Additional Resources

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

Is this a one time payment or a subscription?

Will I get future updates if I purchase now?

Is there a free version?

Do you have a student discount?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

Is this a one time payment or a subscription?

Will I get future updates if I purchase now?

Is there a free version?

Do you have a student discount?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT