Gloss: Beauty & Cosmetics Theme for OpenCart

Overview

Gloss is a beauty and cosmetics theme for OpenCart 4.x and 3.0.x by Kavio Labs. It is built for multi-brand beauty stores: makeup, skincare, fragrance, hair, bath and body, men's grooming and minis, where shoppers look for a brand, a shade and a deal.

What you get

• Brands A-Z. The first menu item opens a panel with all your manufacturers grouped by first letter, a letter rail and the six biggest brands up front. It is built from your manufacturers with enabled products.
• Brand mosaic. A tall campaign tile (one product, with its price and countdown) beside four brand offer tiles. Each tile shows the brand, its biggest running discount and the date the offer ends, taken from your special price end dates.
• Shade strip. Ten skin-tone dots from fair to deep, built from a filter group you choose (for example "Shade group"). Each dot opens the category products that carry that filter.
• Counter-plate cards. Every product stands on a tinted plate, with round shade swatches ("+4"), the brand line, rating, price and a unit price such as "30 ml · $1.27 / ml". Badges: sale, New, Clean, Gift set, Mini.
• Top 10 chart. Ten products ranked by orders (then views) with large serif numerals.
• Home sections. Trust row, tabs (new in, bestsellers, on offer), shop by concern chips, an offers band with real countdowns, a minis row, a routine builder with one Add to bag, brands row, journal cards, reviews and a loyalty band. Each can be switched off.
• Product page. Gallery with hover zoom, brand line, unit price, a shade picker with a large preview of the chosen shade, size chips, reward points line, delivery panel (delivery dates, free samples, returns), tabs for details, how to use, ingredients and reviews, and Frequently bought together.
• Four presets. Nude (default, warm nude with cherry buttons), Cherry (pink with cherry bands and sticker badges), Peach (peach with leaf-green accents and square plates) and Noir (dark with champagne-rose buttons and outline numerals).
• Self-hosted fonts. Instrument Serif and Instrument Sans (SIL Open Font License 1.1). Gloss makes no requests to font CDNs.
• Safe to install. No core file changes and no OCMOD. A licence problem never blocks the store or the admin panel.

On a phone the menu becomes a slide-in drawer, the campaign shows its text first and the home page stacks into one column.

Works with

Other extensions keep working: Gloss keeps the core ids of the product form and the mini cart. Extensions that add buttons to the product page appear under Add to bag.

Versions

Licence

One licence covers both packages. 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_gloss.ocmod.zip. Click Install (the green + button) next to it.
2. Go to Extensions > Extensions, choose the type Themes, and click Install next to Gloss Beauty and Cosmetics 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 Gloss Beauty and Cosmetics Theme by Kavio Labs. Save.

OpenCart 4 has no theme folders. Gloss is a theme extension: it swaps in its own templates while it is the store's 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 Gloss is the active theme.

OpenCart 3.0.x

1. Go to Extensions > Installer and upload kv_theme_gloss-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 Gloss Beauty and Cosmetics Theme by Kavio Labs, then Edit, check Status and save.
4. Go to System > Settings, edit your store, open the Option tab and set Template to Gloss Beauty and Cosmetics 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 data

Gloss reads your normal catalogue data. Before you start:

1. Brands. Add manufacturers and assign them to products. They fill the Brands A-Z panel, the brand offer tiles, the brands row and the brand chips on category pages.
2. Shades. Add an option named "Shade" (radio) with one value per shade. Give each value an image, or name it with a colour word (Honey, Rose, Espresso). Add a filter group "Shade group" with the ten tones for the shade strip.
3. Volume. Add an attribute "Volume" ("30 ml") for the unit price. Add "How to use" and "Ingredients" attributes for their tabs.
4. Special prices. Give products a special price with an end date to get countdowns and the brand offer tiles with their end dates.
5. Labels. An attribute "Label" such as Clean or Gift set becomes a badge.
6. Related products. Add two products without required options as related products to get Frequently bought together.

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 Gloss from Extensions > Extensions > Themes.

Configuration

Open Extensions > Extensions > Themes > Gloss > Edit. Every storefront text you can change is on one of these tabs. A section that is switched off or has an empty title is not shown.

General

• Status and Preset (Nude, Cherry, Peach, Noir). Text logo is shown beside or instead of the logo image; wrap one word in *stars* to set it in italic (Gloss & *Co.*).
• Counter plates put products on a tinted plate in the colour of the preset; off gives a plain white plate. Hover zoom and Delivery panel switch product page features.

Header & footer

Three top band messages, the label of the Brands A-Z menu item (empty hides the panel), the number of categories in the menu, the label of the Offers pill (links to the Specials page), an optional second link, the search placeholder, the loyalty band, the footer text and help card, and the payment chips (plain text, no logos).

Home page

Brand mosaic (campaign label, title, text, button, product id, up to four brand ids), shade strip, trust row, tabs, Top 10, shop by concern, offers band, minis, routine builder, brands row, journal and reviews.

• Product id fields take comma lists of product ids, for example 42, 57. Empty fields use an automatic source: the best discounted product for the campaign, the brands with the biggest running discounts for the offer tiles, products on special for offers, orders then views for the Top 10 and bestsellers, the newest products under the maximum price for minis.
• Link fields take a category id (20 or 20_27), an information page as i:<id> or a URL.
• Shade strip filter group: the name of a filter group from Catalog > Filters (default "Shade group"). Create filters Fair, Light, Light medium, Medium, Medium tan, Tan, Deep tan, Deep, Rich, Ebony in that sort order and give them to your products. The dot colour comes from the filter name.
• Shop by concern chips are separated by ;. Acne is a search for the word, Acne|20 or Acne|i:5 or Acne|https://... link to a category, page or URL.
• Reviews need real quotes. Write only real figures.

Product data

• Shade option names and Chip option names: options with these names get round shade swatches or chips. Swatch colour comes from the option value image, otherwise from the value name (Honey, Rose, Espresso ...).
• Range and Shade attributes: sell each shade as its own product and give them the same Range value to show shade swatches on cards.
• Volume attribute: a value like 30 ml, 250 g or 50 fl oz produces the unit price "$1.27 / ml" on cards and the product page. Very small prices per ml or g are shown per 100.
• How to use and Ingredients attributes become their own tabs on the product page.
• Delivery time attribute, Label attribute (for example Clean, Gift set, Mini; "Clean" shows in green), New tag days, Low stock tag, the in-stock line, free samples and returns lines, and Frequently bought together.

Listing & images (OpenCart 3 only)

Products per page and the image sizes. On OpenCart 4 these are in System > Settings > Image. Gloss shows products on square plates: 520 x 520 on cards and 800 x 800 on the product page work well.

Licence

Paste the licence key from your Kavio Labs account. Without a key the theme keeps working and the page shows a notice.

FAQ

Does Gloss change core files or use OCMOD?

No. On OpenCart 4 it is a theme extension that uses events; on OpenCart 3 it is a normal theme directory plus events.

Why is the Brands A-Z item missing?

It needs manufacturers assigned to enabled products, and a label on the Header & footer tab. A manufacturer without products is not listed.

Why do my cards show no shade swatches?

Swatches come from an option named in Shade option names (default Shade, Colour), or from sibling products with the same Range attribute. Products without them show no swatches.

Why is the shade strip empty?

It reads the filter group named on the Home page tab (default "Shade group"). Create the group under Catalog > Filters with its filters in sort order.

Why do the brand offer tiles show "6 products" instead of a discount?

A brand shows "Up to N% off" while one of its products has a running special price. Otherwise the tile shows the product count.

Why does a card show no countdown?

The countdown needs a special price with an end date less than 60 days away.

How is the unit price calculated?

The price (with tax as your store shows it) divided by the number in the Volume attribute. It is a display line only.

How is the Top 10 ranked?

By ordered quantity, then by views when there are too few orders.

Can I use it with a multi-store setup?

Yes. Settings are stored per store.

What if the licence is missing or expired?

The storefront and the admin panel keep working. The theme settings page shows a reminder.

Does it make external requests?

Only the licence check from the admin settings page. Fonts are served from your store.

How do I go back to the stock look?

Set the store theme to Default.