As alternâncias aparecem na página do produto e permitem que várias opções do produto sejam selecionadas ao mesmo tempo.
Requisitos
Você pode criar opções apenas como parte de um conjunto de opções. É necessário criar um conjunto de opções antes de criar suas opções.
Criar uma nova opção
Adicione um Nome da opção.
Comece a adicionar valores da opção. Clique em Adicionar valor da opção para incluir mais alternâncias.
Você pode alterar a ordem das opções.
Se necessário, adicione um custo adicional. Saiba mais no nosso guia sobre Cobrar mais por certas opções.
Se necessário, adicione um Texto de dica e um Texto de ajuda.
Escolha se deseja que a primeira opção seja selecionada por padrão.
A configuração Permitir múltiplas seleções está ativada por padrão. Se quiser permitir a seleção de apenas uma opção, use o tipo de opção Botões de opção ou defina o Número máximo de seleções como 1.
Defina um limite para quantas alternâncias podem ser selecionadas na página do produto. Adicione um número mínimo e máximo de seleções. Se deixado em branco, os clientes poderão escolher quantas quiserem.
Selecione se essa é uma Opção obrigatória para que seus clientes concluam antes de adicionar o produto ao carrinho.
Você pode visualizar a opção criada à direita. Quando tudo estiver pronto, clique em Criar.
Se você terminou de criar suas opções, finalize a criação do conjunto de opções. Caso ainda esteja criando e editando opções, pode criar mais opções ou configurar cobranças adicionais para certas opções.
Solução de problemas
Se a opção de alternâncias não estiver funcionando como esperado na sua loja, siga os passos abaixo.
Se você não estiver usando CSS personalizado, redefina as configurações de CSS em Zapiet - Opções de Produto > Configurações > Estilos personalizados.
Se você estiver usando CSS personalizado, adicione o seguinte código ao CSS existente em Zapiet - Opções de Produto > Configurações > Estilos personalizados, depois Salve as alterações.
/* 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;
}
