Customize with visual editor
Genstore provides a visual theme editor that allows merchants, operators, and designers to adjust the layout, content, and visual style of their store—without writing any code.
The theme editor consists of two main areas:
- Top toolbar: for switching pages, previewing devices, saving changes, and exiting the editor
- Left sidebar: for managing page structure, visual settings, and embedded app components
Top toolbar
Located at the top of the theme editor, the toolbar lets you manage your current theme, preview the storefront, and perform save or undo actions.
| Feature | Description |
|---|---|
| Theme name | Displays the name of the current theme |
| Theme status | Shows the status of the theme: Live for published themes, Draft for unpublished ones |
| Preview | View a live preview of the current theme |
| Market switcher | Switch between different markets (for multi-market stores) |
| Language switcher | Preview how your theme appears in different languages (if multilingual is enabled) |
| Page selector | Choose the page type to edit (e.g. home page, product page, collection page, custom page) |
| Template switcher | Switch between or create templates under the current page type |
| Device preview | Toggle views for desktop, tablet, and mobile |
| Undo/Redo | Undo or redo unsaved changes in the current editing session |
| Save | Save all changes. It’s recommended to save frequently to avoid data loss |
| Back | Exit the editor and return to the theme library (unsaved changes will be discarded) |
Switching pages and templates
After selecting a page or page template, you can access all available templates from the page selector at the top of the editor.
Steps
- Log in to your Genstore admin and go to Online Store -> Themes
- Click Design next to your target theme
- Use the page selector at the top to choose a page type (e.g. Home, Product, Collection)
- From the popup menu, select a specific resource (e.g. a product or a page you want to preview/edit)
- The preview will refresh and load the selected template automatically
TIP
Undo & Redo
- The editor supports real-time undo/redo during the current editing session
- These functions only apply to unsaved changes
- When no actions are available, the buttons will appear disabled
Left sidebar
The left sidebar is the primary editing area where you can control:
- The page structure (sections and blocks)
- The global style settings
- The embedded app modules
Page layout areas
By default, the page is structured into three main areas:
| Area name | Description |
|---|---|
| Header | Contains logo, navigation, announcement bar, search bar, cart icon, etc. Supports apps and Liquid blocks |
| Template | The main content area. Includes products, collections, text/image sections, blog articles, and custom modules |
| Footer | Includes copyright, payment icons, social links, and subscription form. Supports apps and custom Liquid content |
TIP
The header and footer are shared across all page templates. Changes made to one page will apply to others as well.
You can view and edit the layout of your current template, including both the main content structure (sections) and the content units (blocks) within each section.
Sections and blocks
In the Genstore editor, pages are composed of multiple sections, each of which can contain one or more blocks.
- Sections are structural units of the page, such as banners, featured content, or product listings
- Blocks are the individual content components inside a section, such as text, image, or button elements
You can combine sections and blocks to freely design your store layout and create a unique brand experience.
Section features
| Feature | Description |
|---|---|
| Section list | View all sections on the current page (e.g. banners, rich text, collection list) |
| Add section | Insert a new section from the supported modules |
| Drag to sort | Drag the icon to rearrange section order |
| Hide/show | Temporarily hide or show a section |
| Delete section | Permanently remove a section (changes take effect after saving) |
Block features
Some sections support multiple blocks to allow more flexible content arrangement.
| Feature | Description |
|---|---|
| Add block | Add content blocks such as text, images, buttons, media, etc. |
| Drag to sort | Rearrange blocks within a section |
| Delete block | Remove a specific block without affecting the section itself |
Sorting, deleting, and hiding
Sort by dragging:
- Locate the section or block you want to move
- Click and hold the drag handle on the left
- Drag it to the new position and release
Delete section or block:
- Click the delete icon next to the item
- Click Save at the top to confirm changes
Hide items:
- Click the Hide button to temporarily disable a section or block
- Hidden items can be restored at any time without losing content
Global style settings
These options control the visual style across your entire storefront, including:
| Setting | Description |
|---|---|
| Color settings | Define main color, background color, button colors, and link colors |
| Layout settings | Set the width and layout of content areas |
| Animation | Configure entrance/scroll animations |
| Icon settings | Upload logo, favicon, and other branding images |
| Social links | Add links to Facebook, Instagram, YouTube, and more |
App embedding
You can embed Genstore apps or third-party widgets into specific areas of your theme to extend its functionality.