Mastering the Theme Editor: A Complete Guide

Your storefront is the shop window for everything you sell, and on Dirora you shape it with the visual theme editor — a drag-and-drop workspace where you build pages, set your brand colours and fonts, and watch every change appear instantly in a live preview. There is no code to write and nothing to break: you arrange the pieces, the layout engine handles the responsive, performant markup underneath. This guide walks through the whole editor, from the first click to a launch-ready design.

If you are still deciding whether you can build a store without a developer, the short answer is yes — and our post on whether you need to code to start an online store makes the fuller case. The theme editor is where that promise becomes real.

What the theme editor actually is

Think of the editor as two things working together. On top is a WYSIWYG canvas — what you see really is what your customers will get. Beneath it sits the layout engine, which takes the sections and widgets you drop onto the page and renders them as clean, server-side HTML that loads fast and reads correctly on every device. You never touch that layer directly; you work entirely through visual controls, and the engine keeps the output tidy.

Everything you assemble is saved against your theme, so your design, your colours, your fonts and your page layouts travel together. That matters when you want to duplicate a theme to experiment, or come back to a design later without losing your work.

Finding your way around the interface

When you open the editor you are looking at three zones:

• The left panel is your control surface — this is where you add and reorder widgets, open a widget's settings, and switch between the parts of your store you are editing. The editor works in modes: Header, Pages and Footer for structure, plus dedicated Typography, Assets and CSS modes for global styling, image bundling and advanced code. Most of your time is spent in the visual modes; the last three are there when you want deeper control.

• The centre canvas is a live preview of your storefront. Click any element to select it; change a setting and the preview updates in real time, so you are never guessing what a tweak will do.

• The top toolbar holds your global tools: the device switcher for responsive preview, undo and redo, and the save and publish controls.

Because the preview is genuinely live, the fastest way to learn the editor is to change something small and watch what happens. Nothing you do in a draft is public until you choose to publish it, so it is safe to explore.

Building pages with widgets

Every page is assembled from widgets — self-contained building blocks you drag onto the canvas, then stack and reorder to compose a page. Dirora ships with 41 storefront widgets covering the elements a real shop needs, so in most cases you are choosing and arranging rather than building from scratch. The ones you will reach for most include:

• Hero banner — a full-width headline area with a background image, supporting text and a call-to-action button. This is usually the first thing a visitor sees, so it earns the most attention.

• Featured products and product grids — pull items straight from your catalogue into a tidy grid, choosing how many products and columns to show. Pair this with strong imagery from our product photography tips and it does a lot of selling on its own.

• Collection lists — showcase your categories visually so shoppers can self-navigate to what they want.

• Text with image — a side-by-side block for brand storytelling, with the image on the left or right.

• Testimonials and reviews — social proof laid out in columns to build confidence at the point of decision.

• Newsletter signup — capture email addresses to build an audience you own rather than rent.

• Rich text, image galleries, countdown timers and trust badges — the supporting cast for launches, promotions and reassurance.

• Custom HTML — a dedicated widget for dropping in your own markup when you need something the standard widgets do not cover, such as an embedded third-party tool or a bespoke integration. It sits alongside the visual widgets, so you only reach for it when you genuinely need to.

To add one, drag it from the left panel to where you want it on the page; to move it, drag it up or down; to configure it, click it and adjust its settings. Every widget is responsive out of the box, so a grid that shows four columns on desktop will gracefully collapse to one on a phone without any extra work from you.

Widget choice is design, but it is also conversion. If you want to build pages that actually sell, our guides on high-converting product pages and designing trust into your checkout pair well with this section.

Setting your colours and fonts

A consistent palette and typeface are what separate a storefront that looks bespoke from one that looks like a template. The editor gives you dedicated controls for both:

• Colours — set your brand colours once and apply them across backgrounds, text, buttons and accents. Because the changes are global, a single adjustment ripples through the whole store consistently, rather than leaving you to hunt down mismatched shades page by page.

• Fonts — choose the typefaces for your headings and body text and set their sizes and weights so your store reads clearly and on-brand.

Colour choices carry more weight than most people expect — they shape how trustworthy, premium or approachable a shop feels before a single word is read. If you are unsure where to start, our piece on colour psychology in ecommerce is a good primer. As a rule of thumb: pick one or two brand colours, a neutral for backgrounds, and a single accent for buttons, then resist the urge to add more.

Advanced typography and custom fonts

Fonts do quiet, constant work: they set the tone of your whole shop, and consistent type is one of the clearest signals of a professional brand. The dedicated Typography mode goes well beyond a single heading-and-body choice, letting you set the font family, size and weight independently for every text role in your store:

• Body text — the baseline your customers read most, so legibility matters most here.

• Headings, H1 through H6 — control each level separately to build a clear visual hierarchy down the page.

• Button text — tune the type on your calls-to-action so they read as deliberate and clickable.

• Navigation text — keep your menus crisp and on-brand across every page.

You can pair these roles freely — a characterful display face for headings against a clean, readable body font, for example. There are 50+ curated Google Fonts to choose from, so you are not limited to system defaults and can find something that genuinely fits your brand. Your typography settings are applied so that they reliably override component-level defaults, which means the choices you make here hold consistently across the storefront rather than being quietly overridden by a widget's built-in styling.

Theme assets: bundling your images with the theme

Some images belong to the design rather than to a particular product — a background texture, a brand pattern, a placeholder graphic. The Assets mode is where those live. You upload images here and they are bundled with the theme itself, then referenced from your widget settings using an asset reference rather than a one-off URL.

The payoff is portability: because the images travel with the theme, you can duplicate a theme to experiment, or move a design between environments, without your imagery breaking or going missing. That is exactly why assets matter if you ever want to share or reuse a theme — the design arrives complete, artwork included, instead of pointing at files that have wandered off. For product and lifestyle photography that sits in your catalogue rather than your theme, the media manager is the better home; the guidance in our product photography tips applies to both.

Custom CSS: fine control for those who want it

The visual editor covers the vast majority of what a storefront needs, but sometimes you want to nudge one specific detail that no setting exposes. That is what the CSS mode is for — an optional, full code editor for anyone comfortable writing a few lines of CSS, sitting quietly out of the way of everyone who is not.

You target elements using the storefront's built-in selectors — for example .dirora-store for the overall wrapper, .dirora-header and .dirora-footer for those regions, section-type selectors such as .section-hero, or an individual section by its own id. Your custom CSS is loaded after all other styles, so it takes precedence and reliably wins when you need it to. The editor includes conveniences like a format button to tidy your code and a full-screen mode for longer edits. It is entirely optional — you never need to open it to build a professional store — but it is there the moment you want that last degree of control.

Live preview and responsive design

More than half of ecommerce traffic is on mobile, so a design that only looks right on a laptop is a design that is losing sales. Dirora's editor lets you preview your store across desktop, tablet and mobile using the device switcher in the top toolbar. Every widget adapts automatically, but the preview lets you check the details — how a hero headline wraps on a narrow screen, whether spacing feels cramped, how a product grid reflows.

Get into the habit of toggling to mobile before you publish anything. A layout that feels balanced on a wide monitor can look sparse or awkward on a phone, and the preview is the fastest way to catch it. Speed matters just as much as layout; our guide to store performance optimisation covers how imagery and page weight affect load times.

Working safely: drafts, undo and redo

One of the quiet advantages of the editor is that experimenting carries no risk. Your changes live in a draft until you actively publish them, so your live storefront never changes under your customers' feet while you are mid-redesign. When you are happy, you publish; until then, shoppers see the last version you approved.

Inside a session you also have a full undo and redo history. Drag a widget to the wrong place, second-guess a colour, delete a section by mistake — step back with undo, or step forward again with redo. Between drafts and undo history, there is no such thing as an unrecoverable mistake, which is exactly the confidence you want when you are learning the tool.

Customising your header and footer

Your header and footer appear on every page, so they do a lot of navigational and trust-building work. In the editor you edit them the same way you edit pages — by adding and arranging blocks. A typical header carries your logo, main navigation, a search entry point and the cart; a footer usually holds link columns, a newsletter signup, social links, payment icons and your legal and contact details. Take the time to get these right early, because they frame every other page a visitor lands on.

A simple workflow for your first design

If you are staring at a blank canvas, this order keeps things manageable:

1. Set your brand basics first. Choose your colours and fonts before you build pages, so everything you add inherits the right look from the start.

2. Sort the header and footer. Get navigation and trust elements in place so the frame is stable.

3. Build the homepage from the top down. Start with a hero, add a featured-products or collection block, then layer in social proof and a newsletter signup.

4. Check mobile as you go. Toggle the device preview after each major section rather than only at the end.

5. Publish when it holds together. You can always come back — the editor rewards iteration.

New to the platform entirely? Our getting started guide walks through account setup and adding products, which pairs naturally with designing the storefront here.

What it costs to build this way

The theme editor and layout engine are part of the platform on every plan, including the free Starter tier — there is no separate "design add-on" and no charge for using the editor. Just as importantly, Dirora takes no transaction fees on any plan; the only cut is a small platform fee that falls as you grow, from 1.5% on Starter to 0.75% on Pro, 0.25% on Business and 0% on Enterprise. You can see the full breakdown on the pricing page, and if you are weighing your options, our comparison page lays out how that stacks up against other platforms. When you are ready to go live on your own address, the custom domains guide covers connecting a domain with automatic SSL.