Ridge: Sports & Outdoor Theme for PrestaShop

Overview

Ridge is a classic sports and outdoor storefront theme for PrestaShop 8.2 and 9.x by Kavio Labs. It is made for shops that sell hiking, bike, running, climbing, camping, snow and water sports gear: shoppers pick their sport, filter by the weather they expect and compare specs before they buy. A child theme of Classic, so it runs on PrestaShop 8.2 and 9.x, including the 9.2 one-page checkout.

What you get

• Hero slider with a product card. Up to three slides, each with its own scene, headline, button and a glass product card (picture, rating, specs, price and a real deal timer). A slide index with a progress line, swipe on phones, pause on hover, no autoplay with reduced motion.
• Mega menu with pictures. Each top category opens a panel with its sub-categories, the product count and a picture card ("Shop all Hike"). One menu item (for example Outlet) can be highlighted in the accent colour.
• Shop by activity. Picture tiles for your top-level categories with an icon, a number and the product count.
• Gear check. Chips built from your Conditions feature (Rain, Wind, Below 0 °C, Heat, Overnight) filter a grid of products in the browser, with counts per condition.
• Rich product cards. A second picture on hover, Quick view and Add to cart (or Choose size for products with sizes), the brand, condition icons, rating, spec chips (for example 1.1 kg, 38 L), the number of sizes, the price with the regular price and a deal timer that only appears when the sale has a real end date.
• Last light deals. A dark band with a segmented clock that counts down to the earliest real end date and four deal rows.
• Spotlight. One product on its scene with Built for gauges and the conditions it is made for.
• Field notes, brands and services. Three editorial cards that link to your CMS pages, a brand wall with product counts and a band of big numbers (stores, trial days, warranty, dispatch).
• Category scene hero. Category pages open with the category picture, the name, the product count, an excerpt of the description and sub-category chips with counts.
• Product page. Brand and reference line, the deal timer under the price, size buttons, Built for (condition chips and segmented gauges that compare numeric features such as weight, volume or waterproof rating with the rest of the category), a fit scale (runs small, true to size, runs large) and a delivery panel (dispatch cut-off and delivery dates, field trial, repairs). A sticky buy bar on phones.
• Four presets. Summit (white page, night-blue bands, flare-orange buttons), Glacier (ice blue, square corners), Forest (warm paper, pine green, lime highlights) and Dusk (a dark edition). Every text pair meets WCAG AA contrast.
• One icon set, motion and depth. Line icons across the header, sections and product page; soft shadows, lift on hover, reveal on scroll and a cart bump, all switched off with prefers-reduced-motion.
• Self-hosted fonts. Saira, Saira Extra Condensed and Geist Mono under the SIL Open Font License 1.1. No requests to font CDNs.
• Demo content. One button imports Fellcraft Outfitters: eight sports with sub-categories, fifty products from four fictional brands with conditions, weight, volume, waterproof and temperature features, sizes, timed deals, reviews and three field-note pages. Everything is generated illustration, no photos and no real brands.

On a phone the menu becomes a slide-in drawer, the top bar notes take turns, sections scroll sideways and the product page gets a sticky buy bar.

Home on a phone	Product on a phone

Glacier	Forest	Dusk

Compatibility

• PrestaShop 8.2.x and 9.x (tested on 8.2.8 and 9.2.0), PHP 7.2.5 to 8.5.
• Needs the Classic theme, which ships with PrestaShop.
• Classic five-step checkout and the PrestaShop 9.2 one-page checkout.
• Works with the PrestaShop core modules (main menu, search, product comments, wish list, faceted search, newsletter) and with Kavio Labs modules such as Product Personalizer, Make an Offer and Sell by Weight & Length.
• No core changes, no overrides. English only.

Installation

Requirements

• PrestaShop 8.2.x or 9.x with the Classic theme present (it ships with PrestaShop; do not delete it, Ridge is its child theme).
• PHP 7.2.5 or newer (the PHP version your PrestaShop already runs on is fine).

Install the theme

1. Go to Design > Theme & Logo and click Add new theme.
2. Choose Import from your computer, upload kvridge-1.0.0.zip and click Next. PrestaShop unpacks the theme into themes/kvridge and copies the companion module Ridge theme settings into modules/kvridge.
3. Click Use this theme next to Ridge. PrestaShop installs and enables the companion module, applies the Ridge image sizes and puts the modules in the Ridge positions (every position the companion module uses is listed in the theme's config/theme.yml).
4. Go to Design > Image Settings and click Regenerate thumbnails (all types) so your existing product pictures get the new sizes. On PrestaShop 9 you can also run bin/console prestashop:thumbnails:regenerate.
5. Go to Advanced Parameters > Performance and click Clear cache.

Licence key

Ridge works for 14 days without a key. Open Modules > Module Manager > Ridge theme settings > Configure, scroll to Licence, paste the key from your Kavio Labs account and click Save key. The licence is checked from this page (and once a day), never on a storefront request. Without a valid key the theme itself keeps working with the Summit look; the home page sections, the mega menu cards, the top bar notes, the text logo, the card extras (spec chips, condition icons, second picture, quick add, deal timers), the category hero, the product page extras and the other presets are switched off until the key is valid. (The PrestaShop Addons edition has no licence key and makes no outbound calls.)

Import the demo content (optional)

On the same configuration page, click Import demo content. It adds eight sports with sub-categories, fifty products from four fictional brands with conditions, weight, volume, waterproof and temperature features, sizes, timed deals, reviews and three field-note CMS pages, and sets the shop name to "Fellcraft Outfitters" (and the shop e-mail to a placeholder address). To let the new look show, it also hides the stock demo content while it is installed:

• the default sample products, the default top categories (Clothes, Accessories, Art) and the default brands are set to inactive;
• the stock home blocks that the Ridge sections replace (image slider, banner, custom text, reassurance, featured products, best sellers and specials) are unhooked. New products stays as the new arrivals shelf.

Click Remove demo content to delete everything the import created and to switch all of the above back on, with your previous settings restored. The demo state is kept when you uninstall the module, so you can still remove it afterwards.

Set up your catalogue

• Sports: your top-level categories become the menu, the activity tiles and the mega menu panels. Give each one a category picture (at least 1600 x 900 px, a landscape works best): it is used by the activity tile, the mega menu card and the category hero. Sub-categories without their own picture use their parent's picture.
• Products in parent categories: list each product in its sub-category and in the sport (for example Backpacks and Hike), so the sport page shows all of them. The demo import does this for you.
• Conditions: a feature named Conditions with one or more values per product: Rain, Wind, Below 0 °C, Heat, Overnight (any words work; the icon is picked from the word). It drives the gear check chips, the card icons and the product page.
• Specs: features such as Weight (380 g, 1.1 kg), Volume (38 L), Waterproof rating (20,000 mm), Temperature rating (-9 to +3 °C) and Comfortable load (8-14 kg). The first two a product has become the spec chips on its card; the numeric ones become the Built for gauges.
• Fit: a feature named Fit with the value Runs small, True to size or Runs large.
• Brands: assign each product a brand (Catalog > Brands & Suppliers). The brand shows above the name and fills the brand wall.
• Deals with an end date: create a specific price with a percentage and an end date (the product's Pricing tab). The card timers, the hero card timer and the deals clock only use real end dates.
• Product pictures: at least 800 x 800 px, the product on a white or very light background. A second picture (the product in use or on a scene) appears when the pointer is over the card.
• Field notes: create CMS pages for your route guides, tests or care tips and link them in the Notes setting with cms:ID.

One-page checkout (PrestaShop 9.2)

If you enable the one-page checkout of the PrestaShop module "One Page Checkout", Ridge takes over its page template and renders it in the Ridge look. Nothing else is needed.

Updating

Upload the new theme zip the same way (PrestaShop asks you to delete the old theme folder first, or replace the files by FTP). Your settings stay in the database.

Uninstalling

Switch to another theme in Design > Theme & Logo, then delete Ridge there. Uninstall Ridge theme settings in the Module Manager to remove its settings. Remove the demo content first if you imported it.

Configuration

Everything is on one page: Modules > Module Manager > Ridge theme settings > Configure. Save with the Save button at the end of the settings form.

Look

Home page: hero

Up to three slides; a slide without a title is skipped. For each slide:

• Scene: one of the bundled scenes (alpine, gravel, night, basecamp, outlet, note-1, note-2, note-3) or the URL of your own picture (1600 x 900 or larger). You can upload pictures with the file manager of a CMS page and paste the address.
• Eyebrow, Title, Text, Button: put *a few words* between asterisks to show them in the accent colour (this works in every section title).
• Button link: a URL, a path starting with /, or cat:12, cms:4, brand:3.
• Product card ID: shows this product as a glass card on the slide.

Stats under the hero: up to three short facts, separated by |.

Home page: sections

The stock product shelves (New products, Featured products, Best sellers, Specials) keep their own module settings and positions.

Product page

Demo content

Import demo content and Remove demo content are on the same page; see Installation.

Licence

The licence card is at the end of the page (own-site edition only). See Installation.

FAQ

Does Ridge change PrestaShop core files or use overrides?

No. Ridge is a child theme of Classic plus a companion module that uses standard hooks. The only module template it replaces is the page template of the 9.2 one-page checkout, inside the theme folder, which is the supported way to customise a module template.

Which PrestaShop versions are supported?

PrestaShop 8.2.x and 9.x (tested on 8.2.8 and 9.2.0). The same zip works on both.

My sport page (Hike) shows no products. PrestaShop lists only the products that are assigned to a category. Assign your products to the sub-category and to the sport. The activity tiles and the category hero already count the products of the whole sport.

The gear check, the condition icons or the Built for block do not show. They need a feature named Conditions (or the name you set) and numeric features such as Weight or Volume on your products. Products without them simply do not show these parts.

A gauge looks short for a good product. The gauge compares the product with the other products of the same category. If lower is better for a feature (weight, temperature rating), end its name with - in Gauge features.

Why is there no timer on some discounted products?

Ridge only shows a timer when the specific price has an end date. No end date, no timer: we never show a fake countdown.

Can I use my own pictures in the hero?

Yes. Upload a picture (for example with the file manager of a CMS page) and paste its address into the slide's Scene. Use 1600 x 900 or larger.

What does the demo import change, and can I undo it?

It adds its own categories, products, brands, features, reviews and three CMS pages, sets the shop name and e-mail, hides the stock sample content and unhooks the stock home blocks that Ridge replaces. Remove demo content deletes what it added and restores everything else, including your settings.

Does Ridge load fonts or scripts from other servers?

No. The fonts are in the theme (SIL Open Font License 1.1) and the module makes no storefront requests. The own-site edition checks its licence from the configuration page only.

Will it work with my modules?

Ridge keeps the Classic hooks, classes and data attributes, so modules that work with Classic work with Ridge. It is tested with the core modules and with Kavio Labs modules such as Product Personalizer, Make an Offer and Sell by Weight & Length.

Where do I get support?

From your Kavio Labs account (My licences). Updates and support are included for the period you bought.