Avec Zapiet - Options du Produit, vous pouvez créer autant d'options que nécessaire, les combiner dans des ensembles d'options et les attribuer aux produits.

Créer une option du produit

Sur la page Options, cliquez sur Créer une option.

Vous pouvez créer les types d'options suivants :

Cases à cocher
Liste déroulante
Téléchargement de fichiers
Grand champ de texte
Champ numérique
Boutons radio
Échantillons
Champ de texte
Boutons à bascule

Cases à cocher

Des cases à cocher apparaissent sur la page du produit et plusieurs options du produit peuvent être sélectionnées en même temps.

Ajoutez le Nom de l'option.
Dans le champ Type d'option, cliquez sur Cases à cocher.
Commencez à ajouter des valeurs d’options. Cliquez sur Ajouter une valeur d'option pour ajouter d'autres cases à cocher.
Vous pouvez modifier l'ordre des options.
Si nécessaire, ajoutez des frais à chaque option. Apprenez-en davantage dans notre guide Facturer plus pour certaines options.
Si nécessaire, vous pouvez ajouter une Bulle d'aide et du Texte d'aide.
Choisissez si vous souhaitez que la première option soit sélectionnée par défaut.
Le paramètre Autoriser les sélections multiples est activé par défaut. Si vous souhaitez qu'une seule option soit sélectionnée, veuillez utiliser le type d'option Boutons radio.
Limitez le nombre de cases à cocher pouvant être sélectionnées sur la page du produit. Ajoutez un nombre minimal et maximal de sélections. Si ce champ reste vide, le client pourra en choisir autant qu’il le souhaite.
Sélectionnez s'il s'agit d'une option Requise que vos clients doivent compléter avant d'ajouter le produit au panier.
Cliquez sur Créer.

Répétez le processus si vous souhaitez ajouter différentes options sous forme de liste de cases à cocher. Une fois vos options configurées, l’étape suivante consiste à créer un ensemble d’options.

Liste déroulante

Une liste déroulante apparaît sur la page du produit et une seule option peut être sélectionnée à la fois.

Ajoutez le Nom de l'option.
Dans le champ Type d'option, cliquez sur Liste déroulante.
Commencez à ajouter des valeurs d’options. Cliquez sur Ajouter une valeur d'option pour ajouter plus d'options dans la liste déroulante.
Si nécessaire, ajoutez des frais. Apprenez-en davantage dans notre guide Facturer plus pour certaines options.
Vous pouvez modifier l'ordre des options.
Si nécessaire, vous pouvez ajouter une Bulle d'aide et du Texte d'aide.
Ajoutez un Texte de remplacement.
Choisissez si vous souhaitez que la première option soit sélectionnée par défaut.
Cochez Sélecteur de quantité pour permettre aux clients d'ajouter une valeur numérique pour l'option choisie et d'ajouter une valeur maximale qu'ils peuvent saisir.
Sélectionnez s'il s'agit d'une option Requise que vos clients doivent compléter avant d'ajouter le produit au panier.
Cliquez sur Créer.

Répétez le processus si vous souhaitez ajouter différentes options sous forme de liste déroulante. Une fois vos options configurées, l’étape suivante consiste à créer un ensemble d’options.

Téléchargement de fichiers

Un champ de téléchargement de fichiers apparaît sur la page produit, permettant aux clients de télécharger leurs fichiers.

Ajoutez le Nom de l'option.
Dans le champ Type d'option, cliquez sur Téléchargement de fichier.
Sélectionnez les extensions de fichiers acceptées.
Si nécessaire, vous pouvez ajouter une Bulle d'aide et du Texte d'aide.
Sélectionnez s'il s'agit d'une option Requise que vos clients doivent compléter avant d'ajouter le produit au panier.
Si nécessaire, ajoutez des frais à chaque option. Apprenez-en davantage dans notre guide Facturer plus pour certaines options.
Cliquez sur Créer.

Les fichiers téléchargés seront disponibles en téléchargement sur la page Shopify > Commandes.

Répétez le processus si vous souhaitez ajouter des champs de téléchargement de fichier supplémentaires. Une fois vos options configurées, l’étape suivante consiste à créer un ensemble d’options.

Grand champ de texte

Une grande zone de texte apparaît sur la page du produit, dans laquelle les clients peuvent ajouter une description ou des instructions. Vous pouvez limiter le nombre de caractères saisis et ajouter des frais.

Ajoutez le Nom de l'option.
Dans le champ Type d'option, cliquez sur Grand champ de texte.
Si nécessaire, vous pouvez ajouter une Bulle d'aide et du Texte d'aide.
Ajoutez un Texte de remplacement.
Si nécessaire, ajoutez une Valeur par défaut et une Limite de caractères.
- Si vous ajoutez à la fois une valeur par défaut et un texte de remplacement, le texte de remplacement ne sera pas visible par vos clients car la valeur par défaut sera affichée à la place.
Sélectionnez s'il s'agit d'une option Requise que vos clients doivent compléter avant d'ajouter le produit au panier.
Si nécessaire, vous pouvez Créer des frais pour chaque option. Apprenez-en davantage dans notre guide Facturer plus pour certaines options.
Cliquez sur Créer.

Répétez le processus si vous souhaitez ajouter différentes options sous forme de grands champs de texte. Une fois vos options configurées, l’étape suivante consiste à créer un ensemble d’options.

Champ numérique

Un champ numérique apparaît sur la page produit pour que vos clients puissent saisir une valeur numérique.

Ajoutez le Nom de l'option.
Dans le champ Type d'option, cliquez sur Champ numérique.
Si nécessaire, vous pouvez ajouter une Bulle d'aide et du Texte d'aide.
Ajoutez un Texte de remplacement.
Ajoutez une Valeur par défaut, des valeurs Minimales et Maximales.
- La valeur par défaut sera automatiquement sélectionnée pour chaque client. Les clients pourront ajuster le numéro en fonction de leurs besoins.
Sélectionnez s'il s'agit d'une option Requise que vos clients doivent compléter avant d'ajouter le produit au panier.
Si nécessaire, vous pouvez ajouter des frais. Apprenez-en davantage dans notre guide Facturer plus pour certaines options.
Cliquez sur Créer.

Répétez le processus si vous souhaitez ajouter différentes options sous forme de champs numériques. Une fois vos options configurées, l’étape suivante consiste à créer un ensemble d’options.

Boutons radio

Une liste de boutons radio apparaît sur la page du produit, où une seule option peut être sélectionnée à la fois.

Ajoutez le Nom de l'option.
Dans le champ Type d'option, cliquez sur Boutons radio.
Commencez à ajouter des valeurs d’options. Cliquez sur Ajouter une valeur d'option pour ajouter d'autres options qui apparaîtront dans la liste.
Vous pouvez également modifier l'ordre des options.
Si nécessaire, vous pouvez ajouter des frais à chaque option. Apprenez-en davantage dans notre guide Facturer plus pour certaines options.
Si nécessaire, vous pouvez ajouter une Bulle d'aide et du Texte d'aide.
Vous pouvez choisir si vous souhaitez que la première option soit sélectionnée par défaut.
Cochez Sélecteur de quantité pour permettre aux clients d'ajouter une valeur numérique pour l'option choisie et d'ajouter une valeur maximale qu'ils peuvent saisir.
Sélectionnez s'il s'agit d'une option Requise que vos clients doivent compléter avant d'ajouter le produit au panier.
Cliquez sur Créer.

Répétez le processus si vous souhaitez ajouter différentes options sous forme de boutons radio. Une fois vos options configurées, l’étape suivante consiste à créer un ensemble d’options.

Échantillons

Une sélection d'échantillons avec des images ou des couleurs apparaît sur la page produit pour que vos clients puissent choisir une ou plusieurs options.

Ajoutez le Nom de l'option.
Dans le champ Type d'option, cliquez sur Échantillons.
Commencez à ajouter des valeurs d’options. Cliquez sur Ajouter une valeur d'option pour ajouter d'autres options qui apparaîtront dans une liste.
Cliquez sur le signe Image pour sélectionner la couleur de l'échantillon ou ajouter une image.
Pour ajouter une couleur, ajoutez le code hexadécimal ou sélectionnez la couleur manuellement, puis cliquez sur Enregistrer.
Cliquez sur Sélectionner une image, puis cliquez sur Ajouter une image pour télécharger une image. Cliquez sur Enregistrer.
Vous pouvez également modifier l'ordre des options.
Si nécessaire, vous pouvez ajouter des frais à chaque option. Apprenez-en davantage dans notre guide Facturer plus pour certaines options.
Si nécessaire, vous pouvez ajouter une Bulle d'aide et du Texte d'aide.
Par défaut, nous afficherons les échantillons sous forme de tuiles de couleur. Sélectionnez si vous souhaitez Afficher les échantillons sous forme de liste déroulante.
Pour une liste déroulante, vous pouvez sélectionner le Texte de remplacement.
Indiquez si vous souhaitez que la première option soit sélectionnée par défaut.
Cochez Sélecteur de quantité pour permettre aux clients d'ajouter une valeur numérique pour l'option choisie et d'ajouter une valeur maximale qu'ils peuvent saisir.
Cochez Modifier l'image du produit lors de la sélection si vous avez téléchargé des images et souhaitez modifier l'image en fonction de l'option sélectionnée.
- Cette option nécessiterait d’effectuer des étapes supplémentaires pour fonctionner correctement.
- Vous devrez ajouter la classe .zapiet-product-image-container img à chaque conteneur d'image de produit sur votre thème. Pour en savoir plus, consultez notre article Afficher des images dynamiques sur les pages produits.
Permettez à vos clients de sélectionner plusieurs options. Si nécessaire, ajoutez les sélections Minimales et Maximales autorisées pour cette option.
- Si vous cochez Autoriser plusieurs options, Sélecteur de quantité et Modifier l'image du produit lors de la sélection seront désactivés.
Sélectionnez s'il s'agit d'une option Requise que vos clients doivent compléter avant d'ajouter le produit au panier.

Répétez le processus si vous souhaitez ajouter différentes options sous forme d'échantillons. Une fois vos options configurées, l’étape suivante consiste à créer un ensemble d’options.

Champ de texte

L'option Texte ajoutera une zone de texte à votre page de produits pour que vos clients puissent ajouter des messages courts.

Ajoutez le Nom de l'option.
Dans le champ Type d'option, cliquez sur Champ de texte.
Si nécessaire, vous pouvez ajouter une Bulle d'aide et du Texte d'aide.
Ajoutez un Texte de remplacement.
Si nécessaire, ajoutez une Valeur par défaut et une Limite de caractères.
- Si vous ajoutez à la fois une valeur par défaut et un texte de remplacement, le texte de remplacement ne sera pas visible par vos clients car la valeur par défaut sera affichée à la place.
Sélectionnez s'il s'agit d'une Option requise que vos clients doivent compléter avant d'ajouter le produit au panier.
Si nécessaire, vous pouvez ajouter des frais. Apprenez-en davantage dans notre guide Facturer plus pour certaines options.
Cliquez sur Créer.

Répétez le processus si vous souhaitez ajouter différentes options sous forme de champs de texte. Une fois vos options configurées, l’étape suivante consiste à créer un ensemble d’options.

Boutons à bascule

Des boutons à bascule apparaissent sur la page du produit et plusieurs options de produits peuvent être sélectionnées en même temps.

Ajoutez un Nom d'option.
Dans le champ Type d'option, cliquez sur Boutons à bascule.
Commencez à ajouter des valeurs d’options. Cliquez sur Ajouter une valeur d’option pour ajouter d’autres boutons à bascule.
Vous pouvez modifier l'ordre des options.
Si nécessaire, ajoutez des frais à chaque option. Apprenez-en davantage dans notre guide Facturer plus pour certaines options.
Si nécessaire, vous pouvez ajouter une Bulle d'aide et du Texte d'aide.
Choisissez si vous souhaitez que la première option soit sélectionnée par défaut.
Le paramètre Autoriser les sélections multiples est activé par défaut. Si vous souhaitez autoriser la sélection d’une seule option, utilisez le type d’option Boutons radio ou définissez le Nombre maximum de sélections sur 1.
Limitez le nombre de boutons à bascule pouvant être sélectionnés sur la page du produit. Ajoutez un nombre minimum et maximum de sélections. Si ce champ reste vide, le client pourra en choisir autant qu’il le souhaite.
Sélectionnez s'il s'agit d'une Option requise que vos clients doivent compléter avant d'ajouter le produit au panier.
Cliquez sur Créer.

Répétez le processus si vous souhaitez ajouter différentes options sous forme de liste de boutons à bascule. Une fois vos options configurées, l’étape suivante consiste à créer des ensembles d’options.

Dépannage

Si l'option bascule ne fonctionne pas comme prévu sur votre boutique, veuillez suivre les étapes ci-dessous.

Si vous n'utilisez pas de CSS personnalisé, réinitialisez les paramètres CSS dans Zapiet - Options du produit > Paramètres > Styles personnalisés.

Si vous utilisez du CSS personnalisé, ajoutez le code suivant au CSS existant dans Zapiet - Options du produit > Paramètres > Styles personnalisés, puis Enregistrez les modifications.

/* Toggle Switch Container */
.toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
padding-bottom: 5px !important;
}

/* Hide default checkbox */
.toggle-switch .toggle-input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}

/* The slider */
.toggle-slider {
position: relative;
display: inline-block;
width: 32px;
height: 20px;
background-color: #e0e0e0;
transition: .4s;
border-radius: 20px;
margin-right: 5px;
cursor: pointer;
vertical-align: middle;
}

/* Slider knob */
.toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

/* Add X only when unchecked */
input[type="checkbox"]:not(:checked) + .toggle-slider:before {
content: "x";
color: #e0e0e0;
font-size: 12px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 1px;
}

/* Checked state - Fixed selector */
input[type="checkbox"]:checked + .toggle-slider {
background-color: var(--zapiet-primary-button-color, #121212);
}

input[type="checkbox"]:checked + .toggle-slider:before {
transform: translateX(12px);
}

/* Focus state */
input[type="checkbox"]:focus + .toggle-slider {
box-shadow: 0 0 1px var(--zapiet-primary-button-color, #121212);
}

/* Toggle label */
.toggle-label {
font-size: 1.2rem;
color: var(--zapiet-text-color, #333);
vertical-align: middle;
display: inline-block;
}

/* Fieldset styles */
fieldset {
border: none;
padding: 0;
margin: 0;
}

Modifier les options

Pour afficher et modifier vos options, cliquez sur Options.
Cliquez sur l'option que vous souhaitez modifier.
Apportez les modifications nécessaires, puis cliquez sur Enregistrer.

Supprimer des options

Pour supprimer vos options, cliquez sur Options.
Cochez les options qui doivent être supprimées.
Cliquez sur Supprimer.
Cliquez sur Confirmer, supprimer l'option. Cette action ne peut pas être annulée.