Layout Editor
The layout editor lets you visually arrange sections on your storefront pages without writing code. You can configure layouts for your landing page, category pages, checkout page, and more.
Open it at Dashboard > Customization > Layout Editor.
Desktop and mobile layouts
The layout editor has separate configurations for desktop and mobile. You can design each independently to make sure your store looks great on all screen sizes.
- Desktop uses a 12 column grid where you can control the width and position of each section.
- Mobile uses a single column layout where sections stack vertically.
You can switch between desktop and mobile views in the editor to configure each one. Some sections like the header and footer are shared across both.
Section types
Each page is built from sections. You can add, remove, reorder, and configure them. Here’s what’s available:
Header
The top navigation bar for your store. This is present on every page.
| Setting | Description |
|---|---|
| Navigation Type | Choose between top navigation, side navigation, or a combined top and side layout |
| Show Logo | Show or hide your store logo in the header |
| Show Categories | Display category navigation links |
| Show Categories in Header | Consolidate category links into the header bar |
| Navigation Alignment | Align navigation links left, center, or right |
| Navigation Links | Add custom links with labels, URLs, and optional icons |
| Sidebar Collapsible | Allow the sidebar to collapse on hover (side navigation only) |
| Sidebar Width | Set the width of the sidebar (side navigation only) |
| Sidebar Logo Position | Align the logo left or center in the sidebar |
| Sidebar Cart Position | Position the cart at the top, under the navigation, or at the bottom of the sidebar |
Hero
A large banner area at the top of your landing page. Great for branding and first impressions.
| Setting | Description |
|---|---|
| Logo | Upload a hero logo image |
| Logo Width / Height | Set the logo dimensions (max 500px) |
| Logo Animation | Apply an animation effect: pulse, shake, bounce, float, or grow |
| Animation Speed | How fast the animation plays |
| Hero Effect | Add a background particle effect: particles, snow, confetti, stars, or bubbles |
| Effect Speed | How fast the particles move |
| Particle Count | How many particles to show |
| Effect Opacity | Transparency of the particle effect |
| Text | Rich text content displayed below the logo |
| Hero Height | Minimum height of the hero section in pixels |
| Use Default Background | Use the template’s default gradient background |
| Background Color | Set a solid background color instead of the gradient |
| Background Image | Use a custom image as the hero background |
| Overlay Opacity | Dark overlay for readability when using background images |
| Blend Bottom | Fade the background image into the page background |
| Foreground Color | Override the text color in the hero |
| Bottom Overlap | Extend the hero below its boundary so content cards overlap it |
| Discord Server ID | Show a Discord member count badge |
| Discord Invite URL | Link the Discord badge to your invite |
| Server IP | Show a Minecraft player count badge |
| Flip Badge Positions | Swap the Discord and server badge positions |
| Remove Badge Borders | Remove the border and background from badges |
Footer
The footer section at the bottom of every page. You can use the default layout or build custom columns.
Default layout settings:
| Setting | Description |
|---|---|
| Show Brand | Show your logo and store name |
| Left Text | Custom text for the left section |
| Copyright Text | Custom copyright text |
| Show Powered By | Show “Powered by FluxStore” |
Custom columns (up to 3):
Each column can have a title, links, rich text content, and an optional image. You can control the width, alignment, and whether links render as buttons.
Packages
The product grid showing your store’s packages. This section has no additional configuration. It automatically displays your packages organized by category.
Text
A rich text content block for adding custom information to your pages.
| Setting | Description |
|---|---|
| Title | Section heading |
| Content | Rich text HTML content |
| Alignment | Align text left, center, or right |
| Text Color | Override the text color |
| Background Color | Set a background color for the section |
Module
Embed a module into your page. See Modules for what’s available.
| Setting | Description |
|---|---|
| Module | Which module to display |
| Alignment | Align the module left, center, or right |
Sidebar
A sidebar card section for layouts using side navigation. Controls what appears in the sidebar alongside navigation.
| Setting | Description |
|---|---|
| Show Cart | Show the cart in the sidebar |
| Show Currency Selection | Show a currency picker (only if multi currency is enabled) |
| Disable Player Selection | Hide the player/username input |
Custom HTML
For advanced users who want to inject their own HTML and CSS into a section.
| Setting | Description |
|---|---|
| HTML | Your custom HTML code |
| CSS | Optional custom CSS |
| Scope CSS | Scope the CSS to this section only so it doesn’t affect the rest of the page |
Space
An empty spacer section for adding vertical space between other sections. No configuration needed.
Managing sections
To add a section, click Add Section below the current section list, choose a type, and configure its settings. Drag sections by their handles to reorder them. Click the delete icon on a section to remove it.
Removing a section deletes its configuration permanently.
Row groups
Sections can be grouped into rows to sit side by side. When grouped, each section has a width setting (one third, half, two thirds, or full) that controls how much of the row it takes up. This is how you create multi column layouts on desktop.