Sitios web existentes - personalizando tus incrustaciones

Consulta aquí nuestra guía para incrustar en un sitio web existente.

Shoprocket ofrece control total sobre la apariencia de tus incrustaciones de código a través del generador de código en tu panel.

Selecciona qué tipo de incrustación deseas (widget de Producto único, Producto de página completa, múltiples Productos o carrito de compras) y luego habilita/deshabilita los elementos que desees incluir, así como personaliza los tamaños, estilos y comportamientos.

Una vez que hayas realizado cambios en tu código de incrustación, necesitarás copiar y pegarlo en tu sitio web donde desees que aparezca. (si realizas cambios futuros, deberás copiar y pegar el código nuevamente)

También puedes hacer clic en "Guardar como configuración predeterminada" en el menú de la izquierda para almacenar tus configuraciones de incrustación para que todos los futuros códigos de incrustación que generes comiencen con las mismas configuraciones.

Opciones

Las siguientes opciones están disponibles en la sección "Opciones" del menú de la izquierda:

1. Productos a mostrar - Elige mostrar todos los Productos o solo Productos de categorías específicas
2. Tamaño del Producto - Establece el tamaño de visualización de los elementos incrustados (pequeño, mediano o grande)
3. Ajuste de imagen - Define si las imágenes del Producto deben recortarse al tamaño disponible o ser reducidas (recortadas mantendrán todas las imágenes del mismo tamaño y más uniformes)
4. Estilo del botón - elige entre "Estándar" (botones rectangulares con texto) "Mínimo" (botones circulares con íconos) o "Al pasar el mouse" (botones circulares con íconos que solo aparecen al pasar el mouse sobre el Producto)
5. Orden de clasificación predeterminado - Define el orden de clasificación con el que se listarán los Productos por defecto (Predeterminado, Más Nuevo Primero, Nombre: A-Z, Nombre: Z-A, Precio: Bajo-Alto, Precio: Alto-Bajo)
6. Productos por página - Especifica cuántos Productos cargar en la vista
7. Ocultar Productos fuera de stock - Elige si deseas ocultar completamente los Productos que están fuera de stock, o mostrarlos con un mensaje de "Fuera de stock"

Incluye

También puedes especificar qué elementos incluir, como el botón "Ver Producto" y las "Cintas"

Las siguientes inclusiones están disponibles en la sección "Incluye" del menú de la izquierda:

1. Cuadro de búsqueda - Muestra el campo de "búsqueda" sobre tu incrustación de Productos (solo disponible en incrustaciones de múltiples Productos)
2. Cuadro de clasificación - Muestra el menú desplegable de orden de clasificación (solo disponible en incrustaciones de múltiples Productos)
3. Cuadro limitador por página - Muestra el menú desplegable de elementos por página (solo disponible en incrustaciones de múltiples Productos)
4. Cuadro de moneda - Muestra el menú desplegable de moneda para que los clientes vean precios en su moneda preferida (las monedas deben habilitarse primero en la configuración de tu tienda)
5. Cuadro de idioma - Muestra el menú desplegable de idioma para que los clientes cambien de idioma (los textos de la tienda deben configurarse primero en tu configuración)
6. Cuadro de categoría - Muestra el menú desplegable de categoría, permitiendo a los clientes filtrar Productos por categoría (solo disponible en incrustaciones de múltiples Productos)
7. Nombre del Producto - Muestra el nombre del Producto
8. Precio del Producto - Muestra el precio del Producto
9. Imagen del Producto - Muestra la imagen principal del Producto
10. Resumen del Producto - Muestra el texto resumen del Producto
11. Botón Ver Producto - Muestra el botón para abrir los detalles completos del Producto en un modal
12. Botón Añadir al carrito - Muestra el botón para agregar el artículo al carrito (las opciones aparecerán arriba al pasar el mouse, los Productos que requieren opciones/variaciones más avanzadas abrirán el modal de ver producto al hacer clic)
13. Cantidad mínima/máxima de pedido - Muestra las cantidades mínimas y máximas de pedido disponibles, si se establecen en tu Producto
14. Cinta de envío gratis - Muestra la cinta de "Envío Gratis" en tu Producto si el envío gratuito es aplicable
15. Cinta de Nuevo Producto - Muestra la cinta de "Nuevo" en Productos añadidos en los últimos 20 días
16. Cinta de descarga digital - Muestra la cinta de "Descarga Digital" en Productos que incluyen un archivo descargable al comprar

Popup de Ver Producto

Para Productos que tienen habilitada la opción "ver Producto", puedes personalizar qué elementos de los siguientes mostrar en el modal:

1. Nombre del Producto - Muestra el nombre del Producto
2. Precio del Producto - Muestra el precio del Producto
3. Seleccionar cantidad - Muestra el campo de selección de cantidad (si se deshabilita, solo se puede agregar 1 al carrito a la vez)
4. Imagen del Producto - Muestra la galería de imágenes del Producto
5. Miniaturas de imagen - Muestra las miniaturas de la galería de imágenes
6. Reseñas del Producto - Muestra las reseñas del Producto
7. Resumen del Producto - Muestra el texto resumen del Producto
8. Descripción del Producto - Muestra la descripción del Producto
9. SKU del Producto - Muestra la unidad de mantenimiento de stock (SKU) del Producto
10. Categorías del Producto - Muestra las categorías vinculadas a los Productos
11. Íconos de compartir en redes sociales - Muestra botones que permiten compartir el Producto en redes sociales con un clic
12. Productos relacionados - Muestra los Productos relacionados
13. Cantidad mínima/máxima de pedido - Muestra las cantidades mínimas y máximas de pedido disponibles, si se establecen en tu Producto

También puedes elegir entre las siguientes opciones:

1. Ajuste de imagen - Define si las imágenes del Producto deben recortarse al tamaño disponible o ser reducidas (recortadas mantendrán todas las imágenes del mismo tamaño y más uniformes)
2. Anchura de imagen - Establece la anchura de las imágenes
3. Altura de imagen - Establece la altura de las imágenes
4. Diseño de miniaturas - Posiciona las miniaturas de la galería de imágenes horizontalmente debajo de la galería de imágenes, o verticalmente a la izquierda
5. Estilo de variación - Elige entre menús "desplegables" estándar para elegir o menús de texto "simple"
   (en desarrollo)

Estilos

Puedes personalizar los siguientes colores a través del generador:

• Título del Producto
• Precio del Producto
• Resumen del Producto
• Fondo del botón de compra
• Texto/icono del botón de compra
• Fondo del botón Ver Producto
• Texto/icono del botón Ver
• Fondo del botón Ver carrito
• Texto del botón Ver carrito
• Color del widget de cesta
• Fondo de la cesta
• Color de texto de la cesta
• Fondo del ítem del Producto

Para aquellos con habilidades de codificación, por supuesto, puedes usar tus propias reglas CSS para estilizar las incrustaciones tanto como desees, no utilizamos iFrames, por lo que todo el contenido renderizado en tu página es parte del DOM y puede ser estilizado con tu propio CSS.

Solo asegúrate de que tus reglas CSS sean más específicas que las nuestras.

Por ejemplo, tenemos esta regla:

.sr-filters-wrap {
   background: #fff;
}

Para anular eso, crea tu propia regla CSS con un elemento padre precedido, como:

body .sr-filters-wrap { 
   background: #000; 
}

Porque añadiste el elemento "body" antes de nuestra regla, será más específico que la nuestra y tendrá prioridad. 

También puedes realizar cambios directamente en el generador de código de incrustación si te sientes más cómodo con eso.