Usage
Styles
Section titled “Styles”Switch styles in Website → Themes. Each style has its own logo colours: upload your logo per style in Website → Themes → Logos.
| Style | Look |
|---|---|
| Meridian | White store, deep-teal menu bar and hero, teal buttons, lime All departments button and deal stickers, 12 px corners, hairline cards that lift on hover. |
| Harbor | Navy header and menu bar, coral buttons with dark text, cobalt links, mint and peach promotion tiles, 6 px corners, padded white cards on a cool grey page. |
| Citrus | Warm cream ground, sun-yellow top bar, hero and buttons, dark menu bar, magenta deals and promotions band, 20 px corners, pill buttons, borderless cards on warm wells. |
| Night | Dark graphite store, mint buttons, coral stickers, pastel department tiles, light product wells, 14 px corners, outline cards. |
Departments and colours
Section titled “Departments and colours”The top-level categories are your departments. Each one gets one of eight colours by its position (Products → Categories: drag the categories to reorder them; the ninth department starts again with the first colour). The colour appears as a dot in the menu bar, a marker and icon tint in the department list, the stripe and tint of the department tile, the dot before the brand on product cards and the dot in the department tree. Category images are used in the department list and on the tiles: square images on a transparent or white background work best.
The brand on product cards comes from your brand feature (feature type “Brand/Manufacturer”); stores without one
can use a text feature with the feature code BRAND.
Header and menu
Section titled “Header and menu”- Search with departments: the search field lists your departments in a selector; shoppers can search everywhere or in one department.
- Phone: shows the company phone from Settings → General → Company. Leave it empty to hide the phone.
- Compare, Wish list, Account, Cart: the counters are filled in the browser, so they also work with the full page cache. The cart button shows the total; clicking it opens the cart as a side panel with the free-delivery progress of the Free Shipping Progress Bar add-on when it is installed.
- Menu bar: the All departments button opens the department list (on the homepage the list is already open beside the hero), the Main menu block holds the department links (template Mega menu with “More” (Kavio theme): items that do not fit move into “More”), and the Atlas menu links block holds New in and Deals.
Homepage
Section titled “Homepage”The homepage comes from the theme’s layout (Website → Themes → Layouts). Every section is a normal block:
| Block | What to edit |
|---|---|
| Departments rail | Categories block (template Department rail (Atlas theme)). |
| Atlas hero slider | Three slides: eyebrow, title (<em> marks the accent word), text, two buttons, price disc, illustration. Edit the texts and links in the block content and keep the classes. Arrows, dots and swipe; no automatic sliding. |
| Atlas side promos | Two promotion tiles beside the hero. |
| Atlas service strip | Four promises (delivery, returns, warranty, support). |
| Shop by department | Categories block (template Department tiles (Atlas theme)): product count and three subcategories, or the first sentence of the category description. |
| Picked for you + four product blocks | The heading block and four product blocks with the user class kv-tabs become one tabbed section. Change the fillings (most popular, bestsellers, on sale, newest or manual). |
| Seasonal offers | The 2 + 1 + 2 offer grid; colours come from data-atl-dept="1".."8". |
| Deals of the day | Product block (template Product section (Atlas theme), style “Deals”), filled with products on sale. |
| Trending this week | Product block (template Product scroller (Atlas theme)). |
| Department showcase + Department picks | A coloured department panel and four products of that department. |
| Current promotions | Promotions band with three cards. |
| Top shops | Multi-Vendor only: Vendors block (template Top shops (Atlas theme)). |
| Brands you love, From the journal, About the store | Brand tiles, the latest blog posts and your about text. |
Product section blocks have the settings Columns (4, 5 or 6), Section style (plain, deals, without title) and a
“View all” link (a page URL or a dispatch such as products.on_sale).
Category pages
Section titled “Category pages”The sidebar shows the Department tree (the department of the page opens to its subcategories) and the product filters. Inside the product grid an offer tile (Category promo tile block) appears after the fifth product; edit or disable it in the layout. Below the grid: New in this department and a short buying guide (Category guide). On phones the department tree becomes a row of chips and the filters open in a sheet from the Filters button.
Product pages
Section titled “Product pages”From 1200 px the product page has three columns: the gallery, the product information (brand and department, title, rating, the first bulleted list of the full description as highlights, options as chips with colour dots) and the sticky buy box (price with the struck list price and the saving, stock, quantity, Add to cart, wish list, compare, the promotion end, the seller box on Multi-Vendor, delivery facts and payment options from the Atlas buy box facts block). Below: the description, features and reviews tabs, You may also like and the service strip.
On Multi-Vendor the seller box shows the vendor, rating and number of products; with the Master products add-on it also links to the other vendors’ offers of the same product (“3 more offers from $…”).
Phones
Section titled “Phones”The header shows menu, logo, account and cart with the search below; the department list becomes a row of chips; product grids show two products per row; scrollers and shop cards swipe; the product gallery swipes with dots; a sticky buy bar replaces the bottom bar on product pages.