VOLT is a Shopify-powered e-commerce template built in Framer. Product data (catalogue, inventory, checkout) is pulled live from a connected Shopify store using the Shopify Connect plugin (by Fecommerce), so content stays in sync between Shopify and Framer without manual duplication.

Pages included

Core functionality

Collections

Keeping colour and type centralised in Framer's Style Guide means every page and component references the same tokens — update one value, and it updates everywhere.

Colours

Colours are organised under Assets → Colours in four folders, so anyone editing the template can find the right token by role instead of guessing a hex value.

Typography

Set these up under Assets → Text Styles.

Apply text styles consistently across components rather than setting font family and size manually per element, so a single style-guide edit cascades through the whole template.

1. 1.Go to the Shopify Partner Program and create a free partner account (no cost).
2. 2.From your Partner Dashboard, click Stores → Add store → Create development store.
3. 3.Choose “Development store” — free, for testing and building, not a live store — and fill in the store details.
4. 4.Once created, open the store and log in to its Shopify Admin. This is your sandbox for adding products, collections and testing checkout.
5. 5.Add a few sample products and collections so you have real data to preview while building in Framer.

1. 1.In your Framer project, press Ctrl + K (Windows) or Cmd + K (Mac) to open the command palette.
2. 2.Search for and open Shopify Connect.
3. 3.In the plugin panel, enter your store domain (e.g. your-store.myshopify.com) and your Storefront API access token — generate it from Shopify Admin → Settings → Apps and sales channels → Develop apps.
4. 4.Go to Components → Products and select the component you want. Add it to your page and connect it to Shopify by configuring the required Framer fields: Shopify domain, access token, collection handle, and any other settings the component needs.

For complete setup instructions, customization details, and Shopify integration guidelines, refer to the full documentation:

Keeping data in sync

Framer's CMS does not auto-refresh when you change something in Shopify. Whenever you add or edit a product, price, image or collection in Shopify Admin:

1. 1.Go back to the Shopify Connect plugin (or the relevant CMS collection) in Framer.
2. 2.Click Refresh / Re-sync.
3. 3.The updated data now reflects on the Framer canvas and the published site.

Global search redirects

For the global search to redirect correctly, these three values must always stay synchronised — and the handle used in Shopify and Framer must match exactly.

Collection & filter setup

For category-based filtering — Men Shirts, Men Hoodies, Women Denim Shorts and so on — filters are managed using Shopify collections and tags. When using collections in the Shopify source field, always use the collection handle in lowercase.

Shopify sync setup

VOLT uses multiple custom Framer code components synchronised with Shopify data. To make sure every Shopify-powered component works:

• Add the correct Shopify store domain.
• Add the correct Shopify access token.
• Verify the Shopify Connect plugin configuration.
• Make sure Shopify API permissions are properly enabled.