Fetch: Pet Supplies Theme for OpenCart

Overview

Fetch is a premium, conversion-first storefront theme for pet shops and pet supply stores on OpenCart 4.x and 3.0.x by Kavio Labs. It is built for shoppers who buy for someone at home: they shop by pet first, then by life stage, size and diet, and they want to see in a second whether a food or a bed suits their dog or cat.

What you get

• Photo hero slider. Up to three slides with the photo in a large pet-door arch, a floating product sticker with its price, a rating badge, two buttons, arrows and progress dots. Autoplay pauses on hover, on focus and for visitors who prefer reduced motion.
• Shop by pet. Your top categories as arch photo tiles in pet colours (dog apricot, cat rose, fish aqua, bird butter, small pet lilac, health mint) with product counts.
• Food finder and My pets. A band on the home page and a My pets button in the header: pet, life stage, breed size and diet from your own filter groups. Shoppers can save a pet with a name; it stays in their browser only. Product cards that match say Good for Bella, the product page checks the match and category pages offer a one-click life stage filter.
• Rich product cards. A second image on hover, quick view, wish list and one-tap add to cart, badges (Vet approved, Grain free, Real meat first), sale and New tags, bag sizes, the price per kg or per 100 g, deal countdowns and low stock lines.
• Mega menu. Pet departments with icons, subcategories with product counts, top brands of the department, its best deal and the category photo.
• Product page. Made-for chips (pet, life stage, breed size, diet), the match check for the saved pet, badges, bag-size chips that update the price and the price per kg live, delivery dates, a happy-pet promise line, tabs for the description, feeding guide, ingredients, specifications and reviews, and Complete the bowl (frequently bought together).
• Home sections. Promise row, product tabs (best sellers, new arrivals, on offer), food finder, two photo promo banners, shop by need tiles, a deals band with a live countdown, shop by life stage cards, a starter kit builder with one Add to cart, little treats under a price you choose, reviews, pet care tips with photos and brands. Each can be switched off.
• Four presets. Park (warm ivory, cobalt and tennis-ball lime), Meadow (sage and forest green, soft arches, flat cards), Whiskers (blush and plum, sticker cards) and Nightwalk (dark edition with reflective orange). Presets change arches, card treatment and type weight, not only colours.
• Self-hosted fonts. Gabarito and Rethink Sans (SIL Open Font License 1.1). Fetch 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, a bottom bar gives Home, Shop, Search, Saved and Cart, cards get a round add button and the product gallery swipes.

Works with

Other extensions keep working: Fetch keeps the core ids of the product form and the mini cart. Extensions that add buttons to the product page appear under Add to cart. Fetch reads standard OpenCart data only (categories, filters, attributes, options, specials, related products) and never writes to your database.

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_fetch.ocmod.zip. Click Install (the green + button) next to it.
2. Go to Extensions > Extensions, choose the type Themes, and click Install next to Fetch Pet Supplies 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 Fetch Pet Supplies Theme by Kavio Labs. Save.

OpenCart 4 has no theme folders. Fetch 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 Fetch is the active theme.

Recommended image sizes (System > Settings > Image): product card 600 x 600, product page 900 x 900, popup 1200 x 1200, cart 120 x 120. Square product images on a plain or transparent background look best on the soft image wells.

OpenCart 3.0.x

1. Go to Extensions > Installer and upload kv_theme_fetch-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 Fetch Pet Supplies 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 Fetch Pet Supplies 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

Fetch reads your normal catalogue data. Before you start:

1. Pet departments. Make your pets top categories with Show in top menu (Dog, Cat, Fish & aquarium, Bird, Small pet, Health & grooming) and give each a photo. Portrait photos (about 4:5) look best in the arches. The menu icon and colour follow the name (dog, cat, fish, bird, rabbit or small pet, health).
2. Finder filter groups. Add four filter groups (Catalog > Filters): Pet (Dog, Cat, Fish, Bird, Small pet), Life stage (for example Puppy & kitten, Adult, Senior), Breed size (Toy, Small, Medium, Large, Giant) and Diet (Grain free, Sensitive stomach, Weight care, High protein, Hypoallergenic). On each product open Links > Filters and add the filters it suits. Add the groups to your categories too, so the standard Filter module can show them.
3. Net weight. An attribute "Net weight" with a value such as 2 kg or 400 g gives the price per kg (or per 100 g) on cards and the product page.
4. Bag sizes. A required radio or select option named "Bag size" with values such as 2 kg, 6 kg, 12 kg and their price changes shows as chips on the product page; choosing one updates the price and the price per kg. Cards list the first three sizes.
5. Badges. An attribute "Badges" with a comma list such as Vet approved, Grain free, Real meat first. Cards show the first badge, the product page all of them.
6. Tabs and notes. Attributes "Feeding guide" and "Ingredients" become their own tabs; "Care note" is a boxed notice under the title; "Delivery time" ("Ships in 1-2 days") becomes delivery dates.
7. Brands. Add manufacturers and assign them to products. They fill the brand line on cards, the brands row and the brands in the mega panels.
8. Second image. The first additional image of a product appears when the pointer is over the card (for example a photo of a pet with the product).
9. Special prices. Give products a special price with an end date to get countdowns on cards and in the deals band.
10. Related products. Add two products without required options as related products to get Complete the bowl.

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

Configuration

Open Extensions > Extensions > Themes > Fetch > 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 (Park, Meadow, Whiskers, Nightwalk). Text logo is shown when the store has no logo image; wrap one word in *stars* to set it in the accent colour (Fetchwell *Pet*).
• Second image on hover, Quick view, Hover zoom and Delivery panel switch card and product page features.

Pets & food finder

• Finder filter groups: the names of your filter groups in finder order, separated by | (default Pet|Life stage|Breed size|Diet). The finder, My pets, the life stage bar on category pages and the made-for chips on product pages read these groups. Empty turns them off.
• My pets: shoppers can save a pet (a name and the finder choices). It is stored in their browser only (local storage) and never sent to your store.
• Food finder menu label: the pill at the end of the menu. It scrolls to the finder on the home page and opens it as a panel on other pages.
• Home: food finder band, its title and text.

How the finder works: the filter list is embedded in the page, so choosing is instant. Show matches opens the category whose name matches the chosen pet (for example Dog) filtered by the chosen life stage. Cards whose filters match every choice say Good for <name>; groups a product has no filters in (a fish food has no breed size) do not count against it.

Header & footer

Three announcement messages (they rotate on phones and tablets), the number of categories in the menu, an optional Brands panel, the Deals link, an optional second link (for example Pet care tips), the search placeholder, the account band, the footer text and help card, and the payment chips (plain text, no logos).

Hero slider

• Seconds per slide (0 = no autoplay) and an optional Rating badge (write only real figures).
• Per slide: title (*stars* mark the highlighted word), label, text, a portrait photo (about 1100 x 1300), two buttons with links, a sticker product id and a background tint (apricot, rose, aqua, butter, lilac, mint). An empty title and photo hide the slide.

Home page

Shop by pet, the promise row, product tabs, two promo banners (photo, label, title, text, button, link), shop by need tiles, three life stage cards (title, text, link, square photo), the deals band, little treats, the starter kit builder (2 to 6 product ids and a photo), brands, pet care tips (three cards with photos) and reviews.

• Product id fields take comma lists of product ids, for example 42, 57. Empty fields use an automatic source: orders then views for best sellers, the newest products, products on special for the deals band, the newest products under the maximum price for little treats.
• Link fields take a category id (20 or 20_27), an information page as i:<id>, or a URL. Tip: link a life stage card to its category with the filter, for example index.php?route=product/category&path=20&filter=12.
• Shop by need tiles are separated by ;. Grain free is a search for the words; Grain free|20_27 or Grain free|i:5 or Grain free|https://... link to a category, page or URL. The icon follows the words (grain, stomach, dental, joint, puppy, senior, grooming, training, vet).
• Reviews need real quotes. Write only real figures.

Product data

• Chip option names (default Bag size, Size, Pack size, Dog weight) and Colour option names.
• Net weight, Badges, Feeding guide, Ingredients, Care note and Delivery time attribute names.
• Range and Colour attributes (optional): sell each colour as its own product with the same Range value to show swatches on cards.
• New tag days, Low stock quantity ("Only 2 left"), the in-stock line, the promise and vet lines of the delivery panel, the wish list note and Complete the bowl.

Listing & images (OpenCart 3 only)

Products per page and the image sizes. On OpenCart 4 these are in System > Settings > Image. Fetch shows products on square wells: 600 x 600 on cards and 900 x 900 on the product page work well.

FAQ

Where do the pets, life stages and sizes come from?

From four filter groups (default names Pet, Life stage, Breed size and Diet) that you assign to products under Links > Filters. Fetch stores nothing of its own and never writes to your database.

Why is the food finder missing?

None of the filter groups named on the Pets & food finder tab exists, or they have no filters. Check the names (they are not case sensitive).

Is the saved pet sent to my store?

No. It is stored in the visitor's browser (local storage) and only used to mark matching cards and to build links. Your server never sees it, so cached pages stay the same for every visitor.

Why does "Show matches" open the Dog category with only one filter?

OpenCart's category filter returns products that have any of the chosen filters (OpenCart 4.1 can be switched to "all" in the store settings, OpenCart 3 always uses "any"). Fetch filters by the life stage only and marks the cards that match every choice with Good for <name>.

Why do my cards show no price per kg?

Add an attribute "Net weight" (for example 2 kg) to the product. For bag sizes, name the option values with the weight (6 kg) so the product page can show the price per kg of each size.

Why does a card show no second image on hover?

It uses the first additional image of the product. Products without one keep the first image. Touch screens never show the hover image.

Can I use my own photos in the hero and the arches?

Yes. Slides take any image path below image/; shop by pet uses the category image. Portrait photos about 4:5 fit the arches best; landscape photos are cropped to the centre.

Why is Quick view missing on some cards?

It is switched off on the General tab, or the browser blocks the request (then the button opens the product page).

Does Fetch work with other extensions?

Yes. It keeps the core product form and mini cart ids, and buttons that other extensions add to the product page appear under Add to cart.

Which images are included?

None. The demo store in the screenshots (Fetchwell Pet Supply, fictional) uses generated packshots of invented brands and licensed stock photos that are not part of the package.