HB Studio Co

Harmony Sound

A Shopify theme for audio and electronics brands — built for conversion, with no paid apps. This guide walks through every screen, setting and section. No coding required.

Un thème Shopify pour les marques audio et électronique — pensé pour la conversion, sans application payante. Ce guide parcourt chaque écran, chaque réglage et chaque section. Aucun code requis.

Online Store 2.0 35 theme sections35 sections maison 3 preset styles3 styles prédéfinis 31 storefront locales31 langues de vitrine No paid appsSans app payante

Getting startedDémarrer

1. Install the theme1. Installer le thème

  1. In your Shopify admin, open Online Store → Themes.
  2. Under Theme library, click Add theme → Upload ZIP file and pick harmony-sound-v1.0.2.zip. Do not unzip it first.
  3. Click Customize to edit it, or … → Publish to put it live.
  1. Dans l’administration Shopify, ouvrez Boutique en ligne → Thèmes.
  2. Dans Bibliothèque de thèmes, cliquez Ajouter un thème → Importer un fichier ZIP et choisissez harmony-sound-v1.0.2.zip. Ne le décompressez pas.
  3. Cliquez Personnaliser pour l’adapter, ou … → Publier pour le mettre en ligne.
Note — Demo products and photography are not included. The images shipped with the theme are neutral placeholders that hold the layout until you place your own.
Note — Les produits et les photographies de démonstration ne sont pas inclus. Les images fournies sont des repères neutres, destinés à tenir la mise en page tant que vous n’avez pas placé les vôtres.

Getting startedDémarrer

2. Theme style2. Style du thème

Two settings command the whole look, in Customize → Theme settings → Theme style.

Deux réglages commandent l’allure générale, dans Personnaliser → Réglages du thème → Theme style.

  • Accent colour (ct_accent) — carries buttons, active links and highlights. The contrast of text placed on it is recalculated for you: a light colour gets dark text, and the other way round. You never have to think about it.
  • Corner style (ct_corners) — the rounding applied to cards, buttons and media.
  • Couleur d’accent (ct_accent) — porte les boutons, les liens actifs et les éléments mis en avant. Le contraste du texte posé dessus est recalculé automatiquement : une couleur claire reçoit du texte sombre, et inversement. Vous n’avez pas à vous en occuper.
  • Style des coins (ct_corners) — arrondi appliqué aux cartes, boutons et médias.
Three starting points are supplied: Harmony (amber), Midnight (indigo) and Pulse (coral). They are only a departure point — change the accent and everything follows.
Trois combinaisons de départ sont fournies : Harmony (ambre), Midnight (indigo) et Pulse (corail). Elles ne sont qu’un point de départ : changez l’accent et tout suit.

Getting startedDémarrer

3. Brand identity3. Identité de marque

Theme settings → Logo holds your brand name (brand_name, used when no logo is uploaded), the logo itself and its width, and the favicon. Theme settings → Brand information feeds the brand block in the footer.

Réglages du thème → Logo porte le nom de votre marque (brand_name, utilisé quand aucun logo n’est chargé), le logo et sa largeur, et le favicon. Réglages du thème → Brand information alimente le bloc de marque du pied de page.

Nothing is hardcoded. The theme never prints another brand’s name: everything shown in the demo comes from a setting you can change.
Rien n’est gravé en dur. Le thème n’affiche jamais le nom d’une autre marque : tout ce que montre la démo vient d’un réglage que vous pouvez changer.

PagesPages

4. Home page4. Page d’accueil

The home page is a stack of sections you reorder freely. Nothing below is mandatory — remove what you do not need, duplicate what you do.

L’accueil est une pile de sections que vous réorganisez librement. Rien de ce qui suit n’est obligatoire : retirez ce dont vous n’avez pas besoin, dupliquez le reste.

Hero slideshow: one Slide block per visual
Hero slideshow: one Slide block per visualDiaporama : un bloc Slide par visuel
  • Hero — auto-rotation (Auto-rotate, Change every), optional social rail and corner badge.
  • Category tiles — your collections as tiles, one Category block each.
  • Best sellers — collections in tabs; the customer switches rayon without a page reload.
  • Bundle — a bundle builder whose total updates as products are picked.
  • Compare slider — a draggable before / after over two images.
  • Shop the feed — an Instagram-style row, each post linking to a product.
  • Testimonials, Stats, Marquee, Countdown banner — supporting sections, each driven by blocks.
  • Hero — rotation automatique (Auto-rotate, Change every), rail social et badge d’angle facultatifs.
  • Category tiles — vos collections en vignettes, un bloc Category par rayon.
  • Best sellers — collections en onglets ; le client change de rayon sans recharger la page.
  • Bundle — composeur de lot dont le total se met à jour à mesure des choix.
  • Compare slider — glière avant / après sur deux images.
  • Shop the feed — rangée façon Instagram, chaque publication renvoyant à un produit.
  • Testimonials, Stats, Marquee, Countdown banner — sections d’appui, chacune pilotée par des blocs.
Category tiles
Category tilesVignettes de rayons
Best sellers, in tabs
Best sellers, in tabsMeilleures ventes, en onglets
Bundle builder
Bundle builderComposeur de lot
Before / after slider
Before / after sliderGlissière avant / après
Shop the feed
Shop the feedFeed achetable
Testimonials
TestimonialsTémoignages
Countdown banner — with no end date set, the timer simply does not appear. The theme never invents urgency.
Countdown banner — sans date de fin, le compteur ne s’affiche pas. Le thème n’invente jamais d’urgence.

PagesPages

5. Product pages5. Fiches produit

Gallery, colour selector and upsells
Gallery, colour selector and upsellsGalerie, sélecteur de coloris et ventes additionnelles

The product page is built from sections too, so you decide what appears and in which order.

La fiche produit est elle aussi faite de sections : vous décidez ce qui apparaît, et dans quel ordre.

  • Product section nav — an anchor bar that follows the page as it scrolls. One Link block per anchor.
  • Product specs — technical specifications and what is in the box, fed by metafields (see §7).
  • Product story — a full-width narrative; one Feature row per point, plus an Animated title that reveals on scroll.
  • Compare — up to four products side by side. Rows are declared in Spec row labels, one per line.
  • Sticky add to cart — a buy bar that returns once the main button scrolls out of view.
  • Product section nav — barre d’ancres qui suit le défilement. Un bloc Link par ancre.
  • Product specs — caractéristiques techniques et contenu de la boîte, alimentés par les métachamps (voir §7).
  • Product story — récit pleine largeur ; un Feature row par argument, plus un Animated title qui se révèle au défilement.
  • Compare — jusqu’à quatre produits côte à côte. Les lignes se déclarent dans Spec row labels, une par ligne.
  • Sticky add to cart — barre d’achat qui réapparaît quand le bouton principal sort de l’écran.
Tech specs and what is in the box
Tech specs and what is in the boxCaractéristiques et contenu de la boîte
Product story
Product storyRécit produit
Comparison table
Comparison tableTableau comparatif

PagesPages

6. Collections & filters6. Collections & filtres

Collection page with its control bar
Collection page with its control barPage collection et sa barre de contrôle

The Collection tabs section is the control bar: a filter button, sub-category tabs and an “on model” toggle. Tags to hide keeps internal tags out of the customer’s sight.

La section Collection tabs est la barre de contrôle : bouton de filtres, onglets de sous-catégories, bascule « sur mannequin ». Tags to hide masque les étiquettes techniques que vous ne voulez pas montrer.

Filters come from Shopify’s own free Search & Discovery app. No paid app is required, and nothing breaks if you do not install it — the filter button simply does not appear.
Les filtres proviennent de l’application gratuite Search & Discovery de Shopify. Aucune application payante n’est requise, et rien ne casse si vous ne l’installez pas : le bouton de filtres ne s’affiche simplement pas.

ContentContenu

7. Per-product content (metafields)7. Contenu propre à chaque produit (métachamps)

This is what separates Harmony Sound from a generic theme. Technical specifications, what is in the box and colour siblings are not written into a section: they live on the product, so every reference carries its own.

C’est ce qui distingue Harmony Sound d’un thème générique. Les caractéristiques techniques, le contenu de la boîte et les déclinaisons de coloris ne sont pas écrits dans une section : ils vivent sur le produit, donc chaque référence a les siens.

Create them in Settings → Custom data → Products. The complete list, with the exact type of each field, is in DOCUMENTATION.en.md §4 — shipped in the same package as this guide.

Créez-les dans Paramètres → Métachamps → Produits. La liste complète, avec le type exact de chaque champ, figure dans DOCUMENTATION.fr.md §4 — livré dans le même paquet que ce guide.

Keep the quick-glance fields short. driver, battery, connectivity and noise_cancelling feed cards and chips, not paragraphs: “40 mm”, not “40 mm beryllium-coated dynamic”. The full detail belongs in specifications, which is rendered as a table.
Gardez courts les champs « coup d’œil ». driver, battery, connectivity et noise_cancelling alimentent des cartes et des puces, pas des paragraphes : « 40 mm » et non « 40 mm beryllium-coated dynamic ». Le détail complet va dans specifications, rendu en tableau.

ContentContenu

8. Bundle, compare & content pages8. Lot, comparateur & pages de contenu

The Build your bundle page
The Build your bundle pageLa page Composez votre lot

Four page templates ship ready to use: page.bundle, page.compare, page.faqs and page.contact (plus a variant with a map). Create the page in Online Store → Pages, then pick the matching template on the right.

Quatre gabarits de page sont fournis prêts à l’emploi : page.bundle, page.compare, page.faqs et page.contact (plus une variante avec carte). Créez la page dans Boutique en ligne → Pages, puis choisissez le gabarit correspondant à droite.

The journal
The journalLe journal

The blog uses Featured blog on the home page and the Article section for each post, with suggestions at the end of the read.

Le blog utilise Featured blog sur l’accueil et la section Article pour chaque billet, avec des suggestions en fin de lecture.

ConversionConversion

10. On mobile10. Sur mobile

The mobile dock
The mobile dockLe dock mobile

The Mobile dock section pins home, search, account, cart and menu to the bottom of small screens, where thumbs actually are. Every label is editable, and the whole section can be removed.

La section Mobile dock fixe accueil, recherche, compte, panier et menu en bas des petits écrans, là où se trouvent les pouces. Chaque libellé est modifiable, et la section entière peut être retirée.

ConversionConversion

11. Languages & currency11. Langues & devise

The theme ships with 31 storefront locales. Enable the ones you sell in under Settings → Languages; the language and country selectors live in the Top bar section and can each be switched off.

Le thème est livré avec 31 langues de vitrine. Activez celles dans lesquelles vous vendez sous Paramètres → Langues ; les sélecteurs de langue et de pays vivent dans la section Top bar et se désactivent séparément.

RéférenceRéférence

12. Every section, listed12. Toutes les sections, listées

Harmony Sound ships 35 theme-specific sections on top of the Shopify base ones. The complete catalogue — name as shown in the editor, blocks, notable settings — is chapter 7 of DOCUMENTATION.en.md, in the same package as this guide.

Harmony Sound fournit 35 sections propres au thème, en plus de celles de la base Shopify. Le catalogue complet — nom affiché dans l’éditeur, blocs, réglages notables — constitue le chapitre 7 de DOCUMENTATION.fr.md, livré dans le même paquet que ce guide.

Two settings repeat everywhere and are worth knowing once: Color scheme (the palette, defined in Theme settings → Colors) and Top / Bottom (the section’s padding).
Deux réglages reviennent partout et méritent d’être connus une bonne fois : Color scheme (le jeu de couleurs, défini dans Réglages du thème → Couleurs) et Top / Bottom (les marges de la section).

HelpAide

13. Troubleshooting13. Dépannage

  • A section shows “Example product title”. It is pointing at a product that does not exist in your store. Open the section and pick one of yours.
  • Specs or “in the box” are empty. The metafields of §7 are not created, or not filled on that product.
  • The filter button is missing. Install Shopify’s free Search & Discovery app and define at least one filter.
  • A video does not play. Check the poster image is set: on a connection too slow, or for a visitor who asked for reduced motion, the poster is what shows.
  • Une section affiche « Example product title ». Elle pointe sur un produit qui n’existe pas dans votre boutique. Ouvrez la section et choisissez l’un des vôtres.
  • Les caractéristiques ou le contenu de la boîte sont vides. Les métachamps du §7 ne sont pas créés, ou pas renseignés sur ce produit.
  • Le bouton de filtres n’apparaît pas. Installez l’application gratuite Search & Discovery de Shopify et définissez au moins un filtre.
  • Une vidéo ne se lance pas. Vérifiez que l’image d’affiche est renseignée : sur une connexion trop lente, ou pour un visiteur ayant demandé à réduire les animations, c’est elle qui s’affiche.

HelpAide

14. Support14. Assistance

Something not covered here? Use the support page — fill in the form and we will get back to you within one to two business days. You can also write to hello@hbstudio-co.com.

Quelque chose qui n’est pas couvert ici ? Passez par la page d’assistance — remplissez le formulaire et nous revenons vers vous sous un à deux jours ouvrés. Vous pouvez aussi écrire à hello@hbstudio-co.com.

Your licence key, and the stores it is activated on, live at hbstudio-co.com/license.

Votre clé de licence, et les boutiques sur lesquelles elle est activée, se gèrent sur hbstudio-co.com/license.