Con Zapiet - Opciones de Producto, puedes crear tantas opciones como necesites, combinarlas en conjuntos de opciones y asignarlas a productos.
Crear una opción de producto
En la página de Opciones, haz clic en Crear opción.
Puedes crear los siguientes tipos de opciones:
Casillas de verificación
Las casillas de verificación aparecen en la página del producto y se pueden seleccionar múltiples opciones de producto al mismo tiempo.
Agrega un Nombre para la opción.
En el campo Tipo de opción, haz clic en Casillas de verificación.
Comienza a agregar valores de opción. Haz clic en Agregar valor de opción para añadir más casillas de verificación.
Puedes cambiar el orden de las opciones.
Si es necesario, agrega un cargo a cada opción. Aprende más en nuestra guía sobre cómo Cobrar más por ciertas opciones.
Si es necesario, puedes agregar texto de sugerencia de Tooltip y texto de ayuda.
Elige si deseas que la primera opción esté seleccionada por defecto.
La opción de permitir múltiples selecciones está habilitada por defecto. Si deseas que solo se seleccione una opción maximo, utiliza el tipo de opción Botones de opción.
Limita cuántas casillas de verificación se pueden seleccionar en la página del producto. Agrega un número mínimo y máximo de selecciones. Si dejas esto en blanco, el cliente podrá elegir tantas como desee.
Selecciona si esta es una opción obligatoria que tus clientes deben completar antes de añadir el producto al carrito.
Haz clic en Crear.
Repite el proceso si deseas agregar diferentes opciones como una lista de casillas de verificación. Una vez que tus opciones estén configuradas, el siguiente paso es crear un conjunto de opciones.
Lista desplegable
Una lista desplegable aparece en la página del producto, y solo se puede seleccionar una opción a la vez.
Agrega un nombre para la opción.
En el campo Tipo de opción, haz clic en Lista desplegable.
Comienza a agregar valores de opción. Haz clic en Agregar valor de opción para añadir más opciones a la lista desplegable.
Si es necesario, agrega un cargo. Aprende más en nuestra guía sobre cómo Cobrar más por ciertas opciones.
Puedes cambiar el orden de las opciones.
Si es necesario, puedes agregar texto de sugerencia de Tooltip y Texto de ayuda.
Agrega un texto de marcador de posición.
Elige si deseas que la primera opción esté seleccionada por defecto.
Marca el selector de Cantidad para permitir que los clientes agreguen un valor numérico para la opción elegida y añade un valor máximo que puedan ingresar.
Selecciona si esta es una opción obligatoria que tus clientes deben completar antes de añadir el producto al carrito.
Haz clic en Crear.
Repite el proceso si deseas agregar diferentes opciones como una lista desplegable. Una vez que tus opciones estén configuradas, el siguiente paso es crear un conjunto de opciones.
Subida de archivos
Un campo de subida de archivos aparece en la página del producto, permitiendo a los clientes cargar sus archivos.
Agregar un Nombre a tu opción.
En el campo Tipo de opción, haz clic en Subida de archivos.
Selecciona las extensiones de archivo aceptadas.
Si es necesario, puedes agregar texto de sugerencia de Tooltip y Texto de ayuda.
Selecciona si esta es una opción obligatoria que tus clientes deben completar antes de añadir el producto al carrito.
Si es necesario, agrega un cargo. Aprende más en nuestra guía sobre cómo Cobrar más por ciertas opciones.
Haz clic en Crear
Los archivos subidos estarán disponibles para descargar en la página de Pedidos de Shopify.
Repite el proceso si deseas agregar campos adicionales de subida de archivos. Una vez que tus opciones estén configuradas, el siguiente paso es crear un conjunto de opciones.
Campo de texto grande
Aparece un cuadro de texto grande en la página del producto, donde los clientes pueden agregar una descripción o instrucciones. Puedes limitar el número de caracteres ingresados y añadir un cargo.
Agrega un Nombre a tu opción.
En el campo Tipo de opción, haz clic en Campo de texto grande.
Si es necesario, puedes agregar texto de sugerencia de Tooltip y Texto de ayuda.
Agrega un texto de marcador de posición.
Si es necesario, agrega un valor predeterminado y un límite de caracteres.
Si agregas tanto un valor predeterminado como un marcador de posición, el marcador de posición no será visible para tus clientes porque el valor predeterminado se mostrará en su lugar.
Selecciona si esta es una opción obligatoria que tus clientes deben completar antes de añadir el producto al carrito.
Si es necesario, agrega un cargo. Aprende más en nuestra guía sobre cómo Cobrar más por ciertas opciones.
Haz clic en Crear.
Repite el proceso si deseas agregar diferentes opciones como campos de texto grande. Una vez que tus opciones estén configuradas, el siguiente paso es crear un conjunto de opciones.
Campo numérico
Aparece un campo numérico en la página del producto para que tus clientes ingresen un valor numérico.
Agrega un Nombre a tu opción.
En el campo Tipo de opción, haz clic en Campo numérico.
Si es necesario, puedes agregar texto de sugerencia de Tooltip y Texto de ayuda.
Agrega un texto de marcador de posición.
Agrega un valor predeterminado, valores mínimo y máximo.
El valor predeterminado se seleccionará automáticamente para cada cliente. Los clientes podrán ajustar el número según sus necesidades.
Selecciona si esta es una Opción obligatoria que tus clientes deben completar antes de añadir el producto al carrito.
Si es necesario, agrega un cargo. Aprende más en nuestra guía sobre cómo Cobrar más por ciertas opciones.
Haz clic en Crear.
Repite el proceso si deseas agregar diferentes opciones como campos numéricos. Una vez que tus opciones estén configuradas, el siguiente paso es crear un conjunto de opciones.
Botones de Opción
Una lista de botones de opción aparece en la página del producto, donde solo se puede seleccionar una opción a la vez.
Agrega un Nombre a tu opción.
En el campo Tipo de opción, haz clic en Botones de opción.
Comienza a agregar valores de opción. Haz clic en Agregar valor de opción para añadir más opciones que aparecerán en la lista.
También puedes cambiar el orden de las opciones.
Si es necesario, agrega un cargo. Aprende más en nuestra guía sobre cómo Cobrar más por ciertas opciones.
Si es necesario, puedes agregar texto de sugerencia de Tooltip y Texto de ayuda.
Puedes elegir si deseas que la primera opción esté seleccionada por defecto.
Marca el Selector de cantidad para permitir a los clientes agregar un valor numérico para la opción elegida y añade un valor máximo que pueden ingresar.
Selecciona si esta es una Opción obligatoria que tus clientes deben completar antes de agregar el producto al carrito.
Haz clic en Crear.
Repite el proceso si deseas agregar diferentes opciones como botones de opción. Una vez que tus opciones estén configuradas, el siguiente paso es crear un conjunto de opciones.
Muestras
Una selección de muestras con imágenes o colores aparece en la página del producto para que sus clientes elijan una o más opciones.
Agregua un Nombre de opción.
En el campo Tipo de opción, haz clic en Muestras.
Comienza a agregar valores de opción. Haz clic en Agregar valor de opción para agregar más opciones que aparecerán en una lista.
Haz clic en el Ícono de imagen para seleccionar el color de la muestra o agregar una imagen.
Para agregar un color, introduce el código hex o selecciona el color manualmente, luego haz clic en Guardar.
Haz clic en Seleccionar una imagen, luego haz clic en Agregar imagen para subir una imagen. Haz clic en Guardar.
También puedes Cambiar el orden de las opciones.
Si es necesario, agrega un cargo. Aprende más en nuestra guía sobre cómo Cobrar más por ciertas opciones.
Si es necesario, puedes agregar texto de sugerencia de Tooltip y Texto de ayuda.
Por defecto, mostraremos las muestras como mosaicos de color. Selecciona si quieres mostrar las muestras como una lista desplegable.
Para una lista desplegable, puedes seleccionar el texto Marcador de posición.
Selecciona si deseas que la primera opción esté seleccionada por defecto.
Marca la Opción de selector de cantidad para permitir a los clientes agregar un valor numérico para la opción elegida y añade un valor máximo que puedan ingresar.
Marca la opción Cambiar imagen del producto al seleccionar si has subido imágenes y deseas cambiar la imagen según la opción seleccionada.
Esta opción requerirá completar pasos adicionales para funcionar correctamente.
Necesitarás añadir la clase
.zapiet-product-image-containerimga cada contenedor de imagen de producto en tu tema. Para obtener más información, consulta nuestro artículo sobre Mostrar imágenes dinámicas en las páginas de productos.
Permite que tus clientes seleccionen múltiples opciones. Si es necesario, añade el número mínimo y máximo de selecciones permitidas para esta opción.
Si marcas la opción Permitir múltiples opciones, las configuraciones de Selector de cantidad y Cambiar imagen del producto al seleccionar se desactivarán.
Selecciona si esta es una opción obligatoria que tus clientes deben completar antes de añadir el producto al carrito.
Repite el proceso si deseas añadir diferentes opciones como muestras. Una vez que tus opciones estén configuradas, el siguiente paso es crear un conjunto de opciones.
Campo de texto
La opción de texto añadirá un cuadro de texto a la página de tus productos para que tus clientes puedan añadir mensajes cortos.
Agregua un Nombre de opción.
En el campo Tipo de opción, haz clic en Campo de texto.
Si es necesario, puedes agregar texto de sugerencia de Tooltip y Texto de ayuda.
Agrega un texto de marcador de posición.
Si es necesario, añade un Valor predeterminado y un Límite de caracteres.
Si añades tanto un valor predeterminado como un marcador de posición, el marcador de posición no será visible para tus clientes porque el valor predeterminado se mostrará en su lugar.
Selecciona si esta es una Opción requerida para que tus clientes la completen antes de añadir el producto al carrito.
Si es necesario, agrega un cargo. Aprende más en nuestra guía sobre cómo Cobrar más por ciertas opciones.
Haz clic en Crear.
Repite el proceso si deseas agregar diferentes opciones como campos de texto. Una vez que tus opciones estén configuradas, el siguiente paso es crear un conjunto de opciones.
Toggles
En la página del producto aparecen conmutadores y se pueden seleccionar varias opciones de producto al mismo tiempo.
Añade un nombre de Opción.
En el campo Tipo de opción, haz clic en Toggles.
Empieza a añadir valores de opción. Haz clic en Añadir valor de opción para añadir más toggles.
Puedes cambiar el orden de las opciones.
Si es necesario, añade un cargo a cada opción. Más información en nuestra guía Cobrar más por determinadas opciones.
Si es necesario, puedes añadir texto de información sobre herramientas y texto de ayuda.
Elige si quieres que la primera opción se seleccione por defecto.
La opción Permitir selecciones múltiples está activada por defecto. Si sólo quieres permitir la selección de una opción, utiliza el tipo de opción Botones de opción o establece el Número máximo de selecciones en 1.
Limita el número de casillas de verificación que se pueden seleccionar en la página del producto. Añade un número mínimo y máximo de selecciones. Si se deja en blanco, el cliente podrá elegir tantas como quiera.
Selecciona si esta es una opción Requerida para que tus clientes la completen antes de añadir el producto al carrito.
Haz clic en Crear.
Repite el proceso si deseas agregar diferentes opciones como campos de texto. Una vez que tus opciones estén configuradas, el siguiente paso es crear un conjunto de opciones.
Solución a Problemas
Si la opción de toggles no está funcionando como se esperaba en su tienda, por favor siga los siguientes pasos.
Si no estás utilizando CSS personalizado, restablece la configuración CSS en Zapiet - Opciones de producto > Ajustes > Estilos personalizados.
Si estás usando CSS personalizado, añade el siguiente código al CSS existente en Zapiet - Opciones de producto > Ajustes > Estilos personalizados, luego Guarda los cambios.
/* 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;
}
Editar las Opciones
Para ver y editar tus opciones, haz clic en Opciones.
Haz clic en la opción que deseas editar.
Haz los cambios necesarios y luego haz clic en Guardar.
Eliminar Opciones
Para eliminar tus opciones, haz clic en Opciones.
Marca las opciones que deberían ser eliminadas.
Haz clic en Borrar.
Haz clic en Confirmar, eliminar opción. Esta acción no se puede revertir.
Limitaciones
Los caracteres especiales en los nombres de las opciones no son compatibles actualmente.
Siguiente Paso