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.

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

All section types

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

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.

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)

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

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

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

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.

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)

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

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).

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)

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)

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

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.

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

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. +).

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.

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

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.

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).