Theme customization

Build your storefront visually.

Upload a validated theme, arrange storefront sections, select header, footer and product-page presets, and preview every change before it reaches customers.

Upload your first theme Explore the editor →

Package format Validated ZIP theme package

Responsive previews Large screen, desktop, tablet and mobile

Publishing model Draft, preview and publish

i

Changes remain isolated until you publish

Saving creates or updates the theme draft. Publishing applies the saved configuration to the selected store.

Before you begin

Prepare a valid theme package

A theme is distributed as a ZIP archive. Its manifest identifies the theme and points the runtime to its layout, components, settings schema and preview image.

recommended-theme.zip

recommended-theme/
├── theme.json
├── preview.jpg
├── index.json
├── components/
│   ├── header.json
│   ├── footer.json
│   └── product-card.json
├── settings/
│   └── schema.json
├── layouts/
│   └── storefront.json
├── sections/
│   └── hero.json
└── styles/
    └── tokens.css

Required manifest information

theme.json JSON

{
  "name": "Your Theme",
  "slug": "your-theme",
  "version": "1.0.0",
  "author": "Your company",
  "description": "A flexible storefront theme.",
  "frameworkVersion": "1.0",
  "preview": "preview.jpg",
  "entry": "index.json",
  "settingsSchema": "settings/schema.json"
}

!

Place required files at the expected paths

Missing manifests, preview artwork or required component definitions can cause package validation to fail during upload.

Installation

Upload and install a theme

Open the theme library

In Trolly Console, open Online store → Themes. Choose the store you want to customize from the store selector.

Select Upload theme

Click Upload theme in the toolbar or Add theme in the theme library.

Choose the ZIP package

Select a file ending in .zip. The console uploads and validates the package before adding it to the library.

Confirm installation

A successfully installed theme appears as a library card with its preview image, name, version, author and validation status.

Editor workspace

Customize with immediate visual feedback

Click Customize on a theme card to open the editor. The workspace combines an editing sidebar with a responsive storefront preview.

1

Sections

Arrange homepage content, control visibility and edit the selected section’s content and presentation.

2

Product page

Preview a product, toggle its fixed content areas and apply a product-page layout preset globally.

3

Theme settings

Configure global colors, typography, page width and corner radius through one shared settings panel.

4

Device previews

Review the storefront at large-screen, desktop, tablet and mobile widths before publishing.

✓

Undo and redo are built into the editor

Use the toolbar controls to move backward or forward through unsaved configuration changes during the current editing session.

Page structure

Arrange and edit storefront sections

The default storefront includes a header, image banner, product collections, collection list, promotional content and footer.

Section	Purpose	Available actions
Header	Navigation, logo, search, account and cart actions	Visibility and header style preset
Image banner	Primary hero message and call to action	Heading, description, button and alignment
Bestseller	Highlights bestselling products	Heading, visibility and product count
Popular	Surfaces popular products	Heading, visibility and product count
Recommended	Displays recommended products	Heading, visibility and product count
Collection list	Provides collection-based discovery	Heading, visibility and desktop columns
Image with text	Promotional or editorial content	Heading, button label and visibility
Footer	Menus, newsletter, social, legal and contact content	Visibility and footer style preset

Select a section

Click a section in the sidebar or select its corresponding area directly in the preview.

Reorder the homepage

Drag flexible content sections into the required order. The header remains at the beginning and the footer remains at the end.

Duplicate, hide or remove

Duplicate reusable content, hide a section temporarily, or remove sections that are no longer required.

Header design

Apply a header preset

Select Sections → Header, then choose a preset under Header style. Presets change appearance while keeping search, account, login, cart badge, categories and menus connected.

Classic Logo, search and actions

Centered Centered logo and refined navigation

Compact Topbar and single navigation row

Contrast Premium dark storefront style

Minimalist Clean single-row navigation

i

Preset selection does not replace your store data

Existing navigation, categories, customer actions and cart state remain connected when the header’s visual style changes.

Footer presets

The footer supports the same broad visual directions: Classic, Centered, Compact, Contrast and Minimalist. Links, contact details, newsletter, copyright and social content remain connected.

Design system

Configure global theme settings

Open Theme settings from the editor rail to update the visual tokens shared across the storefront.

Setting	Editor control	Effect
Accent	Color picker	Primary brand actions and highlighted interface elements
Background	Color picker	Primary storefront background color
Text	Color picker	Base foreground and content color
Font family	Inter, Georgia, Arial or Times New Roman	Global storefront typography
Page width	900–1600px editor range	Maximum storefront content width
Corner radius	0–32px editor range	Shared rounding for cards and controls

!

Check contrast after changing colors

Preview buttons, headings, navigation and product cards on every device size. Ensure text remains readable against the selected background and accent colors.

Commerce layout

Customize the product page

Open Product page in the editor rail. At least one product must exist before the editor can provide a representative product preview.

A

Product page

Controls the primary gallery, product information, pricing, options, favorites and purchase actions.

B

Product info tab

Controls supplementary product information. The two product sections are fixed and cannot be reordered.

Product-page presets

Preset	Best suited for
Classic	Balanced product gallery and details
Gallery left	Large media presentation with familiar purchasing flow
Gallery focus	Editorial, image-first product storytelling
Compact	Dense, purchase-focused layouts
Minimalist	Clean, borderless product presentation

Product-page styles are applied globally to every product. Images, options, pricing, favorites and cart behavior remain connected when the preset changes.

Go live safely

Preview, save and publish

Review responsive layouts

Use the device toolbar to inspect large-screen, desktop, tablet and mobile previews. Pay particular attention to navigation, banners, product grids and long headings.

Open an isolated preview

Click Preview to save the current draft and open an isolated preview URL in a new tab.

Save your draft

Click Save to preserve the configuration without making it live. The status changes from Unsaved changes to Draft saved.

Publish when ready

Click Publish to save and publish the configured theme changes for the selected store.

Pre-publish checklist

Header navigation works at every viewport
Cart, login and account actions remain visible
Hero content fits without clipping
Product grids respond correctly
Text and background contrast is accessible
Product options and purchase actions work
Footer links and newsletter remain connected
The external preview matches expectations

✓

Applying a theme and publishing edits are distinct actions

Use Apply from the theme library to make a theme active. Use Publish inside the editor to release that theme’s saved configuration changes.

Troubleshooting

Common issues

Issue	Likely cause	Resolution
Upload failed	The file is not a ZIP or required files are missing	Check the extension and validate the package structure
No themes installed	No validated theme has been uploaded	Upload a complete ZIP theme package
Changes are not live	The configuration was saved only as a draft	Open the editor and click Publish
Cannot preview a product	The selected store has no product available	Add at least one product, then reopen the product editor
Storefront appears stale	Storefront data may need refreshing	Use Refresh in the theme console and reload the preview
Wrong store was edited	A different store was selected in the console	Verify the store selector before editing or applying a theme

i

Preview tokens keep draft configurations isolated

The preview runtime loads the selected store and temporary theme configuration without requiring the draft to be published first.

Visual Editor #