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 Customize 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, 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 the theme status - 🟢 Live view, for published themes - ⚪ Draft, for unpublished ones |
| Template switcher | Select a page type to edit, such as home, product, collection, or custom. Some pages (like product pages) support choosing a specific template. |
| Market switcher | Switch between target markets (for multi-market stores) |
| Preview | Opens a live preview of the current theme |
| Save | Save all modifications (recommended frequently) |
| Publish | For draft templates, you can publish them directly and set them as your store template. |
Bottom floating toolbar
Located at the bottom of the page, this toolbar lets you switch device views, control zoom level, enter code mode, and more.
| Feature | Description |
|---|---|
| Undo / Redo | Undo or redo unsaved changes made during the current editing session.- Only applies to changes not yet saved in the current session.- When no action is available, the button will be grayed out and disabled. |
| Device preview | Switch between desktop, mobile, and full screen views to preview how your page appears on different devices. |
| Zoom level | Adjust the zoom of the preview area (from 50% to 100%) for more precise design and layout checks. |
| Code editor | Enter source code editing mode. Suitable for users with front-end experience to edit Liquid, JSON, and other template files directly. |
Main workspace
The main editing area consists of three main parts:
| Section | Description |
|---|---|
| Function navigation bar | Located on the far left, it provides access to page template management, design, style design, theme design, and app embeds. |
| Sidebar panel | Displays page structure, content modules, or style settings based on the selected function. |
| Live preview area | Shows a real-time preview of the selected page on the right. Supports switching between languages, markets, and devices. |
Navigation bar
The function toolbar is located on the far left of the editor interface. It contains five vertically arranged icons, each representing a different editing module:
- Page management: Used to centrally manage the creation and assignment of various page templates. Supports fuzzy search for unassigned pages and quick switching between templates for products, pages, blogs, and more to improve configuration efficiency.
- Page design: Used to manage and edit the structure and content of specific pages such as the homepage, product pages, and collection pages. You can add, delete, or rearrange sections and blocks within the page.
- Style design: Controls global visual styles that affect all pages, including color schemes, typography, animations, and more.
- Theme design: Used to configure the overall appearance of your website, including logo, brand details, social links, cart behavior, and custom CSS to create a consistent brand identity.
- App management: Allows you to integrate app components from Genstore or third parties into your pages, enabling advanced features like promotions, recommendations, and forms.
Contextual sidebar
The side panel is located on the left side of the main editor area. It dynamically updates based on the module selected in the function toolbar and displays the corresponding settings and content structure:
- Page management: Displays all page types that support template editing, such as home, product, collection, and blog pages. You can create new templates, view current assignments, and use fuzzy search or quick switching.
- Page design: Shows the structure of the currently selected page, including sections and blocks. You can add, sort, delete, or edit modules within the layout.
- Style design: Provides global visual configuration options including color schemes, typography, button styles, and animation effects, allowing you to maintain a consistent visual style across your site.
- Theme design: Includes global settings such as logo, favicon, brand details, cart behavior, currency display, and custom CSS, helping to define the overall look and feel of your store.
- App management: Lists embeddable app components (e.g. countdown timers, recommendation widgets, pop-ups) and allows you to configure their styles and behaviors.
Live preview area
The right panel displays a real-time preview of your template across different devices and languages.
- Market/currency switch: If multiple markets are enabled, you can switch regions and currencies.
- Language switch: Use the language dropdown to preview how the page appears in different languages.
- After switching languages, the preview will reflect localized product titles, tags, price formats, etc.
- System fields (e.g., "Sold Out", "Add to Cart") use platform-provided default translations.
- Merchant content (e.g., product titles and descriptions) must be manually translated in the Translation Editor.
- Fields without translations will display content in the default language.
- Real-time updates: Supports responsive layouts and auto-refresh for instant visual feedback.
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 |
| Template | Main content area: products, text/images, blogs, etc. |
| Footer | Contains copyright, payment methods, social links, and subscription forms |
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 |
Style design
When Style design is selected, you can define a unified visual style for your entire site, including color schemes, typography, button styles, and layout settings to ensure a consistent brand experience.
Main configuration options include:
- Color schemes: Supports switching between light and dark modes, and allows you to define primary, secondary, accent, neutral, and background colors individually.
- Typography: Adjust heading and body text sizes, weights, and spacing to ensure clear visual hierarchy and readability.
- Component styles: Configure the appearance of visual elements such as icons, buttons, input fields, and cards (e.g. product, collection, blog cards).
- Page layout: Set overall spacing and layout rules for consistent display across different screen sizes.
- Animations and interactions: Configure visual effects for scroll behaviors, button hover states, drawer popups, and other UI feedback.
All settings apply globally to your storefront theme and are reflected in real time in the preview panel, helping you quickly evaluate the visual impact.
Theme design
When Theme design is selected, you can configure global visual and behavioral settings for your website, covering brand identity, shopping experience, and custom styles to create a consistent storefront appearance.
Main configuration options include:
- Logo and favicon: Upload your store’s logo and browser icon (favicon), with optional width adjustments for desktop layouts.
- Brand information: Enter your store name and description to be used in supported theme modules.
- Social media: Add links to your social platforms (e.g. Instagram, Facebook), which can be displayed in the footer or other designated areas.
- Search behavior: Configure how the search bar works, including autocomplete and content source settings.
- Currency formatting: Set default currency display rules, including symbol position and decimal precision, for consistent price presentation.
- Cart settings: Customize the cart icon, layout, and interaction behavior during the shopping process.
- Custom CSS: Add global CSS styles to further personalize your storefront appearance and meet specific brand design requirements.
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.