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

Exigences

Vous ne pouvez créer des options qu'en tant que partie d'un groupe d'options. Vous devez créer un groupe d'options avant de créer vos options.

Créer une nouvelle option

Ajoutez un Nom d'option.
Commencez à ajouter des valeurs d’options. Cliquez sur Ajouter une valeur d’option pour ajouter d’autres bascules.
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 Info-bulle 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 bascules pouvant être sélectionnées 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 obligatoire que vos clients doivent compléter avant d'ajouter le produit au panier.
Vous pouvez prévisualiser l'option que vous avez créée sur la droite. Une fois que tout est défini, cliquez sur Créer.

Si vous avez terminé de créer vos options, vous devez terminer la création de votre groupe d'options. Si vous êtes encore en train de créer et de modifier vos options, vous pouvez créer plus d'options ou facturer plus pour certaines options.

Dépannage

Si l'option des boutons à 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;
}