1 - Introduction
Bienvenue dans ce tutoriel où je vais vous montrer comment utiliser les paramètres liés aux images à travers l'ensemble du thème Phantom. Vous pouvez les trouver dans diverses sections et blocs comportant des médias images répartis sur le thème.
2 - Paramètres Fréquents sur le Thème Phantom
A - Dimensions des Images
Les dimensions d'image sont un paramètre clé du thème Phantom.
Voici les principaux formats disponibles :
Portrait : 1.5 fois la hauteur par rapport à la largeur
4:5 : 1.25 fois la hauteur par rapport à la largeur
Carré : 1:1
3:4 : 0.75 fois la hauteur par rapport à la largeur
Paysage : 0.5 fois la hauteur par rapport à la largeur
Naturel : Adopte le format de l'image originale (ratio largeur/hauteur)
Portrait | 4:5 |
| 
|
Carré | 3:4 |
 | 
|
Paysage | Naturelle |
 |  |
B - Recadrage et mises au point des images
Couvrir : l'image remplit la totalité de l'espace disponible, même si elle déborde.
Contenir : l'image se place au centre et reste entièrement visible.
Contenir | Couvrir |
 |  |
C - Recadrage et Mise au Point
Un des paramètres principaux récemment ajoutés sur Shopify est la mise au point. En cliquant sur "Modifier" dans l'image, vous pouvez sélectionner une zone précise à afficher, surtout lorsque l'image déborde de la surface disponible (ex: Recadrage de l'image sur Couvrir).
Dans l'exemple suivant, l'image déborde sur la largeur, ayant une image carrée dans un dimensionnement portrait. On peut donc positionner l'image suivant l'axe des x :
Positionnement à gauche | Positionnement à droite |
|  |
 |  |
D - Styles d'Image
Dans certains endroits du thème Phantom, vous pouvez choisir parmi plusieurs styles d'image :
Simple | Cadre |
 |  |
Cadre Ombragé | Cadre avec Décalage |
 |  |
Cadre avec Décalage Ombragé | Cadre avec Remplissage Animé au Survol |
 | 
|
Cadre avec Fusion au Survol |
|
 |
|