La Cuadrícula de artículos en venta es un elemento de página ya preparado para mostrar varios productos uno al lado del otro. Llega como una cuadrícula de tres tarjetas, y cada una ya trae una imagen, un nombre con su descripción, un precio y un botón Comprar ahora. Tú reemplazas el contenido de muestra por el tuyo y la distribución se ocupa del resto.
Antes de empezar
El botón Comprar ahora de cada tarjeta proviene de la aplicación Pagos en línea, así que la cuadrícula depende de ella de dos maneras distintas:
- Pagos en línea tiene que estar disponible en tu plan. El creador de sitios la instala por ti en el momento en que arrastras la cuadrícula a una página. Si tu plan no la incluye, la cuadrícula no se agrega y verás un mensaje de error en su lugar.
- Pagos en línea también tiene que estar configurada. Esto es lo que más se pasa por alto: cada botón Comprar ahora aparece con el estilo del sitio desde el momento en que agregas la cuadrícula, así que las tarjetas parecen terminadas de inmediato. No lo están. Cada botón solo funciona una vez que lo configuras con el método de pago que quieras aceptar; hasta entonces es decorativo y, si un visitante hace clic, no ocurre nada.
Agregar la cuadrícula a una página
- Abre la página donde la quieres, en la vista de administración.
- Haz clic en Construir en el menú de la izquierda.
- Abre la categoría Elementos del contenedor.
- Arrastra Cuadrícula de artículos en venta a la página, al lugar donde quieres que aparezca.
Qué contiene cada tarjeta
Cada tarjeta está formada por cuatro áreas editables, de arriba abajo:
- Una imagen.
- Un título y una descripción breve, juntos en un mismo bloque de texto.
- Una línea divisoria fina seguida del precio, también juntos en un mismo bloque de texto.
- El botón Comprar ahora de Pagos en línea.
Como la línea divisoria está dentro del mismo bloque que el precio, editar el precio no la quita.
Editar, agregar y quitar artículos
- Haz clic en la imagen para abrir las opciones de imagen y poner tu propia foto.
- Haz clic en el título, en la descripción o en el precio para editar el texto directamente en la página.
- Para agregar otro artículo, pasa el cursor sobre una tarjeta que ya tengas terminada y elige Copiar. La tarjeta pasa al panel Portapapeles del menú de la izquierda; arrástrala desde ahí de vuelta a la cuadrícula y edita la copia.
- Para quitar un artículo, pasa el cursor sobre su tarjeta y elige Quitar.
Cambiar la distribución
La cuadrícula empieza con tres columnas. Pasa el cursor sobre la cuadrícula en la vista de administración y haz clic en ella: sus ajustes se abren en el panel derecho. Usa Opciones de cuadrícula para cambiar Cantidad de columnas, Espacio entre columnas y Espacio entre filas. Si el panel derecho muestra una sola tarjeta en lugar de la cuadrícula, has seleccionado la tarjeta; lleva el puntero al borde de la cuadrícula y vuelve a hacer clic.
Esa cantidad de columnas se aplica a las pantallas de escritorio. En pantallas de menos de unos 1024 píxeles, es decir teléfonos y tabletas pequeñas, las tarjetas siempre se apilan en una sola columna, sin importar lo que hayas configurado.
Los colores, los bordes y los estilos de texto de las tarjetas siguen el diseño de tu sitio en lugar de ser fijos, así que la cuadrícula sigue funcionando si más adelante cambias de diseño.
Hacer que funcionen los botones Comprar ahora
- Haz clic en el botón Comprar ahora de la parte inferior de una tarjeta. Sus ajustes de Pagos en línea se abren en el panel derecho.
- Elige tu proveedor de pagos:
Stripe,PayPaloMercado Pago. - En Seleccionar el tipo de botón, deja seleccionado Comprar ahora.
- Completa Nombre del elemento, Precio y Moneda.
- Completa la Configuración de pago de ese proveedor.
- Repite el proceso en cada tarjeta. Cada botón se configura por separado.
Las tarjetas vienen con la opción Solo botón, de modo que el nombre y el precio propios de la aplicación quedan ocultos y solo se ve el botón. El nombre y el precio que lee tu visitante son el texto que escribiste en la tarjeta, así que los dos hay que mantenerlos iguales a mano: cambiar el precio en el texto de la tarjeta no cambia lo que cobra el botón, ni al revés.
Para la parte de pagos en detalle, consulta Pagos en línea.
Detalles que suelen confundir
- Una imagen que pegues dentro del texto del título o del precio se recorta al mismo tamaño que el área de imagen de la tarjeta. Usa la imagen de la parte superior de la tarjeta para la foto del producto.
- La línea divisoria es lo que mantiene alineados los precios y los botones en la parte inferior de cada fila. Si la eliminas de una tarjeta, el precio y el botón de esa tarjeta suben y quedan justo debajo de la descripción.
- Nada de lo que cambies estará en vivo hasta que publiques el sitio.