The theme editor is the heart of Axnify. It puts you in complete creative control of your storefront — every section, every colour, every font, every pixel — all through a visual, drag-and-drop interface. No coding skills required, but full CSS access for those who want it.
The Editor Interface
When you open the theme editor, you will see three main areas:
- Left Panel: Section management, settings, and configuration options
- Centre: Live preview of your storefront that updates in real time
- Top Tabs: Switch between Header, Pages, Footer, Typography, Assets, and CSS modes
Working with Sections
Every page in your theme is built from sections — self-contained content blocks that you can add, remove, reorder, and configure independently. Available section types include:
- Hero Banner: Full-width hero with heading, subheading, call-to-action button, and background image. Customise alignment, colours, and font sizes
- Featured Products: Dynamic product grid that pulls from your catalogue. Set the number of products, columns, and whether to show prices
- Text with Image: Side-by-side layout for brand storytelling. Choose image position (left or right)
- Collection List: Showcase your product collections in a visual grid
- Testimonials: Customer quotes in a multi-column layout
- Newsletter: Email signup form with customisable colours for background, text, buttons, and inputs
- Trust Badges: Build confidence with configurable trust indicators
- Countdown Timer: Create urgency for sales and launches
- Rich Text: Free-form content with heading and body text
- Image Gallery: Multi-column image grid
- Custom HTML: Insert any HTML for advanced integrations
Typography Panel
The Typography tab gives you granular control over every text element in your store. Set font family, size, and weight independently for:
- Body text
- H1 through H6 headings
- Button text
- Navigation text
Choose from 50+ curated Google Fonts. Changes are applied with !important to ensure your typography settings override any component-level defaults.
Header and Footer Customisation
Your header and footer are shared across all pages. Each consists of rows containing blocks:
- Header blocks: Logo, navigation menu, search bar, cart icon, announcement bar
- Footer blocks: About text, link columns, newsletter, social icons, payment icons, copyright, contact info
Add multiple rows for layered headers (e.g. announcement bar above the main navigation). Each row has independent background colour, text colour, padding, and border settings.
Theme Assets
The Assets tab lets you upload images that are bundled with your theme. Use asset references ({{theme_asset:key}}) in section settings so that images travel with the theme — essential for the marketplace.
Custom CSS
For advanced customisations, the CSS tab provides a full code editor. Target any element using built-in selectors:
.axnify-store— body wrapper.axnify-header/.axnify-footer— header and footer.section-hero,.section-banner— by section type#section-{id}— individual sections
Custom CSS runs after all other styles, so it always takes precedence. Use the Format button to clean up your code and the Maximise button for a full-screen editing experience.
Responsive Preview
Preview your changes across three viewports — desktop, tablet, and mobile — using the device toggle in the preview toolbar. Every section is fully responsive out of the box, but the preview helps you fine-tune spacing and layout for smaller screens.