Loupe, the guide.

Welcome

Loupe is an editorial, calm-luxury theme for any kind of store. It started with eyewear and now comes with four ready-made styles: Loupe (eyewear and editorial, the default), Atelier (jewellery), Maison (fashion) and Botanica (beauty).

Demo store: loupe-theme.myshopify.com

Installation

Your ThemeForest download (Loupe-ThemeForest-1.0.0.zip) contains several folders. Only the inner file Loupe-theme-1.0.0.zip is uploaded to Shopify. Don't unzip it, and don't upload the full ThemeForest download – Shopify would report that layout/theme.liquid is missing.

Upload the theme

1. In your Shopify admin, go to Online Store → Themes.
2. In the theme library, click Add theme → Upload zip file.
3. Choose Loupe-theme-1.0.0.zip and click Upload file. Loupe appears in your theme library, unpublished.
4. Click Customize to set it up. Your live store does not change until you publish.
5. When you're happy, click … → Publish on the Loupe theme.

Updating Loupe

Shopify doesn't update uploaded themes automatically. When a new version comes out:

1. Download the new version from ThemeForest and upload the new theme zip as a separate theme.
2. Your content and settings live in the old theme. Re-create them in the new theme, or copy config/settings_data.json and your templates/*.json files with … → Edit code if you're comfortable doing so (duplicate your theme first).
3. Preview, then publish the new version. Keep the old version for a while as a backup.

Choosing a theme style

A theme style (preset) is a ready-made combination of colours, fonts, corner radius, page width, product card style and scroll effects. Switching style never deletes your content or sections.

In the theme editor, open Theme settings (the gear icon). Shopify shows the available styles at the top of Theme settings – pick one, preview, and click Save. You can fine-tune every value afterwards.

All four styles use the same four colour-scheme roles, so sections keep looking right when you switch: scheme 1 = main background, scheme 2 = bright/white alternate, scheme 3 = tinted alternate, scheme 4 = dark (announcement bar, footer, dark bands).

Theme editor basics

• Sections are the building blocks of a page (a hero, a product grid, a FAQ). Click Add section in the left sidebar to add one; drag to reorder; use the eye icon to hide.
• Blocks are the parts inside a section (a slide, a question, a column). Click Add block inside a section.
• Templates: use the page selector at the top of the editor to switch between Home page, Products, Collections, Pages, Blog posts, Cart, Search, 404 and Password.
• Header and footer groups appear on every page. The header group holds the announcement bar and the header; the footer group holds the footer plus "invisible" helper sections (Newsletter pop-up, Cart extras, Mobile dock, Compare tray, Age verification).
• Text in headings supports italics – Loupe uses one italic word as its signature accent (for example "The edit.").
• Every section has a Colour scheme setting. See Colours and schemes.

The full list of sections with their settings is in the Section reference.

Theme settings

Open the gear icon in the theme editor. These settings apply to the whole store.

Colours and schemes

Loupe uses Shopify colour schemes. Each scheme has nine colours:

Edit or add schemes in Theme settings → Colours. Then choose a scheme per section with its Colour scheme setting.

Typography

• Heading font source – Loupe signature (Instrument Serif), bundled with the theme, or Shopify font library to use the Heading font picker. The Atelier, Maison and Botanica styles use the font library.
• Heading size (80–140 %) and Heading case (normal or uppercase).
• Body font (any Shopify font) and Body size (90–120 %).

Layout and animations

• Page width (1100–1800 px), Corner radius (0–24 px) and Button radius (0–40 px; 40 gives pill buttons).
• Reveal sections on scroll – sections fade in as they come into view. Turn off for a completely static store.
• Scroll effects – Off, Subtle (a gentle rise) or Cinematic (photos settle from a soft zoom, headlines rise in, statements light up word by word). Visitors who have "reduce motion" turned on in their device settings never see these animations.

Product cards

• Card image style – Product on tile, photo on hover (packshot with space around it; second image on hover) or Full photo.
• Product grid – Edge to edge (3px gaps) or Spaced. Image ratio – square, portrait, landscape or natural.
• Blend white image backgrounds – white packshot backgrounds melt into the Image background colour.
• Show second image on hover, Show colour swatches, Show vendor, Show quick add.
• Option names shown as swatches – a comma-separated list of option names that should appear as colour swatches (default Color, Colour, Farbe, Couleur). Add your own option name here if you use another language or name (for example Metal or Shade).

Badges

• Show sale badge and Show sold-out badge on product cards.
• "New" badge tag – products with this tag (default new) show a "New" badge.

Cart

• Cart type – Drawer (slides in from the side) or Page.
• Enable order notes.
• Free shipping threshold – in your store currency; shows a progress bar in the cart ("You're €20 away from free shipping"). 0 hides it. This is a display only: set up the free shipping rate itself in Settings → Shipping and delivery.
• Show recommendations in the cart – Recommendation type (complementary, falling back to related; or related), Side panel style (desktop) list or cards, and a Recommendations heading.

Social media and favicon

Add the full links to your Instagram, TikTok, Facebook, Pinterest, YouTube and X profiles. Icons appear wherever a section has "Show social icons" turned on (footer, announcement bar, mobile menu). Upload a square Favicon image (at least 32 × 32 px; 192 × 192 px recommended).

Header, footer and global features

Header and mega menu

• Logo and Logo height, Layout (logo centered or left), Sticky header (always, or on scroll up), Transparent over the home hero (use with a full-width hero as the first section).
• Menu – your main menu (Content → Menus). Nested menu items become dropdowns and mega menus.
• Customer account menu – the header uses Shopify's account component, so customers can sign in and see their orders from the header on desktop and mobile when customer accounts are turned on.
• Search – a full-screen search overlay with Popular searches (comma-separated) and products from a collection shown before typing; results appear as you type (predictive search).
• Mega menu block – type the exact title of a top-level menu item in Menu item title. Choose Link columns (with up to three image promotions, each with tag, heading, subtext, ratio and link) or Tabs with products (each sub-item becomes a tab; collection links show their products).
• Mobile menu – photo tiles for collection links, mega menu promotions, a featured image, social links and country/language selectors.

The Announcement bar (also in the header group) shows up to 8 messages as a slider or a scrolling marquee, can hide on the home page, and can show social icons and country/language selectors on desktop.

Footer

Blocks: Brand and newsletter (heading, text, signup form), Menu (any menu), Text, and app blocks. Settings: show social icons, country/language selector, payment icons, and a large wordmark (store name or your own text).

Mobile dock

A bottom bar on phones with Home, Shop, Search, Account and Cart. It lives in the footer group – click it in the sidebar to edit, or hide it with the eye icon. Settings: show Home, Shop item (open a link or the menu drawer), show Search, show Account (only when customer accounts are on), show labels, and hide while scrolling down. On product pages the dock steps aside for the sticky add-to-cart bar.

Product comparison

1. Open a collection in the editor and turn on Collection → Enable compare. Product cards get a "Compare" toggle (up to 4 products).
2. Make sure the Compare tray section is in the footer group. It floats at the bottom while products are picked.
3. Create a page called "Compare" (Online Store → Pages) and give it the template page.compare. If you use another page, select it in the Compare tray's Comparison page setting.
4. In the Product comparison section, choose which rows to show (variant options, vendor, product type, availability) and add Metafield row blocks for your own data, for example specs.material. Shoppers can switch to "Differences only".

The compared products are remembered in the shopper's browser – no app or account needed.

Pop-ups and age check

• Newsletter pop-up (footer group) – opens after a delay, on exit intent or after scrolling; shown again after a number of days; never on the cart page. Optional discount code with a copy button after signup. Signups go to Customers with email marketing consent.
• Age verification (footer group) – Yes/No buttons or date of birth, minimum age, remember for 0–90 days, message or redirect for visitors who are too young.

Both are only shown in the editor while the section is selected, so they don't get in your way while you edit.

Cart extras

The Cart extras section (footer group) controls extras in the cart drawer and cart page:

• Gift wrapping – choose a gift-wrap product; a checkbox adds it to the cart.
• Order note.
• Discount codes – a field to apply discount codes in the cart.
• Delivery estimate – earliest and latest business days, with your own text ([from] and [to] become dates; weekends are skipped).

The cart page also has a Show express checkout buttons setting (Shop Pay, Apple Pay and others, depending on your payment settings).

Product page

Open Products → Default product in the editor. The page is made of the Product information section (gallery and buy area) followed by optional detail sections (story, feature rows, colours, specification sheet, recommendations, recently viewed).

Gallery layouts

The gallery shows images, Shopify-hosted videos, YouTube/Vimeo videos and 3D models. A zoom button opens a full-screen lightbox.

Colours and variant images

Loupe groups your product photos by colour using variant images – no app or metafield needed.

1. In the product admin, upload all photos in colour order: the first photo of colour A, then the rest of colour A's photos, then the first photo of colour B, and so on.
2. Assign each variant its first photo (click the variant → image).
3. In the editor, turn on Product information → Only show the selected colour's media. The photos after a variant's image (until the next variant's image) belong to that colour, so the gallery only shows the selected colour.

Colour swatches: in the Variant picker block, Colour option style can show Product photo thumbnails (each colour's variant image) or Colour dots. Dots use Shopify's swatch colour or image (set on the option value in the product admin, for example from category metafields), then common colour words in the value name (black, havana, gold, crystal …), then the variant image. Which options count as colours is set in Theme settings → Product cards → Option names shown as swatches.

Product information blocks

Detail sections

• Product story – a large photo with heading and text. Empty fields fall back to the product's first model photo, title and description; connect them to metafields for a story per product.
• Product feature rows – numbered rows of image + text. Each row's Product image number picks the selected colour's photo at that position (0 = automatic, in order), so the rows always match the chosen colour without uploading extra images.
• Worn by (model photos) – a row of the product's model photos.
• Colour strip – all colours of the product with their photos ("[count] ways to wear it").
• Specification sheet – up to 8 label/value rows next to the product photo or an eyewear measurement diagram; connect values to metafields.
• Product recommendations (related or complementary) and Recently viewed.

Metafields and dynamic sources

Many settings have a small "connect dynamic source" icon. Connect it to a product metafield and every product shows its own value; rows with no value are hidden. Create metafield definitions in Settings → Custom data → Products.

The demo store uses these product metafields in the namespace specs (you can use any names you like):

Other places that accept metafields: the custom badge, the Specifications / measurements block, the Product comparison metafield rows (type namespace.key), and most text and image settings in sections on the product template.

Collections, filters and search

Collection page

• Collection banner – minimal, split or overlay, with fallback image, product count and breadcrumbs.
• Collection section – products per page, columns (desktop and mobile), a column switcher for shoppers, pagination as numbers, "Load more" or infinite scroll, filters as sidebar or drawer, sorting, quick view and compare.
• Promo tile blocks – image tiles placed after a product position you choose, 1 or 2 columns wide (first page only).

Filters (Search & Discovery)

1. Install Shopify's free Search & Discovery app.
2. Open Search & Discovery → Filters and add filters: availability, price, product type, vendor, tags, variant options (Colour, Size) and metafields (for example shape, material).
3. Filters appear automatically on collection and search pages. Colour filters show as swatches (from Shopify swatches or colour names); price shows as a range.

Search & Discovery is also where you set complementary products (used by "Pairs well with" and cart recommendations) and search synonyms.

Search

Predictive search shows search suggestions, products, collections, pages and articles while typing. The search results page lists products, articles and pages, with filters and sorting.

Page templates

Assign a template to a page in Online Store → Pages → (page) → Theme template. Loupe includes:

Also included: home page, product, collection, collections list, blog, article, cart, search, 404, password and gift card templates. Customer accounts use Shopify's customer account pages.

Languages and translations

Loupe includes complete translations for English, German, French, Spanish, Italian and Dutch – both the storefront text (buttons, cart, product page) and the theme editor labels.

• To sell in more languages, add them in Settings → Languages. Loupe's built-in text appears in the shopper's language automatically.
• Text you type into sections (headings, slides) is your content. Translate it with Shopify's free Translate & Adapt app.
• To change built-in wording (for example "Add to cart"), go to Online Store → Themes → … → Edit default theme content.
• Country/currency and language selectors appear in the header, footer, announcement bar and mobile menu when your store sells in more than one country or language (Settings → Markets).

Apps

Loupe works fully without any app. All features in this guide are built in. If you do add apps:

• App blocks – apps that offer blocks (reviews, try-on, lens selectors, size advisors …) can be added in the Product information section and in the Footer with Add block → Apps.
• App embeds – floating widgets, chat and tracking apps are switched on in Theme settings → App embeds.
• The free Shopify apps Search & Discovery (filters, complementary products) and Translate & Adapt (translating your content) work well with Loupe.
• When you uninstall an app, remove its blocks too; apps that edited theme code may leave code behind – ask the app developer to clean up.

Recommended image sizes

Every image setting in the theme editor shows its recommended size under the picker. This table collects them in one place. Shopify resizes and compresses images for each screen automatically, so upload one good file at the size below – JPG or WebP for photos, SVG or PNG for logos and icons.

Full-width banners – 3200 × 1800 px (16:9) or larger. Keep the subject centred – phones crop the sides.

Wide banners – 2880 × 1000 px or larger, subject centred.

Phone versions – 1200 × 1600 px (3:4), shown on phones only.

Half-width images – 1600 × 2000 px (4:5).

Cards and tiles – 1200 × 1500 px (4:5).

Square images – 1200 × 1200 px (1:1).

Before / after – 2400 × 1600 px (3:2). Use the same size for both images.

Logos – SVG, or PNG with a transparent background at twice the display size (e.g. 500 × 160 px).

Icons – Square SVG or PNG, 96 × 96 px or larger, transparent background.

Diagrams – SVG, or PNG 1600 × 700 px with a transparent background.

Performance tips

Loupe is built to be fast: no frameworks, small scripts that load only with the sections that need them, lazy-loaded responsive images and a bundled heading font. To keep your store fast:

• Upload big enough, not huge: about 2400 px on the long side is plenty. Shopify serves the right size for each screen automatically.
• Use one hero image or video at the top – the first section loads with priority, everything below loads as visitors scroll.
• For video sections, add a Cover image. YouTube/Vimeo videos only load when played; Google maps only load after a click.
• Keep the home page focused: 8–12 sections usually look better and load faster than 25.
• Every app adds code. Remove apps you don't use, and switch off unused app embeds.
• Using a Shopify library font for both headings and body adds a font download; the signature Instrument Serif is small and preloaded.
• If you want the lightest possible pages, set Scroll effects to Subtle or Off.

FAQ

Support and changelog

Getting help

Ask through the Support tab on Loupe's ThemeForest item page. Include your store URL, the theme version, what you expected and what happened, and screenshots if you can. We aim to reply within two business days.

Included: help with installation and theme settings, and fixes for bugs in the theme. Not included: custom code changes, problems caused by third-party apps or edited code, and design or content work.

Changelog

1.0.0 – 14 October 2026

• First public release: four theme styles (Loupe, Atelier, Maison, Botanica), 56 sections you can add to any page, product page with five gallery layouts, variant-image colour grouping, specification sheet, feature rows, buy it together, back in stock, volume pricing and custom fields; collection filters, compare, quick view, mobile dock, cart extras, newsletter pop-up, age verification; six languages.