Themes and site builder
Your store's look is set from two places in the sidebar, under the Storefront group:
- Themes: the theme gallery, where you install and activate a theme.
- Design: the design studio, where you edit the logo, announcement bar, footer, the theme's colours and text, page sections, and custom pages.
| Feature | Plan |
|---|---|
| Free themes, header, announcement bar, footer, Style | All plans |
| Premium themes (Atrium, Aura, Noor) | Pro and Enterprise |
| Sections and pages in the page builder | Pro and Enterprise |
Saving changes in Themes and in the studio needs permission to manage store settings. Other members can see everything but cannot change it.
Choose a theme
- Open Themes from the sidebar. The Theme Store page appears.
- Each card shows the theme's image and name, and whether it is Free or Premium.
- Click Preview to open the theme in a new tab with your store's products. You can move between Home, Product, Collection, Cart, Checkout, and Order placed, and between Desktop, Tablet, and Mobile. Click Try this theme to install and activate it in one step, if your plan includes it.
- Click Install to add the theme to your store, then Activate to make it your store's theme.
The current theme carries the Active Theme badge. The available themes are Classic, Eclipse, Kindle, Marina, Nooni, Vector, Volt, and Warda (free), and Atrium, Aura, and Noor (premium).
Premium themes
You can install and preview a premium theme on any plan, but you can activate it only if your plan includes it. If it does not, the card shows a Locked badge and Upgrade your plan to activate this theme. with an Upgrade Plan button.
Light and dark appearance
Some themes come in two appearances. After you install one, choose Light or Dark under Appearance on its card.
Customize or remove a theme
- Click Customize to edit Colour presets, the theme's colours, and its Text (main title, button label, and section titles). Leave a text field empty to keep what your storefront shows now. Click Save changes.
- Click the delete icon to remove an installed theme and its customizations. You cannot remove the active theme; activate another one first. Removal cannot be undone.
The design studio
Open Design from the sidebar. The studio opens full screen; to leave, click Back to dashboard. The studio's side rail has three destinations:
- Edit: the page's structure and content.
- Style: the active theme's colours and text, the same settings Customize opens.
- Themes: the same theme gallery inside the studio. Here, Customize activates the theme if it is not active, then takes you to Style.
At the top, choose the page you are editing from the Page list, switch the preview between Desktop and Mobile, and use Undo and Redo.
Header, announcement bar, and footer
In Edit, the Layout tab shows three zones: Header, Sections, and Footer. Click an item to edit it in the Content tab. Header and footer items carry the Global badge: a change applies on every page of your store, and takes effect immediately, with no draft and no publish.
- Header: upload a Brand Logo (PNG, JPG, WebP or AVIF), a Favicon (32x32 recommended), and a Storefront Banner (horizontal, at least 1280x320; a vertical image is refused). Type the Shop Button text.
- Announcement bar: turn it on with its switch, then add Messages with Add message. Turn on Animation to make the bar scroll, then set the Animation duration (30 to 90) and pick a Direction: Auto, Move left, or Move right. You need at least one message, and two when animation is on.
- Footer: shows your Social links for reference only. To change them, click Edit in Store settings; see Store settings.
Style
In Style, edit the active theme's colours (they differ from theme to theme), or pick from Colour presets, and edit the Text. The preview updates as you edit, and changes save automatically. Click Reset next to a setting to return it to its Default. If you leave Style before a save finishes, the studio asks you to confirm.
Sections
The Sections zone is available on the Pro and Enterprise plans. On other plans it shows The page builder is a Pro feature with an Upgrade plan button, and the header and footer stay editable.
- Click Add section and pick a section, such as Hero, Product grid, FAQ, Testimonials, or Video. The list shows only the sections available for the current page type.
- Drag a section to reorder it, or use the move buttons, Duplicate section, Hide section, and Delete section.
- Click a section to edit its content in Content.
- A section with the Locked badge is required and cannot be moved, hidden, or removed, such as the Buy box on the product page.
Reordering, adding, and removing sections needs a computer screen. On a phone you see Use a desktop to arrange sections, and the header, announcement bar, and footer stay editable.
Pages
The Page list has two groups:
- Templates: Home, Product, and Collection. Template pages cannot be deleted and their URL cannot be changed.
- Custom pages: pages you create yourself.
To create a custom page:
- Choose + New page in the Page list.
- Under Start from, pick Blank page, About us, Contact, FAQ, or Shipping & returns.
- Enter a Name (optional) and a Page URL (lowercase letters, numbers, and hyphens only).
- Click Create page.
Click Page settings to edit the SEO title, SEO description, and Page URL, turn on Show in navigation, or delete a custom page with Delete page.
Draft and publish
Section edits save automatically to a draft that buyers do not see. The page shows Live or Unpublished, and Unpublished changes appears when the draft differs from the live page.
- Click Publish, then confirm, to put the draft on your store. If there is nothing to publish, you see There is nothing to publish yet. Add or edit a section first.
- Click Discard draft to go back to the live version.
- Click History to see the last 10 published versions, then Restore to copy one into the draft. A restored version does not appear on your store until you publish it.
The header, announcement bar, footer, and Style need no publishing; they apply immediately.