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

# Storefront CMS

> Visual editor for customizing your online storefront

The Storefront CMS is a full WYSIWYG visual editor. You edit your store directly on a live preview — what you see is exactly what customers see. Supports images, video backgrounds, responsive preview, and drag-to-reorder sections. No coding required.

## Hero Banner

| Feature          | Description                                                                                                                        |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Background Media | Upload a hero image (recommended: 1920x1080px) or a video background (max 50MB). Switch between Image, Video, and Text-only modes. |
| Text Overlay     | Set a subheading, main heading, and call-to-action button with a custom link. Text visibility can be toggled on or off.            |
| Video Cropping   | Adjust video positioning with crop controls to ensure the key area of your video is visible on all screen sizes.                   |

## Sections & Layout

| Section              | Description                                                                                                            |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| Featured Products    | Select specific products to showcase on the homepage. Set a title, subtitle, visibility toggle, and max display count. |
| Featured Collections | Choose which collections to showcase on the homepage (e.g., New Arrivals, Best Sellers, Sale Items).                   |
| Featured Categories  | Highlight product categories with images. Categories display as cards linking to their category pages.                 |
| Section Ordering     | Drag and drop to reorder homepage sections. Control which sections customers see first.                                |
| Responsive Preview   | Toggle between Desktop and Mobile preview modes to check how your storefront appears on different devices.             |

## How to edit your storefront

<Steps>
  <Step title="Open the CMS editor">
    Open the CMS editor from Setup in the sidebar.
  </Step>

  <Step title="Choose media mode">
    Click the media mode you want: Image, Video, or Text.
  </Step>

  <Step title="Upload hero content">
    Upload your hero image or video, then set your heading and button text.
  </Step>

  <Step title="Manage featured sections">
    Scroll down to manage Featured Products and Categories.
  </Step>

  <Step title="Reorder sections">
    Use Section Order to drag and reorder homepage sections.
  </Step>

  <Step title="Preview">
    Switch between Desktop and Mobile preview to check responsiveness.
  </Step>

  <Step title="Publish">
    Click "Save" to publish. Changes go live immediately.
  </Step>
</Steps>

<Tip>
  Use high-quality hero images or short looping videos for maximum visual impact. Keep headings short and bold. Always check the mobile preview — most customers browse on their phones. Update your storefront seasonally or for promotions.
</Tip>