Wix Dynamic Product Pages: Boost Sales with Custom CMS & Velo Add-to-Cart

Optimizing the Customer Journey for Complex Product Catalogs

For many e-commerce store owners, presenting a vast catalog of products efficiently can be a significant challenge. This is especially true for businesses dealing with numerous complementary items, such as replacement parts for a primary product, where customers often need to purchase multiple items in a single transaction. The traditional method of requiring customers to navigate to dozens of individual product pages to add items to their cart can lead to frustration, abandoned carts, and ultimately, lost sales.

A common aspiration among store owners is to create a streamlined experience: a single, dynamic page where customers can view a specific subset of products, select quantities, and add them all to the cart without endless navigation. While platforms like Wix offer robust e-commerce and content management systems, achieving this level of custom integration requires a nuanced understanding of their underlying data structures and the strategic application of development tools.

Understanding the Data Divide: Store Catalog vs. CMS Collections

The core of this challenge lies in the separation of data layers within many e-commerce platforms. In Wix, for instance, your Wix Store catalog—where all your products, prices, and inventory reside—operates independently from your Content Management System (CMS) collections, which are designed for flexible, dynamic content display. While you can enable Wix Apps to connect with CMS for general product display, directly importing a specific product category from your store into a CMS collection for advanced cart functionality isn't an out-of-the-box feature.

This means that simply populating a CMS collection with product details won't automatically link those items to your store's shopping cart mechanism. An item displayed via a CMS repeater, by default, isn't inherently recognized as a purchasable store product by the cart system without further intervention.

The Solution: Bridging the Gap with Hidden Products and Velo Code

The most effective strategy to create a dynamic, multi-item add-to-cart experience involves a clever combination of your existing Wix Store products, a dedicated CMS collection, and custom Velo code. This approach allows you to leverage the best of both worlds: the robust e-commerce functionality of your Wix Store and the flexible display capabilities of dynamic pages and repeaters.

Step 1: Prepare Your Wix Store Products

Ensure all the items you wish to display on your custom dynamic page (e.g., all your replacement parts) are set up as individual products within your Wix Store. Crucially, you might consider making these products 'hidden' in your store if their primary access point will be this new dynamic page. This prevents them from cluttering your main shop pages while still being fully functional for purchase.

Step 2: Create and Populate Your CMS Collection

Create a new CMS collection (e.g., 'ReplacementPartsDisplay'). This collection will serve as the data source for your dynamic page's repeater. For each replacement part, you will add an item to this collection. Include fields for all the information you want to display on your dynamic page, such as:

Part Name: (Text field)
Description: (Text field)
Image: (Image field)
Price: (Number field)
Product ID: (Text field) - This is the critical link. For each item, you will manually enter the unique _id of its corresponding product from your Wix Store. You can find this ID by going to your Wix Dashboard > Store Products, clicking on a product, and looking at the URL (it's usually a long alphanumeric string after /product/).

While manual entry for the 'Product ID' might seem redundant, it's a one-time setup that creates the essential bridge between your custom display and your store's cart system.

Step 3: Design Your Dynamic Page with a Repeater

Create a new dynamic page and connect it to your 'ReplacementPartsDisplay' CMS collection. Drag a repeater onto your page and bind its elements (text for name/description, image, price) to the corresponding fields in your collection. Within each repeater item, add:

A Number Input element (e.g., quantityInput) for customers to select quantities.
An Add to Cart Button (e.g., addToCartButton).

Step 4: Implement Velo Code for Cart Integration

This is where Velo (Wix's development platform) comes into play. You'll write a small piece of code to instruct the 'Add to Cart' button to interact with your Wix Store's cart API, using the 'Product ID' from your CMS collection.

Enable Developer Mode in your Wix Editor. Then, add an onClick event handler to your 'Add to Cart' button within the repeater. The code will look something like this:

import wixStores from 'wix-stores-backend'; // Use wix-stores-backend for server-side if needed, otherwise wix-stores-frontend for client-side

$w.onReady(function () {
  $w("#repeater1").onItemReady(($item, itemData, index) => {
    const productId = itemData.productID; // 'productID' is the field key from your CMS collection
    const quantityInput = $item("#quantityInput"); // ID of your number input in the repeater
    const addToCartButton = $item("#addToCartButton"); // ID of your add to cart button in the repeater

    addToCartButton.onClick(() => {
      const quantity = Number(quantityInput.value);
      if (productId && quantity > 0) {
        wixStores.cart.addProducts([
          { productId: productId, quantity: quantity }
        ])
        .then(() => {
          console.log("Product added to cart!");
          // Optionally, show a success message or open the cart sidebar
          wixStores.cart.openCart(); 
        })
        .catch((error) => {
          console.error("Error adding product to cart: ", error);
          // Handle errors, e.g., show an error message to the user
        });
      } else {
        console.warn("Invalid product ID or quantity.");
      }
    });
  });
});

This Velo code snippet listens for clicks on each 'Add to Cart' button in the repeater. When clicked, it retrieves the specific productID from the CMS item data and the selected quantity. It then uses the wixStores.cart.addProducts() function to add the actual Wix Store product to the customer's cart, mimicking a direct purchase.

Enhanced Customer Experience and Conversion Potential

Implementing this solution offers significant benefits. Customers can effortlessly browse a curated list of relevant products, adjust quantities, and add multiple items to their cart from a single, intuitive interface. This drastically reduces friction in the purchasing process, particularly for high-volume or complex orders like replacement parts. The outcome is often a smoother customer journey, increased average order value, and higher conversion rates for these specific product segments.

While the initial setup involves a learning curve with Velo, the investment pays dividends in creating a superior user experience that directly impacts your bottom line. Thorough testing of the dynamic page, repeater bindings, and the Velo code is essential to ensure a seamless and error-free shopping experience for your customers.

Streamlining Multi-Item Purchases: Advanced Product Display on Wix with CMS and Velo