The Basic Starter Theme in Shopyflow is designed to give you a fully functional eCommerce foundation right out of the box. Built on Finsweet’s Client-First framework, this theme includes pre-configured Shopify data collections, dynamic product listings, customer account pages, and a fully integrated cart system.
The Basic Starter Theme doesn't require any configuration after the installation and Shopify Data Import, you can directly start styling your store.
In this walkthrough, we’ll explore its key components, from the header and cart system to the product pages and Klaviyo integration, helping you understand how everything connects so you can start customizing with confidence.
The Basic Starter Theme is a pre-configured Webflow template designed to integrate seamlessly with Shopify through Shopyflow. It comes with six CMS collections to store real-time Shopify data and includes a full set of Shopyflow components for building an advanced eCommerce site.
This theme is built using Finsweet’s Client-First framework, ensuring a structured and minimal styling approach for easy customization. It’s also fully compatible with third-party component libraries like Relume. All Shopyflow components are marked with a double-dash (--) prefix, indicating that they include Shopify-related functionality. You can find detailed documentation for these components using their assigned names.
Features dynamically sourced Collections and Tags from the Webflow CMS.
Pre-configured with Shopify’s multi-currency support (requires customization based on your store's currencies).
Includes a dynamic search module that show results as the user types.
Links to customer account pages and login screens.
Triggers the Shopyflow Cart Popup when clicked (not handled by Webflow interactions).
An entire cart component opens in a popup when a product is added to cart.
Features an inline cart module, where cart items dynamically update as users add products.
Includes a sign-up form.
Features both login and password recovery forms.
Allows users to activate their accounts.
Provides a form for resetting passwords.
Displays order history and saved address information.
Shows a detailed breakdown of past orders.
An opt-in form for Klaviyo. Simply enter your Klaviyo API key in the Shopyflow Webflow app and set the Klaviyo List ID to activate it.
The Shopyflow setup process seamlessly connects your Shopify store with Webflow, allowing you to manage products, variants, and taxonomies directly within Webflow’s CMS. This walkthrough covers the installation of the Shopyflow Shopify App, connecting it to a Webflow project, and importing Shopify data into Webflow.
When building Product Listings in Webflow with Shopyflow, each product item functions as a Buy Module—meaning you can include components like add-to-cart buttons, dynamic image galleries, and variant option selectors within each item. However, Webflow’s nested collection limitations allow only one nested collection per page, which can create challenges when displaying both image galleries and variant selectors dynamically.
In this guide, we’ll walk through how to work around this limitation while ensuring your Buy Modules remain fully functional. We’ll explore how gallery image thumbnails are sourced from Shopify via Webflow’s CMS, using the single nested collection slot for images while still dynamically displaying variant options on page load. Let’s take a closer look at how this setup works!
The Basic Starter Theme is a pre-configured Webflow template designed to integrate seamlessly with Shopify through Shopyflow. It comes with six CMS collections to store real-time Shopify data and includes a full set of Shopyflow components for building an advanced eCommerce site.
This theme is built using Finsweet’s Client-First framework, ensuring a structured and minimal styling approach for easy customization. It’s also fully compatible with third-party component libraries like Relume. All Shopyflow components are marked with a double-dash (--) prefix, indicating that they include Shopify-related functionality. You can find detailed documentation for these components using their assigned names.
Features dynamically sourced Collections and Tags from the Webflow CMS.
Pre-configured with Shopify’s multi-currency support (requires customization based on your store's currencies).
Includes a dynamic search module that show results as the user types.
Links to customer account pages and login screens.
Triggers the Shopyflow Cart Popup when clicked (not handled by Webflow interactions).
An entire cart component opens in a popup when a product is added to cart.
Features an inline cart module, where cart items dynamically update as users add products.
Includes a sign-up form.
Features both login and password recovery forms.
Allows users to activate their accounts.
Provides a form for resetting passwords.
Displays order history and saved address information.
Shows a detailed breakdown of past orders.
An opt-in form for Klaviyo. Simply enter your Klaviyo API key in the Shopyflow Webflow app and set the Klaviyo List ID to activate it.
The Shopyflow setup process seamlessly connects your Shopify store with Webflow, allowing you to manage products, variants, and taxonomies directly within Webflow’s CMS. This walkthrough covers the installation of the Shopyflow Shopify App, connecting it to a Webflow project, and importing Shopify data into Webflow.
When building Product Listings in Webflow with Shopyflow, each product item functions as a Buy Module—meaning you can include components like add-to-cart buttons, dynamic image galleries, and variant option selectors within each item. However, Webflow’s nested collection limitations allow only one nested collection per page, which can create challenges when displaying both image galleries and variant selectors dynamically.
In this guide, we’ll walk through how to work around this limitation while ensuring your Buy Modules remain fully functional. We’ll explore how gallery image thumbnails are sourced from Shopify via Webflow’s CMS, using the single nested collection slot for images while still dynamically displaying variant options on page load. Let’s take a closer look at how this setup works!
