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

# Building pages with the Cartble section editor

> Add, configure, and reorder drag-and-drop page sections in Cartble — covering all section types for homepage, product, collection, contact, and about pages.

The Cartble section editor lets you build and customize every page in your storefront without writing code. Each page type has its own section stack, and you can add, reorder, and configure sections through the **Design** panel in your admin dashboard. Some sections are locked to specific page types, and a few are restricted by industry.

## Page types and the section editor

Your storefront has six page types, each with its own independent list of sections:

| Page type    | Description              |
| ------------ | ------------------------ |
| `index`      | Your homepage            |
| `resource`   | Individual product pages |
| `collection` | Collection listing pages |
| `contact`    | Contact page             |
| `about_us`   | About us page            |
| `search`     | Search results page      |

Each section definition declares which page types it is `availableOn`. You can only add a section to a page type it supports.

## Locked sections

Two sections are locked and cannot be removed from their page:

* **Resource information** (`resource_main`) — always present on product pages
* **Collection resources** (`collection_main`) — always present on collection pages

Locked sections can still be configured; you just cannot delete them.

<Warning>
  Removing a locked section is not possible through the section editor. They are required for the page to function correctly.
</Warning>

## All section types

<AccordionGroup>
  <Accordion title="Hero banner">
    A full-width banner with a background image or video, overlay controls, and up to two CTA buttons.

    **Available on:** homepage, product, collection, contact

    | Setting               | Type     | Description                                         |
    | --------------------- | -------- | --------------------------------------------------- |
    | Title                 | Text     | Main heading text                                   |
    | Subtitle              | Textarea | Supporting copy below the title                     |
    | Background image      | Image    | Desktop background image                            |
    | Background video URL  | Text     | URL to an MP4 file or AI-generated cinematic video  |
    | Section height        | Select   | `small`, `medium`, `large`, or `full` (full screen) |
    | Content alignment     | Select   | `left`, `center`, or `right`                        |
    | Overlay type          | Select   | `solid` color or `gradient` vignette                |
    | Overlay color         | Color    | Overlay fill color (default `#000000`)              |
    | Overlay opacity       | Range    | 0–100 (default 40)                                  |
    | Text color            | Color    | Heading and body text color (default `#ffffff`)     |
    | Button text           | Text     | Primary CTA label                                   |
    | Button link           | URL      | Primary CTA destination                             |
    | Secondary button text | Text     | Optional second CTA label                           |
    | Secondary button link | URL      | Optional second CTA destination                     |
  </Accordion>

  <Accordion title="Image slider">
    A multi-slide banner with separate desktop and mobile images per slide, transition effects, and autoplay.

    **Available on:** homepage, product, collection

    **Section settings:**

    | Setting                | Type     | Description                            |
    | ---------------------- | -------- | -------------------------------------- |
    | Slider height          | Select   | `small`, `medium`, `large`, or `full`  |
    | Transition effect      | Select   | `slide` or `fade`                      |
    | Pagination style       | Select   | `dots` or progress `bars`              |
    | Enable autoplay        | Checkbox | Auto-advances slides (default on)      |
    | Autoplay speed         | Range    | Seconds between slides (default 5)     |
    | Show navigation arrows | Checkbox | Show previous/next arrows (default on) |

    **Blocks (up to 6 slides):**

    Each slide block has its own title, subtitle, desktop image, mobile image, content alignment, overlay color and opacity, text color, and a single CTA button with label and link.
  </Accordion>

  <Accordion title="Featured collection">
    Displays a grid of products from a chosen collection with a configurable column count and optional "View All" link.

    **Available on:** homepage, product, contact

    | Setting              | Type              | Description                                     |
    | -------------------- | ----------------- | ----------------------------------------------- |
    | Title                | Text              | Section heading (default "New Arrivals")        |
    | Subtitle             | Text              | Supporting text below the heading               |
    | Collection           | Collection picker | The collection to pull products from            |
    | Resource limit       | Number            | How many products to show (default 4)           |
    | Resources per row    | Select            | `2`, `3`, or `4` columns                        |
    | Alignment            | Select            | `left` or `center`                              |
    | Show "View All" link | Checkbox          | Adds a link to the full collection (default on) |
  </Accordion>

  <Accordion title="Rich text">
    A block of formatted text content with an optional heading, useful for brand storytelling or policy text.

    **Available on:** homepage, product, collection, contact

    | Setting   | Type      | Description                           |
    | --------- | --------- | ------------------------------------- |
    | Title     | Text      | Section heading (default "Our Story") |
    | Content   | Rich text | Full rich-text body content           |
    | Alignment | Select    | `left`, `center`, or `right`          |
  </Accordion>

  <Accordion title="Newsletter">
    An email signup form with flexible layout and background options, including an LGPD consent checkbox.

    **Available on:** homepage, product, contact

    | Setting              | Type     | Description                                  |
    | -------------------- | -------- | -------------------------------------------- |
    | Title                | Text     | Heading (default "Subscribe to our emails")  |
    | Subtitle             | Textarea | Supporting copy                              |
    | Button text          | Text     | Submit button label (default "Sign up")      |
    | Layout               | Select   | `centered` or `split` (image alongside form) |
    | Split layout image   | Image    | Image shown in split layout                  |
    | Background style     | Select   | `solid`, `gradient`, or `image`              |
    | Background color     | Color    | Used when style is solid                     |
    | Gradient from / to   | Color    | Start and end colors for gradient            |
    | Background image     | Image    | Used when style is image                     |
    | Overlay opacity      | Range    | Opacity over background image (default 50)   |
    | Text color scheme    | Select   | `light` (white) or `dark` (black)            |
    | Require LGPD consent | Checkbox | Adds a consent checkbox (default on)         |
    | Consent text         | Textarea | Custom consent copy                          |

    <Note>
      The LGPD consent checkbox is enabled by default to help stores operating in Brazil comply with the Lei Geral de Proteção de Dados.
    </Note>
  </Accordion>

  <Accordion title="Resource information (locked)">
    The main product information block on a product page. This section is **locked** and cannot be removed.

    **Available on:** product only

    | Setting      | Type   | Description                                              |
    | ------------ | ------ | -------------------------------------------------------- |
    | Layout style | Select | `stacked` (image above info) or `columns` (side by side) |

    **Blocks:**

    You configure which information blocks appear and in what order:

    | Block                | Description                                                                                       |
    | -------------------- | ------------------------------------------------------------------------------------------------- |
    | Title & Price        | Displays the product name and price                                                               |
    | Variants & Options   | Renders variant selectors (size, color, etc.)                                                     |
    | Add to Cart Button   | The primary purchase action                                                                       |
    | Structured Accordion | Up to four collapsible sections for description, materials, shipping, or custom metafield content |

    The Structured Accordion supports up to four items. Item 1 always renders the product description. Items 2–4 each have a title, optional rich-text content, and an optional metafield connection that overrides the manual content when set.
  </Accordion>

  <Accordion title="Collection resources (locked)">
    The main product grid on a collection page. This section is **locked** and cannot be removed.

    **Available on:** collection only

    | Setting            | Type   | Description                              |
    | ------------------ | ------ | ---------------------------------------- |
    | Resources per page | Number | Number of products per page (default 12) |
  </Accordion>

  <Accordion title="Contact form">
    A customer contact form with optional phone field and configurable alignment.

    **Available on:** contact, homepage

    | Setting           | Type     | Description                             |
    | ----------------- | -------- | --------------------------------------- |
    | Title             | Text     | Form heading (default "Get in Touch")   |
    | Subtitle          | Textarea | Supporting copy                         |
    | Button text       | Text     | Submit label (default "Send Message")   |
    | Alignment         | Select   | `left` or `center`                      |
    | Show phone field  | Checkbox | Adds a phone number input (default off) |
    | Email placeholder | Text     | Placeholder for the email input         |
  </Accordion>

  <Accordion title="FAQ">
    An accordion-style FAQ section. Each FAQ item is a separate block with a question and rich-text answer.

    **Available on:** homepage, product, collection, contact

    | Setting   | Type   | Description                                            |
    | --------- | ------ | ------------------------------------------------------ |
    | Title     | Text   | Section heading (default "Frequently Asked Questions") |
    | Alignment | Select | `left` or `center`                                     |

    **Blocks:** Each FAQ item block has a **Question** (text) and an **Answer** (rich text).
  </Accordion>

  <Accordion title="Google Maps">
    Embeds a Google Maps location at a configurable zoom level and height.

    **Available on:** contact, homepage

    | Setting    | Type   | Description                    |
    | ---------- | ------ | ------------------------------ |
    | Address    | Text   | The address to pin on the map  |
    | Zoom level | Number | Map zoom (default 15)          |
    | Map height | Number | Height in pixels (default 450) |
  </Accordion>

  <Accordion title="Platform address">
    Displays your store's contact details — address, phone, email, and opening hours — with a configurable background.

    **Available on:** contact, homepage, about us

    | Setting          | Type     | Description                                  |
    | ---------------- | -------- | -------------------------------------------- |
    | Title            | Text     | Section heading (default "Where to find us") |
    | Address          | Textarea | Street address                               |
    | Phone            | Text     | Phone number                                 |
    | Email            | Text     | Contact email address                        |
    | Opening hours    | Textarea | Free-form hours text                         |
    | Alignment        | Select   | `left` or `center`                           |
    | Background color | Color    | Section background (default `#ffffff`)       |
  </Accordion>

  <Accordion title="Image with text">
    Places a side-by-side image and text block with an optional CTA button. Image position is configurable.

    **Available on:** homepage, about us, product

    | Setting        | Type      | Description                           |
    | -------------- | --------- | ------------------------------------- |
    | Image          | Image     | The featured image                    |
    | Title          | Text      | Block heading (default "Our Mission") |
    | Text           | Rich text | Body content                          |
    | Image position | Select    | `left` or `right`                     |
    | Button text    | Text      | Optional CTA label                    |
    | Button link    | URL       | Optional CTA destination              |
  </Accordion>

  <Accordion title="Features grid">
    A grid of feature highlights, each with a Lucide icon, title, and description.

    **Available on:** homepage, about us, product

    | Setting | Type   | Description                               |
    | ------- | ------ | ----------------------------------------- |
    | Title   | Text   | Section heading (default "Why choose us") |
    | Columns | Select | `3` or `4` columns                        |

    **Blocks:** Each feature block has an **Icon** (Lucide icon name, e.g. `Star`), a **Title**, and a **Description**.
  </Accordion>

  <Accordion title="Video banner">
    A full-width video background banner that accepts an MP4 file URL or a YouTube URL, with an overlay and optional CTA.

    **Available on:** homepage, about us

    | Setting         | Type  | Description                          |
    | --------------- | ----- | ------------------------------------ |
    | Video URL       | Text  | Direct MP4 link or YouTube URL       |
    | Overlay opacity | Range | Darkness of the overlay (default 50) |
    | Title           | Text  | Optional heading over the video      |
    | Button text     | Text  | Optional CTA label                   |
    | Button link     | URL   | Optional CTA destination             |
  </Accordion>

  <Accordion title="Stats counter">
    An animated counter block displaying key numbers with labels and suffixes (e.g., "1,000+ happy customers").

    **Available on:** homepage, about us

    | Setting          | Type  | Description                            |
    | ---------------- | ----- | -------------------------------------- |
    | Background color | Color | Section background (default `#f9fafb`) |

    **Blocks:** Each stat block has a **Number** (text), a **Label**, and a **Suffix** (e.g. `+`).
  </Accordion>

  <Accordion title="Team / image grid">
    A grid of team member cards or general image tiles with names and captions.

    **Available on:** homepage, about us

    | Setting | Type   | Description                          |
    | ------- | ------ | ------------------------------------ |
    | Title   | Text   | Section heading (default "Our Team") |
    | Columns | Select | `3` or `4` columns                   |

    **Blocks:** Each member block has a **Photo** (image), a **Name**, and a **Role/Caption**.
  </Accordion>

  <Accordion title="Daily menu (on-demand stores only)">
    A menu-style product grid linked to a specific collection. This section is only available for stores operating in the **on-demand** industry type.

    **Available on:** homepage, about us

    | Setting         | Type              | Description                                    |
    | --------------- | ----------------- | ---------------------------------------------- |
    | Title           | Text              | Section heading (default "Check our specials") |
    | Menu collection | Collection picker | The collection to display as a menu            |
    | Items per row   | Select            | `1` or `2` columns                             |

    <Info>
      The Daily Menu section only appears in the section picker for on-demand stores (food delivery, ready-made meals, etc.). It will not be visible if your store uses a different industry type.
    </Info>
  </Accordion>

  <Accordion title="Marquee">
    A continuously scrolling ticker with repeating text items and Lucide icons. Useful for announcements, brand values, or promotional messaging.

    **Available on:** homepage, product, collection, about us

    | Setting            | Type     | Description                                          |
    | ------------------ | -------- | ---------------------------------------------------- |
    | Speed              | Range    | Seconds per full scroll cycle (default 20)           |
    | Direction          | Select   | `left` or `right`                                    |
    | Pause on hover     | Checkbox | Pauses the animation on hover (default on)           |
    | Gap between items  | Select   | Small (`gap-6`), Medium (`gap-12`), Large (`gap-24`) |
    | Background type    | Select   | `solid` or `gradient`                                |
    | Background color   | Color    | Used for solid background                            |
    | Gradient from / to | Color    | Start and end colors for gradient background         |
    | Text color         | Color    | Item text color (default `#ffffff`)                  |
    | Font size          | Select   | Extra small, Small, Medium, or Large                 |
    | Vertical padding   | Select   | Tight, Normal, or Spacious                           |
    | Fade edges         | Checkbox | Fades left and right edges (default on)              |
    | Font weight        | Select   | Normal, Medium, Bold, or Black                       |

    **Blocks:** Each marquee item has **Text** and an optional **Icon** (Lucide icon name, e.g. `Star`).
  </Accordion>
</AccordionGroup>