Installez votre thème en trois étapes.

Régler l’entrée en scène et le parcours au défilement

Dans les cinq thèmes phares (01 Sneaker, 02 Skincare, 03 Jewelry, 04 Drinks, 05 Tech), la page d’accueil s’ouvre sur deux sections : Impact hero, l’entrée en scène, et Scroll journey, le parcours au défilement. Dans les 15 autres thèmes, vous pouvez ajouter les deux avec Ajouter une section. Toutes deux fonctionnent avec les images et les films que vous ajoutez vous-même. Aucun média des boutiques de démonstration n’est dans le ZIP.

Les thèmes sont fournis en anglais et en allemand. Dans les autres langues, l’éditeur de thème affiche les sections et les réglages en anglais : ce guide cite donc leurs noms en anglais, tels que vous les voyez.

Ce que vous voyez sans vos propres médias

• Juste après l’importation, aucun produit n’est choisi. Les deux sections affichent un dessin provisoire et des textes d’exemple. L’entrée en scène affiche aussi un prix d’exemple, et son bouton mène à tous les produits.
• Dès que vous choisissez votre produit dans les deux sections (réglage Product), elles affichent son image principale. L’entrée en scène y ajoute son prix, le choix rapide des variantes et le bouton d’achat. Dans le parcours, l’image voyage de station en station.
• Un PNG ou un WebP à fond transparent se détache librement. Une photo JPEG s’affiche comme une carte aux coins arrondis et reste entière dans l’image. Sans film, rien ne se joue dans l’entrée en scène. La page est complète ainsi : le film, les images détourées et les vues de rotation sont des suppléments.
• Les visiteurs qui ont réduit les animations voient une version calme : l’image fixe avec le texte, puis le produit posé à côté des stations. L’image fixe reste aussi quand un navigateur ne laisse pas le film démarrer tout seul.

L’entrée en scène, pas à pas

Cliquez sur Personnaliser, restez sur la page d’accueil et ouvrez la section Impact hero.

1. 1

   Produit

   Choisissez votre produit sous Product. Il apporte le prix, les variantes et le bouton d’achat. Son titre n’est pas affiché : rédigez vous-même Small heading above, Heading, Text et Note below the button. Sur téléphone, le texte et la note sont omis pour laisser la place à l’image.

2. 2

   Film (facultatif)

   Importez le film de votre produit sous Film. Placez sous Poster la dernière image du film : c’est la première image de la page, visible pendant le chargement du film et pour les visiteurs qui ont réduit les animations. Sans image fixe, c’est l’aperçu de la vidéo qui est utilisé.

3. 3

   Fond

   Réglez Background color sur la couleur exacte du fond de votre film. Augmentez ensuite Soft edges of the film jusqu’à ce qu’aucun bord ne soit visible.

4. 4

   Minutage

   Toutes les secondes se comptent à partir du début du film. Impact at second et Jolt donnent une brève secousse à la scène. Text appears at second fait apparaître le titre, le prix et le bouton. Stop at second arrête le film sur son temps fort pendant la durée indiquée sous Stop for ; pendant l’arrêt, l’image placée sous Sharp picture of the high point vient par-dessus. L’image placée sous Still after the film apparaît en fondu à la fin, et un bouton pour rejouer le film s’affiche (Show the replay button).

5. 5

   Grand mot (facultatif)

   Saisissez un mot court dans Word, sous Big word behind the product. Il lui faut quelque chose devant lui : avec un film, l’image placée sous Cut-out of the product ; sans film, une image détourée sous Poster. Sans l’une ni l’autre, le mot n’est pas affiché.

6. 6

   Mise en page

   Sous Arrangement, choisissez Film fills the stage ou Film as an area beside the text ; pour le second, Side of the text fixe le côté. Sous Framing of the film, choisissez Fill the area (crops the film) ou Show the whole film.

7. 7

   Téléphones (facultatif)

   Un film au format portrait va sous Film on mobile, son image fixe sous Image on mobile. Sans eux, les petits écrans montrent le centre du film large. Avec un film pour mobile, le temps fort, l’image de fin et l’image détourée sont omis sur téléphone.

Pas de film ? Placez une image sous Poster : un PNG ou un WebP détouré se place devant le grand mot, un JPEG remplit la zone.

Si l’entrée en scène n’a pas le bon aspect

Le parcours au défilement, pas à pas

Ouvrez la section Scroll journey. Elle s’affiche dans la boutique dès qu’elle a une station.

1. 1

   Produit

   Choisissez votre produit sous Product, ou importez une image sous Product picture : elle remplace l’image principale. Les boutons des stations mènent au produit. Un PNG ou un WebP compte comme une image détourée et flotte librement : n’utilisez donc ces formats qu’avec un fond transparent, sinon c’est un rectangle nu qui flotte. Une photo avec son propre fond s’ajoute en JPEG et devient une carte.

2. 2

   Stations

   Blocs Station, jusqu’à 6. Chacune a Small heading above, Heading, Text et, si vous le souhaitez, Button label. Sous Product at this station, réglez Place of the product, Size of the product et Tilt ; le texte se place de l’autre côté. Big word in the background place un mot court derrière le produit.

3. 3

   Étiquettes

   Sous Labels with a line, saisissez jusqu’à deux étiquettes courtes par station. Un trait relie chaque étiquette à un point du produit : placez-le avec Label 1: point from the left et Label 1: point from the top, en pourcentage de l’image du produit. Les traits s’affichent sur les écrans larges.

4. 4

   Compagnons

   Blocs Companion, jusqu’à 8, facultatifs. De petites images détourées de ce qui accompagne votre produit, par exemple un fruit, une goutte ou une feuille. Réglez Depth, Path (Drifts along, Circles the product, Flies away), Starting place et Size. Un bloc sans image n’affiche rien. Les écrans étroits montrent les quatre premiers.

5. 5

   Rotation

   Blocs Frame, jusqu’à 36, facultatifs. Ajoutez les vues du produit dans l’ordre, un bloc par image. Laissez The frames are a full turn activé pour une rotation ; désactivez-le pour un mouvement avec un début et une fin, par exemple un couvercle qui s’ouvre. Dans chaque station, View fixe la vue que le produit y montre : 0 % correspond à l’image du produit, 50 % au milieu de la séquence. Sans ces vues, l’image s’incline et oscille légèrement sur son trajet.

6. 6

   Mouvement

   Avec Scroll length per station, vous fixez la distance de défilement d’une station à la suivante. Product and companions follow the mouse slightly et Shadow below the product peuvent être désactivés.

Les médias à préparer