Theme Customization (Drag & Drop Editor)¶

Shoptsy’s Theme Customization editor lets you visually design your storefront using a powerful drag-and-drop interface.
You can customize layouts, content sections, and page components without writing any code.

Overview¶

From the Theme Customization editor, you can:

Edit individual pages (Home, Product, Shop, Account pages, etc.)
Drag and drop components to build layouts
Customize content, images, and styles
Preview changes in real time
Revert to default layouts if needed

All changes apply to the active theme only.

Themes Page¶

Your Themes¶

This section shows:

Your currently active theme
Theme name and version
Status (Active)

You can: - Click Customize to edit the active theme - Visit your store to preview changes live

Store Themes¶

Store themes are available templates you can add to your store.

Each theme includes:

Category (e.g. Jewellery, Electronics)
Theme name
Add option to install the theme

Only one theme can be active at a time.

Edit Theme (Page Selector)¶

When you click Customize, you enter the theme editor.

Editable Pages¶

You can customize multiple storefront pages, including:

Navbar
Home
Product details
Shop
Login & Register
Profile & Account pages
Orders & Addresses
Contact page
Notifications

Each page is edited independently.

Drag & Drop Theme Editor¶

The visual editor is divided into three main areas:

Components Panel (Left)¶

The Components panel contains reusable blocks you can drag into the page.

Layout Components¶

Used to structure the page:

Highlight Products
Hero Product
Featured grids
Category layouts

Content Components¶

Used to display data:

Collection highlights
Product grids
Category sections
Promotional blocks

Media Components¶

Used for visuals:

Image with text
Banners
Media sections

To use a component:

Drag it from the panel
Drop it onto the page canvas
Adjust its properties

Canvas / Preview Area (Center)¶

The canvas shows a live preview of the page.

From here you can:

See changes instantly
Rearrange sections vertically
Click on components to edit them
Preview real storefront layout

You can also use Preview mode to see the page without editor controls.

Properties Panel (Right)¶

The Properties panel lets you customize the selected component.

You can edit:

Text content
Images and media
Buttons and links
Visibility settings
Layout spacing and alignment (if supported)

Properties update instantly on the canvas.

AI Customize¶

The AI Customize option helps you: - Generate layout suggestions - Improve content presentation - Speed up theme setup

AI customization works on top of your existing layout.

Saving & Reverting Changes¶

Save¶

Click Save to apply changes
Changes go live immediately

Revert to Default¶

Restores the original theme layout
Removes all customizations on the current page
Useful if layout becomes cluttered

Best Practices¶

Start customization from the Home page
Use hero sections sparingly for impact
Keep layouts clean and consistent
Preview on desktop and mobile
Save frequently while editing
Revert sections instead of rebuilding when unsure

Common Issues & Fixes¶

Changes not appearing - Click Save - Refresh storefront preview

Layout looks broken - Revert the page to default - Reorder sections properly

Component not editable - Ensure it is selected on the canvas - Check if the component supports customization

Theme feels slow - Reduce heavy media - Optimize images before upload

Navigation – Menu structure used by themes
Pages – Static pages rendered by themes
Ranges – Displayed in collection components
Products – Shown in product grids
Translations – Language-specific theme content

Next Steps¶

Customize Home and Product pages
Add promotional sections using ranges
Optimize layout for mobile users
Review navigation and footer consistency

Theme customization allows you to design a storefront that matches your brand and converts visitors into customers—without code.