Customize with theme editor
Genstore provides a visual theme editor that allows merchants, operators, and designers to adjust the layout, content, and overall visual style of their store—without writing any code.
How to access
- Log in to your Genstore admin and go to Online Store -> Themes.
- Click the Design button next to your target theme.
- Click the dropdown in the top page selector to choose a page type (e.g. Home, Product, Collection).
- For some pages, you can further select a specific resource or create a new template.
- The preview will refresh automatically to display the selected template for editing.
The theme editor includes two main areas:
- Top toolbar: for page navigation, device preview, saving changes, and exiting the editor
- Main workspace: for managing page structure, visual styles, and app components
Top toolbar
Located at the top of the editor, the toolbar lets you manage your theme, preview pages, and perform actions.
| Feature | Description |
|---|---|
| Theme name | Displays the name of the theme currently being edited |
| Theme status | Shows Live for published themes, Draft for unpublished ones |
| Preview | Opens a live preview of the current theme |
| Market switcher | Switch between target markets (for multi-market stores) |
| Page selector | Choose which page type to edit: Home, Product, Collection, etc. |
| Template switcher | After selecting a page, switch or create templates specific to that page |
| Device preview | Preview layout on desktop, tablet, or mobile devices |
| Undo / Redo | Undo or redo unsaved changes within the current session |
| Save | Save all modifications (recommended frequently) |
| Back | Exit the editor and return to the theme list (unsaved edits will be discarded) |
TIP
For multilingual stores, use the language switcher in the preview area to view different language versions. Use the Translation editor to edit localized content.
Main workspace
The main workspace includes:
- A navigation bar on the far left for switching edit modes
- A contextual sidebar in the middle that changes based on the selected mode
- A live preview area on the right
Navigation bar
Located on the far left, this vertical bar contains three icons for the main editing modes:
- Page design (first icon): Manage structure and modules for specific pages like Home or Product pages. You can add, remove, or rearrange sections and content blocks.
- Theme settings (second icon): Configure global styles including colors, fonts, and animations.
- App embeds (third icon): Integrate apps or widgets into specific sections of the store.
Contextual sidebar
The Contextual sidebar content changes depending on the selected editing mode:
- Page design tab: Shows the current page's structure, where you can add/edit/remove sections and blocks.
- Theme settings tab: Presents global visual controls like font family, primary colors, and layout widths.
- App embeds tab: Lists available components that can be inserted from Genstore or third-party apps.
Live preview area
The rightmost section displays a real-time visual representation of your storefront. All edits made in the sidebar are instantly shown here. Toggle device views to test across desktop, tablet, and mobile.
Page templates
When editing a page via the Page design mode, the sidebar shows a breakdown of the page structure.
Genstore pages have three default areas:
| Area name | Description |
|---|---|
| Header | Contains logo, nav bar, announcement, search, cart, etc. Supports apps or Liquid blocks |
| Segment template | Main content area: products, text/images, blogs, etc. |
| Footer | Contains copyright, payment methods, social links, and subscription forms |
TIP
The header and footer are shared across all page templates. Updates in one page affect all others.
Sections and blocks
Each page is built from multiple sections, and each section can contain one or more blocks.
- Sections are large layout containers like banners or product carousels
- Blocks are smaller units like text, buttons, or media items that live inside a section
This modular structure allows flexible customization and brand consistency.
Section features
| Feature | Description |
|---|---|
| Section list | Shows all sections used on the current page |
| Add section | Insert new functional areas like banners or collections |
| Drag to sort | Rearrange section order by dragging |
| Hide / Show | Temporarily disable or enable a section |
| Delete section | Permanently remove a section (requires saving) |
Block features
Some sections support multiple blocks:
| Feature | Description |
|---|---|
| Add block | Add elements like text, buttons, or media within a section |
| Drag to sort | Rearrange block order |
| Delete block | Remove a block without deleting its parent section |
Theme settings
Click the second icon in the navigation bar to access visual style settings for the entire site:
| Setting | Description |
|---|---|
| Color settings | Define main colors, background, links, and buttons |
| Layout settings | Set content width and alignment |
| Animation | Apply entrance and scroll animations |
| Icon settings | Upload branding images like logo or favicon |
| Social links | Add Facebook, Instagram, YouTube, and other URLs |
App embeds
Click the third icon to open the app embedding interface. You can integrate Genstore apps or third-party widgets into specific page areas to enhance marketing, form capture, recommendations, and more.