Atlas: Department Store Theme for OpenCart

Overview

Atlas is the department-store theme of Kavio Labs for OpenCart 4.x and 3.0.x, the OpenCart edition of the Atlas theme for CS-Cart: the familiar mega-store layout for general and multi-department stores with large catalogues, with a big search header, an All departments menu, a department list beside the hero slider, tabbed product blocks, offer grids, deals and a three-column product page with a sticky buy box. Every department gets its own colour, so shoppers find their way at a glance.

What you get

• Department colour system. Every top category gets its own colour by position (eight colours, then they repeat): the dots in the menu bar, the markers of the department list, the department tiles, the brand and department line on every product card, the category tree and the department showcase. One switch makes every department use the accent colour instead.
• Four styles that change more than the accent. Meridian (white and deep teal, lime deal stickers), Harbor (navy and coral, plate cards on grey), Citrus (cream and sun yellow, pill buttons, magenta stickers) and Night (a dark store with mint buttons). Each style sets the header, menu bar, hero, side promos, promotions band, footer, department colours, corner radius and card look. On top you can set eight colours of your own with a live preview; text on every coloured surface turns white or dark by contrast.
• Header. Top bar with up to three messages and service links; logo (or a map mark with your store name and a tagline); a search with a department selector and live product and category suggestions; phone number or a "Contact us" link; labelled wish list, compare and account icons with counters; a cart button with the cart total that opens the cart as a side panel.
• Menu bar. An All departments button with every department, its image, product count and a flyout with the subcategories; your departments with their colour dots and mega panels (subcategory columns, top brands, popular products, a banner of your own or the best deal); a New in link and a Deals button. Items that do not fit go into a More panel.
• Home page, every section for all devices, desktop only or phones only, in any order:
  • the department list standing open beside a hero slider (accent word in italics, two buttons, a round price disc, counter and arrows) and two side promos;
  • a service strip with four promises;
  • department tiles in the department colours with product counts and subcategories;
  • Picked for you: up to four tabbed product blocks (most popular, bestsellers, on sale, new in);
  • a 2 + 1 + 2 offer grid with labels, badges and cut-out images;
  • Deals of the day on a tinted band with countdowns that run to the real end date of the special price;
  • a trending scroller, a department showcase (a panel in the department colour beside four of its products) and a full-width promotions band;
  • brands as wordmarks, the journal (OpenCart 4.1 blog or three stories of your own) beside an about text, and a newsletter card on the edge of the footer.
• Product cards. Brand and department line with the department colour, a sale ribbon and a new sticker, colour dots, rating, a low stock tag, the sale price with the list price, a stock line, an add button on every card (an arrow to the product page when a choice is needed), wish list and compare, a second image on hover and a promotion countdown.
• Category pages. A department tree (every department with its count, the current one open with its subcategories), the core filters, subcategory links, an offer tile inside the product grid (one or two cells wide, per category; also video and article tiles that open in a dialog), AJAX filters and sorting, active filter chips, Show more or loading while scrolling, and New in this department under the grid. On phones the tree becomes a chips row and the filters open as a sheet.
• Product page. Three columns: the gallery with thumbnails and hover zoom (and an optional product video), the info column with the highlights (the first bullet points of the description) and colour chips with names, and a sticky buy box with the price, the saving, the stock line, quantity, Add to cart, wish list, compare, the promotion end, delivery facts with dates and payment chips. The tab bar under the product sticks with the price and an Add to cart button; on phones a sticky buy bar appears.
• Structured data (JSON-LD): product, offer, rating and breadcrumbs, plus the store and its search box on the home page.
• Safe and fast. Events only: no core file changes, no OCMOD. Two self-hosted fonts (Schibsted Grotesk and Onest, SIL Open Font License 1.1), one stylesheet and one script, no font or icon CDNs.

On a phone the departments become a chips row, the menu a drawer with department images, a bottom bar gives Home, Catalog, Search, Saved and Cart, category pages get a Filter and Sort bar and product pages a sticky buy bar.

Works with

Other extensions keep working: Atlas keeps the core ids of the product form and the mini cart, buttons or panels that other extensions add to the product page appear in the buy box, and notes other extensions add inside a price (for example the lowest price of the last 30 days) are styled. Atlas reads standard OpenCart data only (categories, manufacturers, filters, attributes, options, specials, related products, information pages, orders for the bestseller block) and never writes to your catalogue.

Versions

Licence

One licence covers both packages and every style. The first 14 days are a trial. Without a valid licence the store keeps working and the theme settings page shows a reminder.

Installation

OpenCart 4.x

1. Go to Extensions > Installer and upload kv_theme_atlas.ocmod.zip. Click Install (the green + button) next to it.
2. Go to Extensions > Extensions, choose the type Themes, and click Install next to Atlas Theme by Kavio Labs.
3. Click Edit, check that Status is on, pick a Style and save.
4. Go to System > Settings, edit your store, and on the General tab set Theme to Atlas Theme by Kavio Labs. Save.

OpenCart 4 has no theme folders. Atlas is a theme extension: it swaps in its own templates while it is the store theme and switched on. Switch the store back to Default to return to the stock look at any time. The settings page tells you whether Atlas is the active theme.

Recommended image sizes (System > Settings > Image): product card 600 x 600, product page 1000 x 1000, popup 1400 x 1400, additional 160 x 160, cart 140 x 140, category 600 x 600. Square product images on a white or transparent background look best: Atlas places them on light image wells.

OpenCart 3.0.x

1. Go to Extensions > Installer and upload kv_theme_atlas-oc3.ocmod.zip.
2. Go to Extensions > Modifications and click Refresh (the blue button).
3. Go to Extensions > Extensions, choose Themes, click Install next to Atlas Theme by Kavio Labs, then Edit, check Status, pick a style and save.
4. Go to System > Settings, edit your store, open the General tab and set Theme to Atlas Theme by Kavio Labs. Save.

On OpenCart 3 the image sizes and the number of products per page for the theme are on the Listing & images tab of the theme settings.

Set up your store in six steps

1. Look. On the Design tab pick a style (Meridian, Harbor, Citrus or Night), then (optional) your own colours and the card look. The preview next to the styles shows the result before you save. Without a logo image the header shows a map mark with your store name: set the text and a tagline under Logo.
2. Departments. Your top categories are your departments: the menu bar, the All departments list, the department tiles and the category tree (OpenCart 3: tick Top on the categories you want in the menu bar). Their colours follow their order (the Sort order of the categories). Give every department an image (Catalog > Categories > Image): it shows in the department list and on the tiles. On the Header & menu tab add a row per department in Menu names, labels and banners for a shorter menu-bar name (Home for Home & Kitchen), a label (New, -20%) or a banner in its mega panel.
3. Hero. On the Home page tab add one to three slides: a label and a line next to it, a title (wrap one word in *stars* for the accent word in italics), a text, an image path below image/ (a cut-out image on a transparent background works best), a button and an optional second button, and an optional price disc (up to|-30%). Add the two side promos next to it.
4. Merchandising. Fill Picked for you (four tabs; empty product lists use your most viewed, best-selling, on-sale and newest products), the offer grid (five tiles: give the second one the large size), Deals of the day (your special prices; set end dates on specials to get countdowns), the trending scroller, the department showcase and the promotions band (cards with an optional end date: "N days left" and the card hides itself after it).
5. Category pages. On the Category pages tab add promo tiles for the product grid: the categories they show in (empty = all; a department covers its subcategories), the place in the grid, one or two cells wide, the type (an offer, a countdown promo, a video or an article that opens in a dialog), a label, title, image and button. Choose Show more, Load more while scrolling or page numbers.
6. Product data. Atlas reads your normal catalogue data:
   • Options: radio or select options named Colour or Color show as colour dots on cards and as colour chips with names on the product page (the option value image, or a colour from the value name or a #hex code in it); options named Size, Storage, Capacity, Memory or Length show as chips with the price change.
   • Description: the first bullet points (an HTML list) become the highlights under the title.
   • Special prices with an end date (within 60 days) give countdowns on cards and in the buy box.
   • Second image: the first additional image of a product appears when the pointer is over the card.
   • Manufacturers fill the brand line on cards, the brands section and the brand pages.
   • Attributes (names are settings): Ships in (Ships in 1-2 days becomes delivery dates in the buy box), Badges (your own stickers), Video (a YouTube, Vimeo or video file link joins the gallery).
   • Filters: add filter groups (Catalog > Filters), assign them to products and categories, and put the core Filter module in the left column of the Category layout (Design > Layouts). Atlas shows it under the department tree, as a sheet on phones, and active filter chips above the grid.

Update

Upload the new package the same way (and refresh modifications on OpenCart 3). Your settings are kept in the store settings.

Uninstall

Switch the store theme back to Default, then uninstall Atlas from Extensions > Extensions > Themes. The theme settings are removed; your catalogue is untouched.

Configuration

Open Extensions > Extensions > Themes > Atlas > Edit. Every storefront text you can change is on one of these tabs. A section that is switched off or has no content is not shown. Settings are per store.

Design

• Status and Style: Meridian (default), Harbor, Citrus or Night (dark). A style sets the colours of the header, menu bar, hero, side promos, promotions band, footer and departments, the corner radius and the card look.
• Department colours: every top category gets its own colour by position (eight colours, then they repeat). Off = every department uses the accent colour of the style.
• Product card: style default, hairline, plate, minimal or outlined. Subtle animations (visitors who prefer reduced motion never see them).
• Your colours (optional): buttons and accents, links, menu bar, top bar, footer, page background, highlight (All departments button, deal stickers, counters, hero accent) and sale prices. Empty = the colour of the style. The text on these colours is chosen by contrast; a dark page colour switches the store to dark surfaces.
• Logo: the text logo (empty = store name) and the tagline under it, shown when the store has no logo image.

Header & menu

• Top bar with three messages (*stars* make a part bold; the messages rotate on phones) and service links (Our blog on OpenCart 4.1, Gift certificates on OpenCart 3, Our brands); Opening hours, Phone number and its label (empty = a "Contact us" link), Address (footer); Sticky header; Department selector in the search; Search placeholder.
• Menu bar: number of categories (the rest goes into More), All departments (label, number), Department list beside the hero (off = full-width hero and a dropdown on every page), an Extra link (for example the journal), New in and Deals link labels, a Brands item (a brands A-Z panel).
• Menu names, labels and banners: one row per department: a shorter menu-bar name, an icon for departments without an image, a label and its colour, and a banner image, title, text and link for its mega panel. Without a banner the panel shows the best deal of the department.

Home page

• Atlas home sections on or off (off = only the modules of the Home layout), Section order (hero, usp, cats, tabs, mosaic, deal, trend, showcase, promos, banners, brands, blog, reviews).
• Every section has Show and Show on (all devices, desktop and tablet only, phones only).
• Hero: seconds per slide (autoplay pauses on hover, on focus and for visitors who prefer reduced motion), three slides (label, line next to it, title, text, image, two buttons with links, price disc small|big) and two side promos (label, title, text, link, image).
• Service strip: up to four bold part|small part pairs separated by ;.
• Department tiles: title, category ids (empty = your departments), number.
• Product tabs: a title and four tabs (most viewed, bestsellers, on sale and newest by default) with optional product id lists and the number of products.
• Offer grid: title, subtitle, link; tiles with a label, title, text, badge, link text, image, link, size (normal or large) and colour (a department colour or the accent).
• Deals of the day: label, title, product ids (empty = products on special, ending soonest first), number; an optional product of the day with a countdown and the stock sold.
• Trending scroller: title, product ids (empty = most viewed), number.

Merchandising

• Department showcase: the department (empty = your first), label, links (Name|target pairs; empty = its subcategories), button, image and product ids (empty = its most viewed products).
• Promotions band: title, subtitle, link; cards with a label, title, note, badge, image, link and end date (YYYY-MM-DD): "N days left" is shown and the card hides itself after the date.
• Brands: title and number (your manufacturers as wordmarks, or their logos).
• Journal and about: the latest OpenCart 4.1 blog articles or three stories of your own, and an about text (paragraphs separated by an empty line, # starts a sub heading).
• Banners (two or three image banners) and Customer reviews (an average card and up to three quotes; write only real figures and quotes).

Category pages

• Department tree, Subcategories (text links, chips, image tiles, hidden), Pagination (Show more button, load more while scrolling, page numbers), AJAX filters and sorting, Active filter chips, Products per row (3, 4 or 5 on wide screens).
• Promo tiles: categories (empty = every category page; a category also covers its subcategories), place in the grid, size (1 or 2 cells), type (offer, countdown promo, video, article), label, title, text, image, button, link, end date, video URL, information page id, colour (hero colour, accent, dark, light, highlight). Tiles show on the first page of a category.
• New in this department: the four newest products of the category under the grid.
• Product cards: brand and department line, promotion countdowns, quantity on cards, second image on hover, quick view, compare, live search.
• Stickers: sale ribbon, new (days), best seller (top N of the last 90 days), your own stickers attribute, low stock quantity.

Product pages

• Highlights, Hover zoom, Sticky buy bar, Structured data, Delivery facts (up to four lines with an icon, title and text), Payment chips in the buy box, Buy together and its title, Video attribute.
• Product data: colour and chip option names, size guide link, delivery time attribute and the line without one, extra tab attributes, notice attribute, unit price attribute, range and colour attributes (sell each colour as its own product), in-stock line.

Footer & mobile

• Newsletter card (title, text, button: it opens the registration, or the newsletter page for signed-in customers), footer about text, payment chips (plain text, no logos), social links (Name|URL per line, shown as round buttons), Mobile bottom bar and Back to top button.

Licence

The Licence tab takes the key from your Kavio Labs account and shows the licence status. The theme keeps working without a key.

FAQ

Who is Atlas for?

General and multi-department stores with large catalogues: electronics, home and kitchen, fashion, beauty, sports, toys, garden, pets, or any mix of them. The department colours and the department list beside the hero help shoppers find their way in a big catalogue.

Is it the same Atlas as on CS-Cart?

Yes. Atlas for OpenCart has the same design, styles and demo as the Atlas theme for CS-Cart and Multi-Vendor, built natively for OpenCart (Twig templates, OpenCart events, Bootstrap 5 on OpenCart 4 and Bootstrap 3 on OpenCart 3).

How do the department colours work?

Your top categories are your departments. Each gets a colour by its position in the category order (eight colours, then they repeat): change the Sort order of a category to give it another colour. The colour shows on the menu-bar dot, the department list marker, the tile, the brand and department line of its product cards, the category tree and the showcase. Switch Department colours off to use the accent colour everywhere.

Can I change the style later?

Yes, any time. A style changes the look only. Your products, categories, texts and images stay as they are.

Will my own colours stay readable?

Yes. Atlas picks white or dark text for every coloured surface by contrast and darkens link colours until they reach a contrast of 4.5:1 on their ground.

Does Atlas import the demo store?

No. The demo store in the screenshots ("atlas market") is fictional and uses our own illustrations of invented brands; it is not part of the package. The styles, sections and features are.

Where do the hero and promo images come from?

From your own image files (Catalog > Image manager, path below image/). Cut-out images on a transparent background look best on the coloured hero, promos and tiles.

How do countdowns work?

Cards and the buy box show a countdown when the special price of a product has an end date within the next 60 days. Specials without an end date never show a timer. Turn Promotion countdowns off to hide them all.

How do promo tiles in the product grid work?

You add them on the Category pages tab. Each tile takes a place in the product grid (place 1 = the first) on the category pages you choose, one or two cells wide. Countdown tiles need an end date and disappear after it. Video tiles play YouTube (privacy-enhanced mode), Vimeo (do not track) or your own video file in a dialog; article tiles open an information page in a dialog.

Can I hide a home section on phones?

Yes. Every section has a Show on setting: all devices, desktop and tablet only, or phones only.

Does Show more work with search engines?

Yes. The page numbers stay under the button as normal links; the button and scroll loading only add the next page to the grid.

Does it slow my store down?

Atlas adds one stylesheet, one script and two self-hosted fonts. Images below the first screen load lazily. The data it reads is cached per request.

Does Atlas change core files?

No. It uses OpenCart events only (no core changes, no OCMOD). Uninstalling it leaves your store and catalogue as they were.