¿Qué es el Elemento Lista de Productos?
El elemento Lista de Productos en GemPages le permite mostrar productos de su tienda Shopify de forma dinámica. Se ajusta automáticamente al número de productos de su colección y mantiene la coherencia del diseño en toda su tienda.
Casos de uso frecuentes:
Cómo Crear una Lista de Productos de Shopify
Antes de comenzar, asegúrese de tener una Colección de Shopify lista. Si ya tiene una, puede omitir el Paso 1.
Paso 1: Crear una Colección en Shopify (Opcional)
Si ya tiene la colección deseada, omita este paso.
1. Inicie sesión en Shopify. Vaya a su Panel de Administración de Shopify.
2. Bajo la pestaña Productos, seleccione Colecciones. Haga clic en el botón “Crear colección” en la parte superior derecha de la página.
3. Configure los ajustes del Tipo de Colección :
- Manual: Agregue productos a la colección de forma manual.
- Inteligente: Establezca condiciones para agregar automáticamente los productos que coincidan.
4. Complete la demás información necesaria. Haga clic en "Guardar" para crear su colección.
Paso 2: Agregar el Elemento Lista de Productos en GemPages
1. Abra el Editor de GemPages. Localice el Elemento Lista de Productos en la Biblioteca de Elementos.
2. Localice el Elemento Lista de Productos en la Biblioteca de Elementos.
3. Arrástrelo y suéltelo en la sección donde desea que aparezca su lista de productos.
4. En el panel de configuración de Lista de Productos, elija cómo obtener los productos:
- Productos: Seleccione productos individuales de forma manual.
- Colecciones: Muestre todos los productos de una colección de Shopify específica.
- Relacionados: Muestre productos del mismo proveedor, etiquetas o colección.
Ejemplo: Para mostrar la colección que creó en el Paso 1, seleccione Colecciones, elija la colección deseada y haga clic en Confirmar.
Paso 3: Personalizar el Estilo de sus Elementos de Producto
1. Personalice los Títulos de Productos, los Precios y los botones Agregar al Carrito para que coincidan con la identidad visual de su tienda.
2. Enriquezca su lista de productos con elementos adicionales como:
Paso 4: Optimizar para Móvil
Una vez completado el diseño para escritorio, cambie a la Vista móvil en el Editor de GemPages:
- Ajuste el espaciado, los tamaños de fuente y las dimensiones de los botones para pantallas más pequeñas
- Ejemplo: Muestre 4 productos por fila en escritorio y 2 productos por fila en móvil para una legibilidad y usabilidad óptimas.
