Customize with code
This section is intended for merchants or developers with front-end development experience. By editing the theme code, you can customize your store’s page structure, styles, and functional components—unlocking advanced branding and layout control.
How to access the code editor
- Log in to your Genstore admin.
- Go to Online Store -> Themes.
- Find the theme you want to edit, click the
...button to open the menu, and select Edit code. - In the file tree on the left, choose the
.liquidor.jsonfile you want to modify. - Make the necessary changes in the code editor.
- Click Save when you’re done.
Theme file structure
The theme’s code is organized into several key directories based on their purpose and usage:
| Directory | Description |
|---|---|
layout | - Contains layout files for global structure, only supports .liquid files - Typically includes files like theme.liquid |
templates | - Holds template files for different page types (e.g., product.json, collection.json) - Each page type has a corresponding liquid template to define its layout and content rendering logic |
sections | - Reusable page sections, supports both .json and .liquid formats - Common examples include header.liquid, footer.liquid - JSON files support market-specific configuration via naming |
blocks | - Allows merchants to dynamically add functional components (“blocks”) to pages - Provides higher flexibility and customizability |
snippets | - Reusable code blocks, mainly .liquid files - Cannot contain schema blocks - Ideal for pure display components like product cards or labels |
assets | - Static assets such as CSS, JavaScript, images, and fonts - Examples include theme.css, custom.js, logo.png, etc. |
locales | - Contains language translation files in .json format - Used for multilingual store support with localized text for each language |
Editor keyboard shortcuts
The following shortcuts are supported in the theme code editor to help you work more efficiently:
| Action | Windows / Linux | macOS |
|---|---|---|
| Save | Ctrl + S | Cmd + S |
| Find | Ctrl + F | Cmd + F |
| Replace | Ctrl + H | Cmd + H |
| Undo | Ctrl + Z | Cmd + Z |
| Select all | Ctrl + A | Cmd + A |
| Copy | Ctrl + C | Cmd + C |
| Cut | Ctrl + X | Cmd + X |
| Paste | Ctrl + V | Cmd + V |
| Format code | Ctrl + Shift + I | Cmd + Shift + I |
| Comment/Uncomment | Ctrl + / | Cmd + / |
| Go to line | Ctrl + G | Cmd + G |