SR7 Editor — Interface Overview

This guide walks through the main interface of the SR7 editor (Slider, Banner & Sections) used to build hero sections, sliders, and carousels for a Shopify store.

1. Settings

The first icon in the top bar. Configures the overall module:

• Module type — Hero, Slider, or Carousel.
• Layout — Full width or full screen.
• Other options — slideshow progress indicators, navigation elements (arrows/dots), add-on management, and other module-level settings.

2. Slides Panel

Manages every slide in the module:

• Edit, duplicate, or delete slides.
• Drag and drop to reorder.
• Assign custom thumbnails to slides.
• Schedule slides to appear at specific times.

3. Timeline / Animation Mode

Opens the animation timeline for the currently selected slide and switches the editor into Animation Mode, used to animate layers in and out (see the separate Action Mode & Scenes guide for interaction-driven animation).

4. Layers Panel

Gives a full overview of every layer on the current slide:

• Reorder layers, manage nested groups and columns.
• Select layers that are hard to click directly on the stage.
• Access the Bulk Editor to swap fonts or colors across the entire module at once.

5. Add Panel

Where content creation happens. Lets you insert:

• Text, buttons, icons, shapes, containers, navigation elements.
• Special-effect layers contributed by add-ons.

6. Device Selector

The editor stage is a live visual representation of how the module renders on the live site.

• Drag the stage's resize handles to preview different screen widths.
• Device icons show which breakpoints are currently active and let you jump between them instantly.
• Up to 5 custom device sizes can be configured, from widescreen down to mobile.

7. Preview Toolbar (top right)

• Preview — opens a live preview of the module in a new browser tab, even before saving.
• Undo / Redo — available at any time.
• Publish — shows all available embedding options, or the module can be inserted directly into a page through the Shopify integration.

8. Right Sidebar — Editing Modes

Three main modes are available:

• Design Mode — build the static layout of a slide.
• Animation Mode — animate layers in and out.
• Action Mode — add click/hover interactions (see the companion Action Mode & Scenes guide).

Updated on: 03/09/2026