Docs/Storefront/Editing Section Settings

Editing Section Settings

The right-hand inspector — every setting type your sections expose, and how to use them.

The right-hand settings inspector is where you configure whichever section or block you have selected. Click a section in the tree (or in the live preview), and the inspector loads its settings — text fields, image pickers, color choosers, sliders, dropdowns, and more. Edit a value and the preview updates immediately.

How the inspector works

  • Click a section in the tree or in the preview to load its settings.
  • Click a block nested under a section to load that block's settings instead.
  • With nothing selected, the inspector shows theme settings — global look-and-feel knobs that apply across your storefront. See Typography & theme settings for what's there.

Setting types you'll see

Every section's settings are defined by the theme. Different sections expose different settings, but the building blocks are common. The most-used types:

Text fields

  • Text — single-line strings (titles, button labels, short headlines).
  • Textarea — multi-line strings (paragraphs, descriptions).
  • Rich text — formatted text with bold, italic, links, lists. Useful for body copy that needs emphasis.
  • Inline rich text — same as rich text but constrained to a single line; common for headings that need a bold word.
  • Number — integers (image width, item count, etc.).
  • URL — http or mailto links.

Choices

  • Select — a dropdown of pre-defined options (e.g. button style: Primary / Secondary / Ghost).
  • Radio — same idea, rendered as visible options when there are 2–4 of them.
  • Checkbox — on / off.
  • Text alignment — left / center / right shortcut.

Numbers and sliders

  • Range — a slider for bounded values (padding from 0–100px, opacity 0–1, etc.). Range settings always have a minimum, maximum, and step size declared by the section.

Images and media

  • Image — upload a new image or pick one from your asset library. Storra resizes images automatically — uploading a 4K hero image is fine; the storefront serves the right size for each viewport.
  • Video URL — paste a YouTube, Vimeo, or direct video link.

Colors

  • Color — single color picker (hex input or visual picker).
  • Color scheme — pick a named scheme (Forest, Mountain, etc.) instead of a single color. The section adopts every color in that scheme. See Color schemes & theme colors.
  • Color background — supports solid colors and gradients.

Linking to your content

  • Product — pick one of your packages.
  • Collection — pick a category to feed a grid.
  • Page — pick one of your custom pages.

Advanced

  • Font picker — pick a font from a curated list. Used in section-level font overrides; theme-wide fonts live in theme settings.
  • Icon picker — pick an icon from the theme's icon set.
  • HTML / Liquid — drop in raw markup or templating code. Power-user settings; most sections don't expose these.
Don't see a setting you expect?The list above is the platform-wide setting vocabulary, but each individual section only exposes what its author declared. If a section is missing a setting you need, switch to a different section type or extend it in the code editor.

Saving your changes

Settings updates apply to your live preview as you type, but they aren't persisted until you click Save draft or Publish. The editor doesn't auto-save — closing the tab loses unsaved changes. See Saving, publishing & snapshots.

FAQ

The preview isn't updating when I change a setting.

Refresh the editor (browser refresh) — the preview iframe occasionally desyncs after long sessions. If the issue persists, check the inspector for a yellow / red warning — invalid values (a malformed URL, a number outside the allowed range) are rejected and don't apply to the preview.

Can I copy settings from one section to another?

Yes — see Adding & reordering sections. Right-click the section, choose Copy, switch to the destination context, and paste.

What's the difference between section settings and theme settings?

Section settings apply only to one specific section instance. Theme settings are global — change the body font in theme settings and it applies storefront-wide. The inspector shows whichever the selection implies — a selected section means section settings; nothing selected means theme settings.

Was this page helpful?Suggest an edit →

Updated recently