> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecomwize.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Product Sections and Snippets

> Understand the product section type, its 30+ modular snippets, and how Shopify product data syncs dynamically.

Product sections are a special section type in EcomWize that connects directly to your Shopify store. Unlike other sections where you manually enter content, product sections pull live data from your Shopify products -- titles, prices, descriptions, images, variants, and more. They are essential for any landing page that sells a specific product.

<Frame caption="A product section with snippets for pricing, shipping badges, payment icons, and FAQ.">
  <img src="https://mintcdn.com/ecomwize/lzHHkkDEjyGaRyRC/images/product-section-snippets.png?fit=max&auto=format&n=lzHHkkDEjyGaRyRC&q=85&s=1c60885bf2d55673b9673fd0cc1db961" width="1436" height="1192" data-path="images/product-section-snippets.png" />
</Frame>

## How Product Sections Work

A product section is a composable container that you build by adding **snippets** -- small, modular components that each display a specific piece of product information. You choose which snippets to include, arrange their order, and configure each one individually.

<Steps>
  <Step title="Add a Product section">
    Open the sections panel and select the **Product Details** category. Click the Product section to add it to your canvas.
  </Step>

  <Step title="Link a Shopify product">
    In the Section Settings panel (right sidebar), use the product dropdown to search and select a product from your connected Shopify store. The section will pull in that product's data automatically.
  </Step>

  <Step title="Add and arrange snippets">
    Click the **Add Snippet** button within the product section to browse and add individual snippets. Each snippet you add displays a different piece of product data or a custom element.
  </Step>

  <Step title="Configure the section">
    Select the product section to open the Section Settings panel. Settings for the entire section -- including snippet-specific options like add to cart behavior and reviews provider -- appear in this panel. Text, images, and icons within snippets are edited inline on the canvas.
  </Step>
</Steps>

## Linking a Shopify Product

Before a product section can display real data, you need to link it to a Shopify product:

1. Select the product section on the canvas.
2. In the Section Settings panel (right sidebar), you will see a **Product** dropdown at the top.
3. Click the dropdown and search for your product by name.
4. Select the product. Data from Shopify (title, price, images, variants, etc.) is fetched and applied to all relevant snippets.

<Note>
  The product you link is the **page product**. It applies to all product sections on the page. When you publish to Shopify, the published page always shows the latest information from your Shopify store.
</Note>

## Available Product Snippets

EcomWize offers a wide range of product snippets that you can mix and match within a product section. Here is a complete list:

### Core Product Information

| Snippet                 | Description                                                                                                      |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Product Title**       | Displays the product name pulled from Shopify. Inherits heading typography from your brand style.                |
| **Product Price**       | Shows the current price, compare-at price (strikethrough for discounts), and sale badges.                        |
| **Product Description** | Renders the full product description from Shopify with HTML formatting preserved.                                |
| **Product Images**      | Displays the product image gallery with thumbnails. Supports multiple images with a swipeable/clickable gallery. |
| **Variant Images**      | Shows variant-specific images that change when a customer selects a different variant.                           |

### Purchase Actions

| Snippet                      | Description                                                                                                                                      |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Add to Cart**              | The primary purchase button. Connects to Shopify's cart functionality. Displays "Add to Cart", "Sold Out", or custom text based on availability. |
| **Variant Selectors**        | Dropdown or button-style selectors for product options like size, color, or material.                                                            |
| **Variant Select**           | An alternative variant selector with a different visual style.                                                                                   |
| **Variant Cards**            | Card-based variant selection with images and descriptions for each variant.                                                                      |
| **Selling Plans**            | Subscription/selling plan options (e.g., "Subscribe & Save 15%"). Displays plan frequencies and pricing pulled from Shopify selling plans.       |
| **Selling Plans with Gifts** | Extended selling plan display that includes gift/bonus item information for subscription tiers.                                                  |

### Trust and Social Proof

| Snippet                  | Description                                                                         |
| ------------------------ | ----------------------------------------------------------------------------------- |
| **Star Review**          | Displays a star rating (1-5 stars) with optional review count text.                 |
| **App Star Rating**      | Integrates with review apps to display aggregated star ratings.                     |
| **Trustpilot Badge**     | Displays a Trustpilot review badge with score and review count.                     |
| **Testimonial Carousel** | A mini carousel of customer testimonials embedded within the product section.       |
| **Testimonial Card**     | A single customer testimonial card with avatar, name, review text, and star rating. |
| **UGC**                  | User-generated content grid showing customer photos within the product section.     |

### Product Details

| Snippet                            | Description                                                                                                                                 |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Product Accordion (3 variants)** | Expandable accordion panels for detailed product information like shipping, returns, ingredients, or sizing. Three visual styles available. |
| **Bullet List**                    | A styled list of product features or benefits with checkmarks or custom icons.                                                              |
| **Icon Text**                      | Icon + text pairs for highlighting key product features (e.g., "Free Shipping", "30-Day Returns").                                          |
| **Product Text**                   | A customizable text block for additional product information or marketing copy.                                                             |

### Status and Availability

| Snippet           | Description                                                                           |
| ----------------- | ------------------------------------------------------------------------------------- |
| **Stock Status**  | Displays current stock level with urgency messaging (e.g., "Only 3 left in stock!").  |
| **Low Stock**     | A dedicated low-stock indicator that shows when inventory is running low.             |
| **Delivery Date** | Estimated delivery date calculator that shows expected arrival based on current date. |

### Visual Elements

| Snippet             | Description                                                                                  |
| ------------------- | -------------------------------------------------------------------------------------------- |
| **Payment Icons**   | Displays accepted payment method icons (Visa, Mastercard, PayPal, Apple Pay, etc.).          |
| **Product Tag**     | A styled label/tag element for badges like "Best Seller", "New", or "Limited Edition".       |
| **Notice Box**      | An attention-grabbing notice box for important product information, warnings, or promotions. |
| **Product Box**     | A highlighted content box for featured information.                                          |
| **Two Box**         | Side-by-side content boxes for comparing features or displaying paired information.          |
| **Three Box**       | Three-column content boxes for feature breakdowns.                                           |
| **Kaching Bundles** | Integration with the Kaching Bundles app for displaying product bundle deals.                |

## Adding Snippets to a Product Section

<Steps>
  <Step title="Select the product section">
    Click on the product section on your canvas.
  </Step>

  <Step title="Click Add Snippet">
    Look for the **Add Snippet** button within the product section. It typically appears at the bottom of the existing snippets.
  </Step>

  <Step title="Choose a snippet">
    Browse the available snippets and click one to add it to the product section.
  </Step>

  <Step title="Reorder snippets">
    Once added, drag snippets within the product section to rearrange their order. The order you set in the builder is the order they appear on the published page.
  </Step>
</Steps>

<Frame caption="The snippets library dropdown showing available product snippets.">
  <img src="https://mintcdn.com/ecomwize/lzHHkkDEjyGaRyRC/images/product-snippets-library.png?fit=max&auto=format&n=lzHHkkDEjyGaRyRC&q=85&s=e97ff94890b3d605064a955225e45a7a" width="2734" height="1896" data-path="images/product-snippets-library.png" />
</Frame>

## How Shopify Data Syncs

Product sections use **dynamic data** from your Shopify store. Here is how the syncing works:

* **In the builder:** When you link a product, EcomWize fetches the product data from Shopify and displays it in the preview. This is a snapshot of the data at the time you linked the product.
* **On the published page:** The published page always shows the **current** data from your Shopify store -- if you change a price or description in Shopify, the landing page updates automatically.

<Tip>
  You do not need to republish your page when you update product details in Shopify. Changes to product titles, prices, descriptions, images, and variants are reflected automatically on the published page.
</Tip>

## Product Section vs. Static Sections

|                           | Product Sections                      | Static Sections             |
| ------------------------- | ------------------------------------- | --------------------------- |
| **Data source**           | Live Shopify product data             | Manually entered content    |
| **Updates automatically** | Yes, syncs with Shopify               | No, requires manual editing |
| **Variants and pricing**  | Dynamic from Shopify                  | N/A                         |
| **Add to Cart**           | Functional, connected to Shopify cart | N/A                         |
| **Content editing**       | Limited to Shopify product fields     | Fully customizable text     |

<Warning>
  Product sections require a **connected Shopify store** and a **linked product** to display real data. Without a linked product, snippets will show placeholder content in the builder.
</Warning>

## Template Types and Product Data

When publishing your page to Shopify, the template type affects how product data is loaded:

* **Page template:** Product data is fetched by product handle. Best for standalone landing pages.
* **Product template:** Product data comes from the current product context. Best when the landing page replaces or extends the default product page.

The template type is configured in your page settings before publishing.