Créer un e-commerce sur Framer avec Shopify

Framer pour le design, Shopify pour le commerce

Le montage tient en une phrase : Shopify reste le backend et gère produits, paiements et expéditions, Framer sert de front end et dessine la boutique, un connecteur faisant le pont entre les deux. De quoi livrer un e-commerce sur mesure sans partir d’un thème que tout le monde a déjà.

Le cours reproduit une fiche produit de boutique haut de gamme : navigation à micro-interactions, galerie sticky, bloc de détails et produits complémentaires.

Poser la page produit dans Framer

Rien ne se dessine avant d’avoir une collection CMS. Tu crées une collection product et tu déclares les champs un par un : texte enrichi pour la description et les détails du produit, champs image, champ nombre pour le prix, texte simple pour le reste. Un import CSV la remplit d’un coup.

La page se crée depuis Pages, en ajoutant une CMS page de type detail page. Premiers réflexes : supprimer le stack posé par défaut, passer la largeur de travail à 1440, retirer le gap et le padding hérités, poser le fond.

La grille du header

• Une frame header avec 32 pixels de padding, pour que le contenu ne touche jamais les bords.
• Dedans, une frame en layout grid : trois colonnes, une seule rangée, et la galerie posée en span 2. C’est l’astuce qui donne deux tiers de la largeur aux images sans casser la grille.
• Un gap de 60 entre les deux colonnes.

Les pièges du sticky et des hauteurs

La galerie et la colonne de contenu restent visibles au scroll grâce à la position sticky, et deux points bloquent tout le monde.

Même logique ailleurs : un parent resté en hauteur fixe fait déborder ce qu’il contient, le fit content règle le problème à chaque étage. Les textes se mettent en largeur fill, jamais en fit, pour rester adaptables sur tablette et sur mobile.

Les composants d’achat de Frameship

• La galerie : image principale en fill plafonnée à 95 % de la hauteur de la fenêtre, vignettes en taille fixe avec ratio verrouillé.
• Le sélecteur de quantité : gap retiré pour resserrer, bordure blanche à 15 % d’opacité, radius poussé à 100 pour l’effet pilule.
• Ajouter au panier : le libellé et le texte de l’état rupture de stock se règlent dans les propriétés du composant.
• Acheter maintenant : il affiche Shop Pay, Google Pay ou un bouton simple selon ce qui est activé sur ta boutique. Passe-le en secondaire, fond retiré et bordure ajoutée.

Le prix se connecte en format number, puis currency, avec le code de la devise. Pour afficher le symbole après le montant, il faut sortir du format number et poser un élément texte séparé.

Les micro-interactions de la navigation et des cartes

Le lien de menu animé se construit en composant, avec deux pastilles superposées : une statique et une en position absolue, placée hors cadre en dessous. Au survol, la statique tombe en scale 0,8 et opacité 0 pendant que l’autre remonte au centre en scale 1. Condition à respecter : les deux pastilles doivent avoir exactement la même dimension, sinon l’élément absolu se retrouve rogné. Le texte se pilote par une variable reliée aux deux calques, faute de quoi seul le premier change.

La carte produit reprend ce principe pour faire apparaître son bouton d’ajout au panier au survol. Attention à son ancrage : un élément absolu accroché au bas d’une carte se déplace dès que la hauteur change. Tu le figes en double-cliquant sur l’ancre centrale, ou tu le ranges dans les calques de l’image pour qu’il se positionne par rapport à elle.

Dernier réflexe pour une navigation sticky : z-index au maximum, soit 10 sur Framer, et un fond opaque. Sans ça, le contenu sticky lui passe devant.

Connecter Shopify à Framer

Côté Shopify, tu crées les produits avec nom, description, médias, image principale et prix, taxes comprises dans le produit. La connexion réclame ensuite deux informations dans le plugin : l’URL de la boutique en .myshopify.com et le jeton d’accès de la Storefront API.

1. Ouvre Applications et canaux de vente. Tout se passe là, dans l’administration de la boutique.
2. Autorise le développement d’applications personnalisées héritées. Sans cette autorisation, l’étape suivante n’existe pas.
3. Crée une application. C’est elle qui portera le jeton.
4. Configure ses niveaux d’accès Storefront API sur les portées paiement et produit.
5. Installe l’application. Le jeton est alors récupérable.

La collection s’importe depuis le CMS avec import collections, puis sync products.

Conclusion

En production, l’ordre est l’inverse de la démonstration : produits dans Shopify, connexion, puis design directement sur la bonne collection. Tu évites ainsi de reconnecter tous les champs à la fin.