Pop

Un tema minimalista, diseñado para mantener tu contenido accesible. Pop es ideal para tiendas con inventarios pequeños a medianos. Su diseño cuenta con una gran barra lateral de navegación que permite acceder fácilmente a tu contenido.

Ejemplo de tienda online que usa Pop

Editor de temas

Utiliza el editor de tema para personalizar tu tema. Usando el editor de temas, puedes editar el contenido que aparece en tu tienda agregando y editando secciones de temas. También puedes cambiar la apariencia y funcionalidad de la tienda usando la configuración del tema

El contenido del tema se crea usando secciones. Las secciones son bloques de contenido personalizables que determinan el diseño y la apariencia de las diferentes páginas en tu tienda online.

Las secciones estáticas son secciones que aparecen en sucursales predeterminadas en tu tienda online. Estas secciones no se pueden eliminar ni reorganizar. Las secciones estáticas pueden incluir encabezados, pies de página, secciones de navegación o secciones de contenido en páginas como páginas de productos y páginas de colección. Por ejemplo, la sección de producto determina el aspecto de cada página de producto en tu tienda online.

Las secciones dinámicas son secciones opcionales que puedes usar para personalizar el diseño de tu página de inicio. en la página de inicio de tu tienda, puedes Agregar, reorganizary eliminar secciones dinámicas para crear el diseño de la página. Puedes tener hasta 25 secciones dinámicas en tu página de inicio.

Puedes aprender sobre la selección única de secciones de Pop y cómo personalizarlas para que se adapten a tu negocio.

Pop incluye las siguientes secciones estáticas:

  • Logo y menú
  • Barra de anuncios
  • Pie de página
  • Páginas de productos
  • Páginas de colección
  • Página de lista de colecciones
  • Artículo

Secciones dinámicas

Puedes agregar, reorganizar y eliminar secciones dinámicas para personalizar el diseño de tu página de inicio. Cada tema tiene un conjunto exclusivo de secciones dinámicas para elegir.

Pop incluye las siguientes secciones dinámicas:

  • Entradas del blog
  • Lista de colecciones
  • colección destacada
  • Imagen con texto
  • Diapositivas
  • Producto destacado
  • Boletín
  • Mapa
  • Texto enriquecido
  • video
  • HTML personalizado

Páginas de productos

En la sección de la Página de producto, puedes agregar o eliminar los elementos siguientes:

  • La marca del producto o el proveedor
  • Ampliar imagen
  • Productos relacionados
  • Selector de cantidad
  • Botón de pago dinámico
  • Íconos de redes sociales

Para editar la configuración de las páginas de productos:

  1. En el menú desplegable de la barra superior, selecciona Páginas de productos.

  2. Haz clic en Secciones.

  3. Haz clic en Página de producto.

  4. Para mostrar la marca o el proveedor del producto, marca Mostrar proveedor del producto. Para que se muestre una marca o un proveedor, debes agregar un proveedor al producto.

  5. Para que tus clientes puedan ampliar las imágenes de los productos pasando el mouse por encima, marca Habilitar zoom de imagen.

  6. Para mostrar una selección de productos relacionados en la parte inferior de la página, marca Mostrar productos relacionados. La colección a la que pertenece el producto determina los productos relacionados que se muestran. Para que los productos relacionados se muestren, debes crear una colección para el producto o agregarlo a una colección. Si el producto no es parte de una colección, no se mostrarán productos relacionados.

  7. Para mostrar un selector de cantidad, marca Mostrar selector de cantidad.

  8. Para mostrar un botón de pago dinámico, marca la casilla Mostrar botón de pago dinámico.

  9. Para mostrar los íconos de redes sociales, marca Habilitar compartir productos.

  10. Haz clic en Guardar.

Boletín

Puedes agregar la suscripción a un boletín a la página de inicio. Esto te permite recopilar direcciones para las campañas de email marketing. Puedes obtener más información sobre el email marketing en el blog de Shopify.

Para agregar la opción de suscripción al boletín a la página de inicio:

  1. Haz clic en Secciones.

  2. Haz clic en Agregar sección > Boletín.

  3. Introduce un título para la suscripción al boletín en el campo Título. El título predeterminado es "Suscríbete a nuestro boletín".

  4. Introduce un subtítulo para la suscripción al boletín en el campo Subtítulo. El texto predeterminado es "Promociones, nuevos productos y ventas. Directamente a tu bandeja de entrada".

  5. Define el color de fondo para la sección de suscripción al boletín haciendo clic en la paleta de colores de fondo para elegir uno.

  6. Haz clic en Guardar.

video

Puedes agregar un video alojado en YouTube o Vimeo a la página de inicio. Los videos pueden atraer clientes y generar interés por tu negocio.

Para agregar un video a la página de inicio:

  1. Haz clic en Secciones.

  2. Haz clic en Agregar sección > Video.

  3. Introduce un título para el video en el campo Título.

  4. Introduce un enlace para compartir el video en el campo Enlace de video.

    Un enlace para compartir un video de YouTube tiene este formato: https://youtu.be/OTJXAUZY9t0. Puedes aprender cómo copiar el enlace para compartir un video de YouTube en este artículo de ayuda de YouTube.

    Un enlace para compartir un video de Vimeo tiene este formato: https://vimeo.com/281332510. Puedes aprender cómo copiar el enlace para compartir un video de Vimeo en este artículo del Centro de ayuda de Vimeo.

  5. Haz clic en Guardar.

HTML personalizado

En la sección HTML personalizado, puedes usar código HTML para crear contenido personalizado para tu página de inicio. Por ejemplo, puedes usar HTML para dar formato a bloques de texto, crear tablas o insertar contenido de un sitio web externo.

Agregar una sección de HTML personalizado a tu página de inicio

  1. Haz clic en Agregar sección.

  2. Haz clic en HTML personalizado y luego haz clic en Seleccionar.

  3. Haz clic en HTML personalizado e introduce el código HTML que desees agregar a tu página de inicio.

  4. Haz clic en Guardar.

Puedes usar la configuración del tema para personalizar los colores y la tipografía en tu tienda online. También puedes configurar enlaces a tus cuentas de redes sociales, editar la configuración de tu carrito y agregar un favicon.

Pop incluye la siguiente configuración de tema:

  • Colores
  • Tipografía
  • Favicon
  • Página del carrito
  • Redes sociales
  • Pantalla de pago

Colores

Puedes elegir los colores de las distintas partes de tu tienda online.

Personalizar tu configuración de color

  1. Haz clic en Configuración del tema.
  2. Haz clic en Colores.
  3. Para abrir el selector de color, haz clic en la muestra de colores para el color del tipo de contenido que deseas cambiar. En el área Seleccionados recientemente se muestran los colores que has seleccionado recientemente para tu tema. En el área Utilizados actualmente se muestran los colores que estás usando actualmente en otras partes de tu tema.

    Para establecer un código de color hexadecimal específico, haz clic en el campo de texto para introducir el color.

    Para definir el color como transparente, elimina el valor del código hexadecimal del campo de texto.

  4. Haz clic en Guardar.

Tipografía

Puedes definir el estilo y el tamaño de la fuente del texto en tu tienda online. Puedes elegir una fuente de sistema o una personalizada.

Se recomienda que uses fuentes de sistema en tu tienda. Al usar fuentes de sistema se evita que se descarguen fuentes nuevas en la computadora de tu cliente, lo que puede afectar negativamente la velocidad de carga de tu tienda. La fuente que se muestra en la computadora del cliente depende de su sistema operativo. Más información sobre fuentes de sistema.

Personalizar tu configuración de tipografía

  1. Haz clic en Configuración del tema.

  2. Haz clic en Tipografía.

  3. Para cada tipo de texto, haz clic Cambiar para usar el selector de fuente.

  4. Explora las fuentes utilizando el campo de búsqueda o haciendo clic en Cargar más.

    Para ver todas las fuentes disponibles, consulta la biblioteca de fuentes de Shopify.

  5. Haz clic en el nombre de la fuente que deseas actualizar.

  6. Para cambiar la fuente a un estilo diferente, haz clic en el nombre del estilo de fuente actual y luego selecciona un nuevo estilo de fuente en el menú desplegable.

  7. Haz clic en Seleccionar.

  8. Haz clic en Guardar.

Redes sociales

Puedes agregar botones de redes sociales para tus productos y artículos de blog, y enlaces a tus redes sociales.

Para personalizar la configuración de redes sociales:

  1. Haz clic en Configuración del tema.

  2. Haz clic en Redes sociales.

  3. Para subir una imagen para compartir en redes sociales, en el área Imagen para compartir en redes sociales, haz clic en Seleccionar imagen o Explorar imágenes gratis.

  4. Para agregar enlaces a tus redes sociales, en el área Cuentas de redes sociales, introduce los enlaces a tus cuentas en los campos correspondientes. Introduce enlaces completos, como https://instagram.com/shopify, o https://twitter.com/shopify.

    Los enlaces a tus cuentas de redes sociales aparecen en el pie de página de tu tienda online.

  5. Para agregar botones de redes sociales a tus productos y entradas en blog, en el área Opciones de compartir en redes sociales, marca cualquiera o todas las casillas.

    Puedes agregar los siguientes botones para compartir:

- Compartir en Facebook - Compartir en Twitter - Publicar en Pinterest (no disponible para blogs)

  1. Haz clic en Guardar.

Agregar submenús a la barra lateral

Para agregar menús desplegables a tu Menú principal, deberás crear menús en tu Página de navegación. Este artículo te guiará a través de ese proceso.

Tamaño óptimo del logo de la tienda

Un logo proporcionalmente compacto se verá mejor en el tema Pop, ya que éste muestra tu logo en una barra lateral. Los logos tipo banner, con un ancho grande y una altura relativamente pequeña, no se verán bien en ese tema.

El ancho máximo para tu logo es de 450 píxeles, y la altura máxima es de 200 píxeles. El archivo de logo que cargaste se redimensionará para que se ajuste a dichas restricciones.

El formato ideal es PNG.

Reduce el espacio en blanco alrededor del logo de la barra lateral

Antes de eliminar cualquier relleno añadido por el tema Pop encima y debajo de tu logo, es extremadamente importante recortar cualquier relleno que pueda provenir de la imagen como tal. Debes recortar el espacio negativo o los píxeles transparentes que rodean el gráfico del logo, antes de subir tu archivo a Shopify.

Aquí hay un logo con mucho espacio negativo a su alrededor:

Aquí está el mismo logo cuando se recorta — una vez recortado todo el espacio negativo a su alrededor:

A continuación, se muestra el logo que no está recortado usado en el tema Pop:

A continuación, se muestra el logo recortado cuando se utiliza en el tema Pop:

Una vez que hayas cargado un logo recortado en los recursos del tema, puedes ajustar el ancho de la barra lateral accediendo al editor de temas. En la sección Encabezado y navegación, edita el valor "Tamaño > Ancho del Menú del Escritorio" a tu gusto.

Como medida final no compatible, si deseas reducir el relleno que está por encima y debajo de tu logo, sigue estos pasos:

  1. En Recursos, haz clic en timber.scss.liquid para abrir la hoja de estilo de tu tema en el editor de código en línea o ve a esta URL.

  2. En la parte inferior del archivo, agrega esto:

``sass {% comment %} La siguiente función de consulta de elementos multimedia produce esto: pantalla @medios y (min-ancho: 1025px) {...} La barra lateral solo se muestra cuando el ancho > 1025 píxeles. {% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. Guarda tu archivo.

Editar la configuración de la página del producto

En la sección de la Página de producto, puedes agregar o eliminar los elementos siguientes:

  • La marca del producto o el proveedor
  • Ampliar imagen
  • Productos relacionados
  • Selector de cantidad
  • Botón de pago dinámico
  • Íconos de redes sociales

Para editar la configuración de las páginas de productos:

  1. En el menú desplegable de la barra superior, selecciona Páginas de productos.

  2. Haz clic en Secciones.

  3. Haz clic en Página de producto.

  4. Para mostrar la marca o el proveedor del producto, marca Mostrar proveedor del producto. Para que se muestre una marca o un proveedor, debes agregar un proveedor al producto.

  5. Para que tus clientes puedan ampliar las imágenes de los productos pasando el mouse por encima, marca Habilitar zoom de imagen.

  6. Para mostrar una selección de productos relacionados en la parte inferior de la página, marca Mostrar productos relacionados. La colección a la que pertenece el producto determina los productos relacionados que se muestran. Para que los productos relacionados se muestren, debes crear una colección para el producto o agregarlo a una colección. Si el producto no es parte de una colección, no se mostrarán productos relacionados.

  7. Para mostrar un selector de cantidad, marca Mostrar selector de cantidad.

  8. Para mostrar un botón de pago dinámico, marca la casilla Mostrar botón de pago dinámico.

  9. Para mostrar los íconos de redes sociales, marca Habilitar compartir productos.

  10. Haz clic en Guardar.

Los mejores tipos de imágenes de producto para Pop

Las fotos de mayor resolución se verán más pulidas y profesionales en el tema Pop, por lo que las imágenes deben tener al menos un formato de 1024 píxeles de ancho por 1024 píxeles de alto. Cuando sea necesario, las imágenes se reducirán automáticamente, es decir que cuanto mayor sea la calidad, mejor.

Las fotos de mayor resolución serán especialmente importantes si usa la función Zoom de la imagen, que puedes habilitar en el editor de temas en la sección Páginas del producto.

Idealmente, las imágenes destacadas de tus productos compartirán la misma relación de ancho/alto para verse mejor en las páginas de colección.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis