Atelier: Fashion Theme for OpenCart

Overview

Atelier is a fashion and apparel theme for OpenCart 4.x and 3.0.x by Kavio Labs. It is built for independent labels, boutiques and concept stores selling clothing, shoes and accessories. The idea: your shop reads like a printed lookbook, not a catalogue.

What you get

• Split lookbook hero. An editorial serif headline with one italic accent word, a lead, a button and a text link, and three big facts. Next to it sit a tall 3:4 image with a shop-the-look pin (product name and price) and a second image set lower, with captions.
• Category tiles. Four 3:4 category images with oversized italic names and the number of pieces.
• Lookbook cards. Tall 3:4 product cards. Hovering shows the second product image. A quick-add size bar slides up, and sold-out sizes stay visible, struck through. Cards also carry colour swatches, hang-tag labels (New, -20%, Bestseller, Low stock) and a wishlist heart.
• Colourways that link up. Sell each colour as its own product, so every colour keeps its own stock per size. Give the colourways the same Style attribute: cards then show every colour as a swatch, and the product page links them.
• Shop the look. A look image with numbered dots, the pieces with their prices, a size select for pieces that need one, and one Add all to bag button with the total.
• Journal story and promises. One big story with a pull quote, plus three promises in italic serif. All texts are your own.
• Product page. A large gallery: the first image full width, then two side by side, or a swipe gallery with a counter on phones. It has colour swatches, a size chip grid that keeps sold-out sizes visible, a fit scale, quantity buttons, a big Add to bag button, three perks and accordion sections for description, specification, delivery and reviews. Below sits the cloth band, an editorial block built from an attribute group. A sticky buy bar appears on phones.
• Category page. A huge title with a superscript count, subcategory chips with counts, a sticky toolbar with sort and a 2 / 3 / 4 column density switch, and progress text such as "Showing 12 of 27".
• Header and footer. A menu on the left with wide mega panels (subcategories and two featured category images), a centred logo, and search, account, wishlist and bag on the right. On phones the menu becomes a slide-in drawer. A newsletter band sits above the footer, and the footer ends in a giant italic wordmark.
• Four presets that change the mood. Bone (bone paper, espresso, clay), Noir (evening edition: dark ground, apricot accent, product names in tracked capitals), Sorbet (blush and oxblood, hero copy on a solid tomato panel, rounded images) and Sage (linen sage, forest ink, white passe-partout frames around images).
• Self-hosted fonts. Fraunces (with italics) and Manrope, both under the SIL Open Font License 1.1. Atelier makes no requests to font CDNs.
• Safe to install. No core file changes and no OCMOD. A licence problem never blocks the store: the theme keeps working and the settings page shows a reminder.

Noir	Sorbet	Sage

Works with

• Make an Offer (Kavio Labs): the offer button appears under Add to bag.
• Product Personalizer (Kavio Labs): its options render in the buy box like any other option.
• Other extensions keep working. Atelier keeps the core ids on the product form (#form-product, #input-quantity, #button-cart) and on the mini bag (#cart).

Versions

One licence covers both packages and includes 12 months of updates and support.

Pages

Installation

OpenCart 4.x

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

OpenCart 4 has no theme folders. Atelier is a theme extension: it uses its own templates while it is the store's theme and switched on. To return to the stock look at any time, switch the store back to Default.

OpenCart 3.0.x

1. Go to Extensions > Installer and upload kv_theme_atelier-oc3.ocmod.zip.
2. Go to Extensions > Modifications and click Refresh. Atelier ships no modification, but OpenCart expects a refresh after every upload.
3. Go to Extensions > Extensions, choose Themes, and click Install next to Atelier Fashion Theme by Kavio Labs.
4. Click Edit, check that Status is enabled, choose a preset, check the image sizes on the Listing & images tab, and save.
5. Go to System > Settings, edit your store, and on the General tab set Theme to Atelier Fashion Theme by Kavio Labs. Save.

Recommended settings

• Image sizes. On OpenCart 4 they are under System > Settings > Image; on OpenCart 3 they are on Atelier's Listing & images tab. Atelier is built for 3:4 portrait images:

| Image | Size | |---|---| | Product list | 450 x 600 | | Product image | 900 x 1200 | | Additional images | 900 x 1200 | | Popup | 1200 x 1600 | | Related | 450 x 600 | | Category | 600 x 800 | | Cart | 90 x 120 |

• Products per page: 12. It fills the 4-, 3- and 2-column grids evenly.
• Product photos: 3:4 portraits on a plain, warm background. The second image of a product (the first additional image) appears on hover: use a detail or back view.
• Home layout (Design > Layouts > Home): Atelier renders its home sections itself. Modules you add to the Home layout still show, below the Atelier sections.

Uninstall

1. In Extensions > Extensions > Themes, click Uninstall. Atelier removes its events and settings. A store that still uses Atelier is switched back to the stock theme first, so it never renders without a theme.
2. Delete the upload in Extensions > Installer.

Updates

1. Upload the new package in Extensions > Installer. On OpenCart 4, uninstall the old version there first.
2. On OpenCart 3, refresh modifications.

Your Atelier settings stay as they are. New settings of a later version start with their default values.

Configuration

Open Extensions > Extensions > Themes > Atelier Fashion Theme by Kavio Labs > Edit. Settings are per store: add &store_id= to the address to edit another store. Texts accept plain text; in titles, *word* becomes the italic accent word, as in "The edit".

General

Header & footer

Home page

• Hero: eyebrow, title, lead, button and link, a text link, and up to three facts (48|New pieces;92%|Natural fibres).
  • Images: a main image (3:4) and a second image. Without your own images, Atelier shows its preset-coloured illustrations.
  • Captions: Look 04|01 / 12 puts the bold part left and the counter right.
  • Pinned product id: adds the shop-the-look pin with the product name and price.
• Category tiles: four category ids in order. Empty uses the first categories that have an image.
• Product grid: product ids, or latest products, products on special or bestsellers.
• Shop the look:
  • Pieces: two to six product ids.
  • Image: a 5:4 image with dot positions as left,top in percent per piece, for example 26,30;56,26;78,50. Without an image, the product photos are laid out as a flat lay.
  • Sizes: pieces whose only required option is the size get a size select. Pieces with other required options link to their product page.
• Journal story: section title, image (4:3), kicker, heading, lead and link, plus a pull quote. For the link, use a URL, a category id or an information page as i:4.
• Three promises: a title and a text each.

Every section has its own switch. With Atelier home sections off, the home page shows only the modules of the Home layout.

Product data

Atelier reads core OpenCart data only: options, attributes, specials, stock and images.

Licence

Enter the key from your Kavio Labs account. Without a key the theme runs a 14-day trial. After the trial the store keeps working and this page shows a reminder. The links on the tab lead to your licences, this documentation and support.

FAQ

Does Atelier change OpenCart files?

No. It installs as a theme extension, adds its own templates and events, and ships no OCMOD. Uninstalling removes its events and settings and switches the store back to the stock theme.

Why should each colour be its own product?

OpenCart keeps stock per option value, not per combination. A coat with a Colour option and a Size option cannot know that "navy, size M" is sold out. With one product per colour and a Size option, every size of every colour has its own stock. The Style attribute links the colourways: cards show all colours and the product page switches between them. A Colour option still works too, if you prefer it.

The quick-add bar does not appear on some cards. It appears when the size is the only required option of the product, the product is in stock, and prices are visible. Products with more required options, such as engraving text, open their product page instead.

Can I use landscape or square photos?

Yes. Atelier crops them to 3:4 on cards and in the gallery; the first product image is shown uncropped. For the best result, use 3:4 portraits at 900 x 1200.

Where do the hero and story illustrations come from?

They are Atelier's own illustrations, coloured by the preset. Set your own images on the Home page tab to replace them.

Does the newsletter band collect e-mail addresses?

No. OpenCart has no guest newsletter list. The band links to the newsletter page for signed-in customers and to registration for guests, where the newsletter box is part of the form.

Does the theme slow the store down?

No. The fonts are self-hosted and preloaded, there is one stylesheet layer and one small script, and images load lazily below the fold. Atelier adds no tracking and makes no external requests.

What happens when the licence expires?

Nothing visible to shoppers. The store keeps the theme, and the settings page shows a reminder. The licence covers updates and support for 12 months.