Components List
Components List
Design and publish your e-commerce site in Framer, manage it with Shopify, and let ShopiFrame make it easy.
Design and publish your e-commerce site in Framer, manage it with Shopify, and let ShopiFrame make it easy.
Core Components
Core Components
Config Plugin
Config Plugin
This component is used to connect your store to Shopify and must be used on all your pages. However, since it does not need to be visible, you can use position: absolute to hide it.
You need to obtain your Storefront Domain and Storefront Access Token from Shopify.
Open this component and paste the copied values.
You can also set a font as default
This component is used to connect your store to Shopify and must be used on all your pages. However, since it does not need to be visible, you can use position: absolute to hide it.
You need to obtain your Storefront Domain and Storefront Access Token from Shopify.
Open this component and paste the copied values.
You can also set a font as default
Download Products Button
Download Products Button
After setting up your Shopify store, you can use this button to export your product data from Shopify and then import it into the Framer CMS.
Ensure you have completed the necessary configurations in the previous step
Run your project in preview mode in Framer.
Click this button to download the CSV file.
Create a table in the Framer CMS titled "products".
Create the specified fields in the Framer CMS: title, slug, productID, collection, vendor, productType, tags, featuredImage, description.
Import the downloaded file into "products" table.
You can also perform all these steps manually without using this button
After setting up your Shopify store, you can use this button to export your product data from Shopify and then import it into the Framer CMS.
Ensure you have completed the necessary configurations in the previous step
Run your project in preview mode in Framer.
Click this button to download the CSV file.
Create a table in the Framer CMS titled "products".
Create the specified fields in the Framer CMS: title, slug, productID, collection, vendor, productType, tags, featuredImage, description.
Import the downloaded file into "products" table.
You can also perform all these steps manually without using this button
Cart Components
Cart Components
Cart
Cart
Framer Component
This is a Framer component created from several other ShopiFrame components, and you can modify its design and layout.
You can use the Cart as an overlay or as a page in your project.
This is a Framer component created from several other ShopiFrame components, and you can modify its design and layout.
You can use the Cart as an overlay or as a page in your project.
Cart
Empty
Subtotal
Shipping, taxes, and discount codes calculated at checkout.
Cart
Empty
Subtotal
Shipping, taxes, and discount codes calculated at checkout.
Cart Items List
Cart Items List
With this component, you can view the list of items added to the shopping cart. Additionally, all parts of this component are customizable, and you can define an empty state to display when there are no items in the list.
With this component, you can view the list of items added to the shopping cart. Additionally, all parts of this component are customizable, and you can define an empty state to display when there are no items in the list.
Cart Checkout Button
Cart Checkout Button
By clicking on this component, the user is redirected to the Shopify checkout page. You can change its text and apply your desired style to it.
By clicking on this component, the user is redirected to the Shopify checkout page. You can change its text and apply your desired style to it.
Cart Subtotal
Cart Subtotal
You can display the subtotal amount of the shopping cart using this component.
You can display the subtotal amount of the shopping cart using this component.
Cart Counter
Cart Counter
You can display the live number of items in your shopping cart with this component.
You can display the live number of items in your shopping cart with this component.
Product Components
Product Components
Product Add to cart Button
Product Add to cart Button
With this component on the product page, you can add the product to the shopping cart.
You can change its text and apply your desired style to it.
With this component on the product page, you can add the product to the shopping cart.
You can change its text and apply your desired style to it.
Product Counter
Product Counter
With this component on the product page, you can specify the quantity before adding item to the shopping cart.
With this component on the product page, you can specify the quantity before adding item to the shopping cart.
Product Image Carousel
Product Image Carousel
You can use this component to display product images dynamically (directly from Shopify).
Be sure to provide the productID so it works correctly on product page.
You can use this component to display product images dynamically (directly from Shopify).
Be sure to provide the productID so it works correctly on product page.
Product Card
Product Card
Framer Component
This is a Framer component that you can use to display product cards. The price component from our plugin is used in it.
By opening this component, you can customize it in any way you like.
This is a Framer component that you can use to display product cards. The price component from our plugin is used in it.
By opening this component, you can customize it in any way you like.
Product Price
Product Price
You can use this component to display the price of products. The productID must be provided.
If you do not want to display a badge when a product is sold out, you can remove the sold out value. Additionally, when there are multiple prices for a product, the "Start from" option is used, which you can also remove.
Furthermore, on product page, when you select a value for variants, this component will automatically update.
You can use this component to display the price of products. The productID must be provided.
If you do not want to display a badge when a product is sold out, you can remove the sold out value. Additionally, when there are multiple prices for a product, the "Start from" option is used, which you can also remove.
Furthermore, on product page, when you select a value for variants, this component will automatically update.
Product Variants
Product Variants
This component displays the variants set for each product, and users can select them on the product page.
This component must be used on the product page, even if no variants exist and the productID must be set.
This component displays the variants set for each product, and users can select them on the product page.
This component must be used on the product page, even if no variants exist and the productID must be set.
Need more information? Contact us via: support@shopiframe.com
Made by
XQuad™