How to Customize a New Theme with the Theme Editor – Help Center

The Theme Editor is YouCan's visual customization tool for new themes (Chameleon, Chameleon Fashion, Origins, Harmony, Meraki, and any future new themes). It lets you customize your store page by page with a live preview.

If you are using the YouCan (old) theme, see YouCan Classic Theme: General Settings and Homepage instead.

Open the Theme Editor

Go to Store > Themes
Click Customize on your active new theme (or any installed new theme)

The Theme Editor opens in a new tab showing a live preview of your store on the left and a settings panel on the right.

Top Bar Overview

The top bar of the Theme Editor contains:

Theme name and ACTIVE badge: Shows which theme you are editing
"..." menu: Access Export, Edit code, and Theme details
Page dropdown: Switch between store pages (Home, Search, Collection, List Collections, Product, Cart, Thank-you, Upsell, Page, Checkout)
Device toggles: Preview on desktop, tablet, or mobile
Fullscreen toggle: Expand the preview
Undo / Redo: Step back or forward through changes
Preview: Open a live customer-facing preview
Save: Publish your changes to the store

Sections Panel

Click the layers icon (top right of the sidebar) to open the Sections panel. This shows all sections on the currently selected page.

Sections are the building blocks of each page. For example, the Home page includes: Announcement Bar, Header, Slideshow, Benefits, Collections, Products, About Us, FAQ, Socials, Footer.

Switch Pages

Use the page dropdown in the top bar to switch between pages. Each page has its own independent list of sections.

Edit a Section

Click a section name in the panel to open its settings
Adjust the available options (text, images, colors, layout, theme style)
Changes appear live in the preview
Click the back arrow to return to the full sections list

Add a Section

Click Add Section at the bottom of the sections list
Choose from the available section types
Each page supports up to 25 sections

Reorder Sections

Drag sections up or down in the panel to change their order on the page.

Show or Hide a Section

Some sections have a visibility toggle. Disable a section to hide it without deleting it.

Settings Panel

Click the gear icon (top right of the sidebar) to open the global theme Settings panel. It has four categories:

Theme

Primary color: Your brand color. YouCan auto-generates an accessible full color palette from this single color.
Theme mode: Lock to Light or Dark, or set to Auto to let customers switch with a toggle.
Theme style: Controls contrast level (e.g. Primary high contrast, Primary low contrast, Neutral). This applies globally but can be overridden per section.
Enable global theme style: Toggle on to apply the theme style across all sections at once.

SEO

Configure the meta title and description used for your storefront pages in search engines.

Typography

Set the font families used for your store's headings and body text.

Checkout

Links to the Checkout Editor for customizing your checkout page appearance (colors, logo, layout). The Checkout Editor applies to all themes - see the Checkout section below.

Customizing the Checkout Page

YouCan has a dedicated Checkout Editor that applies to all themes. To open it:

In the Theme Editor, open the Settings panel and click Checkout
Or go to Store > Theme > Checkout settings and click Start customizing

The Checkout Editor is a live-preview editor at seller-area.youcan.shop/admin/settings/checkout/editor and lets you configure:

One page checkout: Toggle between one-page and multi-step checkout
Show coupon input: Show or hide the coupon code field
Show breadcrumbs: Show navigation steps at the top of checkout
Custom header logo: Upload a logo displayed at the top of the checkout page (recommended size: 450x100px)
Page font: Font family for checkout text
Theme colors: Colors for success, warning, and error messages
Page colors: Background, foreground, header background, summary box background/foreground, accent color

Save Your Changes

Click Save in the top right at any time to publish your changes. The preview updates live as you edit, but changes only go live on your store when you save.

Related articles: