Créer un thème Shopify sans coder avec Udesly

Shopify est sans aucun doute l’un des CMS les plus puissants de ce jour. Toutes les fonctionnalités e-commerce que tu désires, s’y trouvent. Le souci ? Toutes les boutiques se ressemblent. Et toi, tu ne veux pas que ta marque ressemble à celle des autres. Mais si je te disais que tu pouvais créer ton propre thème Shopify, sans avoir besoin d’apprendre à coder ?

Eh bien c’est possible, depuis peu de temps au moment où nous rédigeons cet article.

Cette possibilité on la doit à un outil qui a secoué le monde de la création de thème qui jusque-là n’était réservée qu’aux développeurs expérimentés. Cet outil c’est Udesly et nous allons justement t’en parler dans quelques instants

Qu’allons-nous voir dans cet article ?

Pourquoi Udesly a vu le jour ?
Un tuto pour créer ton premier thème Shopify avec succès !

Convaincu ? On y va !

Pourquoi Udesly a vu le jour ?

Ce qu’il faut savoir dans un premier temps c’est qu’Udesly ne fonctionne pas seul. Il dépend de Webflow. Si tu ne connais pas cet outil, on a fait un article complet dessus que tu peux retrouver dans le blog du site.

Webflow est un concepteur de site “low code”, c’est-à-dire qu’il te permet de créer des sites sans toucher une ligne de code. Jusqu’ici tu dois te dire que ce n’est pas le seul du marché à proposer cela. En quoi est-il différent de Shopify ou de Wordpress par exemple ?

Tout simplement parce que le contrôle sur le design est maximal. Il ne suffit pas de glisser quelque bloc préconstruit pour créer ton site. C’est à toi d’assembler le moindre élément.

Tu peux regarder la vidéo ci-dessous si tu veux avoir une idée de sa puissance.

Tu commences à voir où nous voulons en venir n’est-ce pas ?

Shopify a d’excellente fonctionnalité e-commerce et Webflow une liberté de conception inégalé.

C’est là qu’Udesly a eu l’excellente idée de créer un outil qui permettrait d’avoir le meilleur des deux mondes.

Il te permettent de convertir ton site Webflow en un thème Shopify en seulement quelques clics, mais aussi de créer des thèmes Wordpress sans coder, Ghost ou Jamstack.

Mais dans cet article, nous allons nous concentrer sur Shopify.

Tuto : comment créer un thème Shopify sans coder avec Udesly et Webflow ?

Étape 1 - Créer son site dans Webflow

Avant de convertir son site, il te faut déjà le créer. Pour ça rend toi sur webflow.com et crée ton compte.

Ensuite il te faut développer ton site avec l’outil. Nous n’aborderons pas le sujet ici mais il existe des formations Webflow de qualité pour t’apprendre à maîtriser l’outil.

Voici un exemple de site que nous avons construit avec Webflow. Une boutique mono produit où l’on vend un masseur de tête de pour chat.

Maintenant, passons à l’étape suivante qui consiste à ajouter les attributs grâce à Udesly.

Étape 2 - Ajouter les attributs à son site grâce au plugin d’Udesly

Avant toute chose, n’oublie pas de t’inscrire à l’outil pour avoir accès au convertisseur par la suite.

Bien, maintenant nous allons paramétrer les attributs. Il y a 2 manières de procéder avec Udesly. La première consiste à utiliser l’ancienne version de l’application et de les ajouter manuellement et la seconde de laisser l’extension faire tout le travail à ta place.

Chacune de ses deux méthodes à ses avantages et ses inconvénients.

Avec la méthode manuelle, tu auras la possibilité de maîtriser chaque recoin de ton site et de faire des thèmes plus personnalisés. Par exemple si tu souhaites faire en sorte d’ajouter différents attributs à un même élément, tu peux le faire.

En revanche avec cette méthode il te faudra apprendre la documentation pour bien comprendre la fonction de chaque attribut. Cela demande un peu de patience et de temps.

Sinon tu peux utiliser l’extension chrome. Elle place les attributs à ta place en quelques secondes. Le seul inconvénient est que tu as moins de contrôle sur ton thème.

Par exemple, si tu souhaitais pouvoir modifier ton thème ou créer des blocs avec l’éditeur de Shopify, l’extension ne te le permet pas car elle n’ajoute que les attributs dits “essentiels”.

Dans ce tuto, nous allons nous concentrer uniquement sur l’extension mais si tu souhaites apprendre à utiliser l’ancienne version d’Udesly, nous avons créé une formation complète sur la création de thème Shopify.

Une fois que tu auras installé l’extension, retourne sur ton projet Webflow et clique sur l’extension. Cela te proposera les différentes conversions possibles. Choisis “Webflow to Shopify”.

Une fois que tu as cliqué sur ce bouton, un fichier “.config” va se télécharger. Garde-le de côté il nous sera utile pour la suite.

Passons à la prochaine étape

Étape 3 - Exporter le code de son site

La seconde étape consiste à exporter le code de ton site. Pour cela rends-toi sur l’onglet avec l’icône “< >” et télécharge le fichier .zip.

Garde bien ce fichier à proximité du fichier .config que tu as téléchargé précédemment.

Étape 4 - Utilise le convertisseur d’Udesly

Il est temps maintenant d’assembler nos fichiers en utilisant le convertisseur.

Pour cela rends-toi sur Udesly et va sur l’adapter. Une fois que tu y es, choisis “Webflow to Shopify”.

Tu te souviens de tes 2 fichiers ? C’est maintenant qu’ils vont nous être utiles. Téléverse dans un premier temps le fichier “.zip” qui correspond au code de ton site.

Une fois fait, tu devrais avoir un écran que celui ci-dessous.

Maintenant ajoute ton fichier “.config” qui contient tous les attributs dont Udesly a besoin dans le champs “Theme Configuration”.

Tu n’as plus qu’à cliquer sur le bouton “Convert” et laisser la magie opérer !

On passe donc à la dernière étape.

Étape 5 - Ajoute ton thème dans ton compte Shopify

Rends-toi dans ton compte Shopify puis sélectionne l’onglet “boutique” dans la barre latérale de gauche. Ensuite, clique sur “Thèmes” puis rends toi dans “Ajouter un thème” → “Mettre en ligne un fichier compressé”.

Il ne te reste plus qu’à la publier et ton thème est en ligne !

Comme tu peux le constater sur la capture ci-dessus, l’éditeur de Shopify n’apparaît pas car nous avons utilisé l’extension Chrome d’Udesly. Si tu souhaites pouvoir créer un thème 100% personnalisable dans Shopify, une formation complète est disponible.

Prêt à créer ton prochain thème Shopify sans coder ?

Te voilà fin prêt pour te lancer dans la conception de thèmes Shopify, que ce soit pour toi ou tes clients. Faisons un petit récapitulatif ce dont tu as besoin :

• Un compte sur Webflow pour concevoir et personnaliser ton site
• Un compte sur Udesly pour convertir ton site
• Un compte Shopify pour héberger ton thème

C’est à toi de jouer ! Tchuss