> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/reference/sections/section.md). # Content The flexible Content section: arrange any theme blocks with layout, panel and background image or video settings. The flexible Content section: arrange any theme blocks with layout, panel and background image or video settings. **Where:** Any template (Add section)\ **File:** `sections/section.liquid` ![Content](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-533b81b5e9a809b8edc3d9a32578f869106cef10%2Fsection.png?alt=media) ## Section settings | Setting | Type | Options | Default | Notes | | ---------------- | ------------ | ------- | -------- | ----- | | **Color scheme** | Color scheme | | Scheme 1 | | ### Layout | Setting | Type | Options | Default | Notes | | -------------------------- | -------- | -------------------------------------- | -------- | ----------------------------------------------------------- | | **Content width** | Choice | Page, Wide, Medium, Narrow, Full width | Page | | | **Direction** | Choice | Vertical, Horizontal | Vertical | | | **Stack on small screens** | On / off | | On | Shown when **Direction** is Horizontal. | | **Wrap items** | On / off | | Off | Shown when **Direction** is Horizontal. | | **Cross-axis alignment** | Choice | Start, Center, End, Stretch, Baseline | Stretch | | | **Main-axis distribution** | Choice | Start, Center, End, Space between | Start | | | **Gap** | Slider | 0–80px, steps of 2 | 16px | | | **Text alignment** | Choice | Left, Center, Right | Left | | | **Minimum height** | Slider | 0–900px, steps of 20 | 0px | | | **Content position** | Choice | Top, Middle, Bottom | Top | Applies when the minimum height is larger than the content. | ### Panel | Setting | Type | Options | Default | Notes | | ----------------------------------- | ------------ | ------- | -------- | ----------------------------------------------------- | | **Show content on a rounded panel** | On / off | | Off | | | **Panel color scheme** | Color scheme | | Scheme 2 | Shown when **Show content on a rounded panel** is on. | ### Background media | Setting | Type | Options | Default | Notes | | ------------------------------------- | ----------------- | -------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------- | | **Background image** | Image | | | | | **Background video** | Video (uploaded) | | | Plays muted on a loop. Paused for visitors who prefer reduced motion and in the theme editor. Replaces the image. | | **Background size** | Choice | Fill the section, Show the whole image | Fill the section | | | **Overlay color** | Color | | #000000 | | | **Overlay opacity** | Slider | 0–90%, steps of 5 | 0% | | | **Overlay gradient** | Color or gradient | | | Replaces the overlay color and opacity. Use transparent stops to let the background show through. | | **Load background image immediately** | On / off | | Off | Use only when this is the first section on the page. | ### Spacing | Setting | Type | Options | Default | Notes | | ------------------ | ------ | ------------------- | ------- | ----- | | **Top padding** | Slider | 0–160px, steps of 4 | 64px | | | **Bottom padding** | Slider | 0–160px, steps of 4 | 64px | | ### Mobile | Setting | Type | Options | Default | Notes | | ----------------------------------- | -------- | ------------------- | ------- | ----------------------------------------------------- | | **Use different spacing on mobile** | On / off | | Off | | | **Gap between blocks** | Slider | 0–80px, steps of 2 | 12px | Shown when **Use different spacing on mobile** is on. | | **Top padding** | Slider | 0–160px, steps of 4 | 40px | Shown when **Use different spacing on mobile** is on. | | **Bottom padding** | Slider | 0–160px, steps of 4 | 40px | Shown when **Use different spacing on mobile** is on. | ## Blocks Shared blocks you can add here (each has its own page): [Collapsible row](/reference/blocks/accordion.md) · [Button](/reference/blocks/button.md) · [Buy buttons](/reference/blocks/buy-buttons.md) · [Compare](/reference/blocks/compare-button.md) · [Complementary products](/reference/blocks/complementary-products.md) · [Custom Liquid](/reference/blocks/custom-liquid.md) · [Divider](/reference/blocks/divider.md) · [Email signup](/reference/blocks/email-signup.md) · [Follow on Shop](/reference/blocks/follow-on-shop.md) · [Group](/reference/blocks/group.md) · [Heading](/reference/blocks/heading.md) · [Icon](/reference/blocks/icon.md) · [Image](/reference/blocks/image.md) · [Menu](/reference/blocks/menu.md) · [Numbered step](/reference/blocks/numbered-step.md) · [Pickup availability](/reference/blocks/pickup-availability.md) · [Product card](/reference/blocks/product-card.md) · [Description](/reference/blocks/product-description.md) · [Inventory status](/reference/blocks/product-inventory.md) · [Product details line](/reference/blocks/product-meta.md) · [Price](/reference/blocks/product-price.md) · [Rating](/reference/blocks/product-rating.md) · [Specifications](/reference/blocks/product-specs.md) · [Swatches](/reference/blocks/product-swatches.md) · [Product title](/reference/blocks/product-title.md) · [Vendor](/reference/blocks/product-vendor.md) · [Scale](/reference/blocks/rating-bar.md) · [Restock request](/reference/blocks/restock-request.md) · [Share](/reference/blocks/share.md) · [Social media icons](/reference/blocks/social-links.md) · [Spacer](/reference/blocks/spacer.md) · [Specification](/reference/blocks/spec-row.md) · [Text](/reference/blocks/text.md) · [Variant picker](/reference/blocks/variant-picker.md) · [Video](/reference/blocks/video.md) · [Volume pricing](/reference/blocks/volume-pricing.md) App blocks can be added too. ## Presets Add it from **Add section** as: **Universal**, **Rich text**, **Hero**, **Hero split**, **Hero with background**, **Image with text**, **Multicolumn**, **Statement**, **Press quotes**, **Program**, **Promotion cards**, **Newsletter**, **FAQ**, **Text columns**, **Team**, **Tier cards**.