Serpodile : intégration du thème starter Imagile sur un Shopify
Serpodile est une entreprise spécialisée dans la création et la vente de cahiers pour les enfants atteints de trouble cognitif tels que la dyspraxie, dyslexie, dysgraphie, dyscalculie ou TDAH.
Début 2024, l’entreprise Oxford rachète la marque et décide de faire appel à Imagile pour une refonte graphique et fonctionnelle du site e-commerce de Serpodile afin d’officialiser cette acquisition.
Les objectifs de cette refonte étaient :
- La mise en place d’un design épuré reprenant à la fois des éléments de la charte graphique de Serpodile et de celle d’Oxford.
- Rendre la navigation sur le site plus simple et logique, notamment sur la classification des produits.
- Mettre à jour le CMS Shopify sur la version 2 et intégrer le thème Shopify Starter Imagile afin de permettre le maximum d’autonomie en matière de rédaction de contenu grâce à un système de composants modulables.
- Établir une interconnexion entre la base de données produits d’Oxford PIM (Gestion Données Produits) et la boutique Shopify.
- Améliorer le référencement naturel du site.
Suite à la publication du thème 2.0 de Shopify, de nouvelles fonctionnalités intéressantes ont vu le jour, notamment sur la création de pages et l’utilisation de sections. Nous avons alors entrepris la création d’un thème sur mesure.
Comme notre Starter sur Worpress, le thème starter Imagile met à disposition une variété de composants pour faciliter la mise en page par le client lui-même sans besoin d’intervention de notre part.
Nous avons ainsi pu mettre en place ce nouveau thème pour la refonte du site Serpodile.
Suite à un audit du site, nous avons remarqué plusieurs problèmes :
- L’absence de véritable design : hormis les couleurs de la charte graphique et le logo, peu d’éléments de design sont présents sur le site. Nous nous baserons finalement sur des plaquettes marketing réalisées récemment par Oxford et Serpodile.
- L’absence de la page d’archive des produits (page des collections dans la terminologie de Shopify) et donc de filtres pour trier les produits.
- L’absence de versionning, les modifications de code étant auparavant faites directement dans l’éditeur de thème intégré au back-office.
Nous avions pris la décision de réaliser une maquette pour la page d’accueil. Cette page est à la fois représentative du reste du site et essentielle pour le client, car elle est généralement la première que consulte un visiteur lorsqu’il accède au site. De plus, beaucoup d’éléments de design étaient déjà utilisés et ont pu être repris sur le reste des pages : menu, titre, bouton, carte d’actualité, avis, … .
Comme demandé par le client, nous avons repris des éléments graphiques de Serpodile (couleurs, éléments géométriques arrondis) ainsi que d’autres éléments présents sur un des sites e-commerce d’Oxford : Oxford Révision.
Enfin, il était important que le design soit en accord avec le public ciblé, les parents de jeunes enfants en difficulté scolaire, il nous paraissait approprié d’utiliser des visuels larges et colorés, rassurants et ludiques.
Cette phase de design a suscité plusieurs échanges et modifications avant d’arriver à la version finale actuellement en ligne.
La phase de maquettage est certainement la plus importante pour un intégrateur, car elle va donner un cadre pour la suite des développements. C’est pourquoi nous réalisons toujours au moins une maquette pour chaque projet.
Une fois le design validé, nous sommes passés à la mise en place de l’environnement de développement et de l’intégration.
Pour ce projet, nous sommes partis d’une nouvelle instance de boutique Shopify.
Nous avons mis en place la version 2 du CMS et sommes repartis sur une base saine, sans saisie des produits puisqu’ils seront non plus intégrés directement dans le back-office, mais envoyés depuis la base de données du client.
Le passage à Shopify 2.0 a permis d’apporter des avantages majeurs :
- Une flexibilité accrue sur la modification des pages grâce à une mise à disposition de sections, laissant davantage la main au client pour la conception de ses pages.
- Un système plus léger et rapide.
- L’utilisation des métadonnées pour personnaliser les fiches produits notamment
- L’intégration de GitHub pour versionner chaque modification sur le thème et simplifier les déploiements
Une fois l’environnement créé, nous avons intégré le thème starter Imagile. Ce thème regroupe des composants qui peuvent être utilisés pour concevoir des pages et des articles.
Il est également possible de faire appel aux composants à l’intérieur de pages plus spécifiques comme une collection de produits, une page produit, la page panier, etc.
L’environnement maintenant en place, nous passons à l’intégration des pages en commençant par l’accueil.
L’intégration des filtres et des pages produits ont demandé plusieurs échanges entre le client, le responsable de la base de données Oxford et notre équipe pour définir les champs qui devront être affichés et la façon de les récupérer de notre côté.
Nous avons également ajouté les plugins utilisés par Serpodile pour gérer les avis clients. Shopify facilite d’ailleurs grandement la façon d’intégrer les plugins dans une template. Il est maintenant possible de les placer où l’on souhaite dans une page.
L’entreprise Oxford utilise une base de données PIM (Product Information Management). Cette solution permet entre autres de gérer une base produits présente sur plusieurs sites de vente différents.
Pour afficher des données provenant d’une base de données, Shopify met à disposition des Métadonnées. Nous listons les champs provenant de la base grâce à leurs identifiants et nous définissons un nom pour les appeler ensuite dans les pages concernées.
Dans le cadre de ce projet, nous avons défini ensemble les champs qui seraient exploités, en coordinations avec le client et le responsable de la base de données chez le client. La difficulté résidait dans le fait de trouver des champs disponibles non utilisés dans les autres sites d’Oxford pour renseigner et afficher des informations spécifiques aux produits de Serpodile.
Enfin, nous avons alloué une partie du temps pour former la cliente sur l’utilisation et la prise en main des composants du starter Shopify d’Imagile.
Depuis la refonte du site Serpodile, le client bénéficie d’un nouveau design et d’une gestion simplifiée du site. La mise à jour des produits n’est plus une charge puisqu’ils sont gérés de manière globale depuis la base produit d’Oxford. Il est également plus simple pour le client de créer et gérer le contenu des pages en utilisant les composants du nouveau thème Shopify Imagile. Enfin, le versionning du thème a permis de sécuriser davantage le projet en cas de problème.
Notre approche vous séduit ?
Contactez-nous, ou venez nous rencontrer pour discuter de vos projets.