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

0.00

Shipping, taxes, and discount codes calculated at checkout.

Cart

Empty

Subtotal

0.00

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.

0.00
0.00

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.

0

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.

1
1

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™