Intro to components
An overview on how to use our Shopify-connected Framer components.
In this doc, we'll cover:
Intro to components
Our Framer components are pre-built, customizable UI elements that you can use to build your e-comm store on Framer. They're specifically designed to work with your store's data and functionality.
Intro to components
Our Framer components are pre-built, customizable UI elements that you can use to build your e-comm store on Framer. They're specifically designed to work with your store's data and functionality.
Intro to components
Our Framer components are pre-built, customizable UI elements that you can use to build your e-comm store on Framer. They're specifically designed to work with your store's data and functionality.
Things to consider
Things to consider
Things to consider
These components won't always render or function properly in your Framer canvas or preview
Make sure you are testing everything in a real browser environment.
These components won't always render or function properly in your Framer canvas or preview
Make sure you are testing everything in a real browser environment.
These components won't always render or function properly in your Framer canvas or preview
Make sure you are testing everything in a real browser environment.
Make sure your components are always up to date
Go to the Assets panel and click on the purple "Update" link beside any component that has it.
Make sure your components are always up to date
Go to the Assets panel and click on the purple "Update" link beside any component that has it.
Make sure your components are always up to date
Go to the Assets panel and click on the purple "Update" link beside any component that has it.
Inserting components
You can insert our components into the canvas from our plugin. If you are using a template, they come with our components already on the canvas and connected to the CMS.
Inserting components
You can insert our components into the canvas from our plugin. If you are using a template, they come with our components already on the canvas and connected to the CMS.
Inserting components
You can insert our components into the canvas from our plugin. If you are using a template, they come with our components already on the canvas and connected to the CMS.
Connecting productID
If you are using a component with a "productID" variable field, it needs to be connected to the CMS to display the correct data and function properly.
Connecting productID
If you are using a component with a "productID" variable field, it needs to be connected to the CMS to display the correct data and function properly.
Connecting productID
If you are using a component with a "productID" variable field, it needs to be connected to the CMS to display the correct data and function properly.
1
Insert / select the component
It will need to be inside a CMS Collection or CMS Page.
1
Insert / select the component
It will need to be inside a CMS Collection or CMS Page.
1
Insert / select the component
It will need to be inside a CMS Collection or CMS Page.
2
Connect the productID variable to the matching CMS field
Click on the + icon beside the "productID" field and select "productID" from the list.
2
Connect the productID variable to the matching CMS field
Click on the + icon beside the "productID" field and select "productID" from the list.
2
Connect the productID variable to the matching CMS field
Click on the + icon beside the "productID" field and select "productID" from the list.
3
If nesting components, connect the variable on every level
Simply keep feeding the variable up to the canvas where it is then connected to the CMS.
3
If nesting components, connect the variable on every level
Simply keep feeding the variable up to the canvas where it is then connected to the CMS.
3
If nesting components, connect the variable on every level
Simply keep feeding the variable up to the canvas where it is then connected to the CMS.
Customizing components
Our components are designed for maximum flexibility and customization directly within the Framer interface. Each component can be modified in several ways to match your brand's aesthetic and functional requirements.
Customizing components
Our components are designed for maximum flexibility and customization directly within the Framer interface. Each component can be modified in several ways to match your brand's aesthetic and functional requirements.
Customizing components
Our components are designed for maximum flexibility and customization directly within the Framer interface. Each component can be modified in several ways to match your brand's aesthetic and functional requirements.
Things to consider
Things to consider
Things to consider
Instances are used to reference your own design elements from the canvas
This gives you 100% native control over customizations.
Instances are used to reference your own design elements from the canvas
This gives you 100% native control over customizations.
Instances are used to reference your own design elements from the canvas
This gives you 100% native control over customizations.
Array components automatically duplicate to match the number of items in your data
For example, Variant Selectors and Cart Product Cards will repeat themselves as many times as needed to display all items.
Array components automatically duplicate to match the number of items in your data
For example, Variant Selectors and Cart Product Cards will repeat themselves as many times as needed to display all items.
Array components automatically duplicate to match the number of items in your data
For example, Variant Selectors and Cart Product Cards will repeat themselves as many times as needed to display all items.
Control all text properties
For any text that is dynamically set, you can control how they are styled as well as the text strings.
Control all text properties
For any text that is dynamically set, you can control how they are styled as well as the text strings.
Control all text properties
For any text that is dynamically set, you can control how they are styled as well as the text strings.
Stay updated
Release notes, promos, & more
© Copyright Framer Commerce 2024.
Stay updated
Release notes, promos, & more
© Copyright Framer Commerce 2024.
Stay updated
Release notes, promos, & more
© Copyright Framer Commerce 2024.