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. La barra de herramientas del editor de temas está dividida en Secciones y Configuración detema.

Puedes usar secciones para modificar el contenido y el diseño de las diferentes páginas en tu tienda. Puedes usar la configuración del tema para personalizar las fuentes y colores de tu tienda y hacer cambios en tus enlaces a redes sociales y configuraciones de pago.

Las secciones son bloques de contenido personalizables que determinan el diseño de las diferentes páginas en tu tienda online.

  • Las secciones de inicio incluyen funciones, como una presentación de diapositivas o la suscripción a un boletín, que puedes agregar, reorganizar o eliminar. Puedes tener hasta 25 secciones en tu página de inicio.

  • Cada tipo de página tiene sus propias secciones. Por ejemplo, la sección de página de producto determina el diseño de cada página de producto de tu tienda online.

  • Las secciones de página están siempre en lugares específicos en tu tienda online. Puedes personalizarlas, pero no puede reorganizarlas o eliminarlas.

  • Cada tema incluye secciones fijas, tales como el encabezado y pie de página que se muestran en cada página de tu tienda online.

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.

La sección del boletín en un sitio web. Hay un campo para que los clientes introduzcan una dirección de correo electrónico y un botón que dice

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

  1. Haz clic en Personalizar junto a Pop.

  2. Haz clic en Secciones.

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

  4. 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".

  5. 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".

  6. 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.

  7. 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 Personalizar junto a Pop.

  2. Haz clic en Secciones.

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

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

  5. 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.

  6. 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 desde un sitio web externo.

Para agregar HTML personalizado a tu página de inicio:

  1. Haz clic en Personalizar junto a Pop.

  2. Haz clic en Secciones.

  3. Haz clic en Agregar sección.

  4. En el área de Diseño avanzado, haz clic en HTML personalizado > Agregar.

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

  6. Haz clic en Guardar.

Configuración del tema 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 de compras
  • 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 Personalizar junto a Pop.

  2. Haz clic en Configuración del tema.

  3. Haz clic en Colores.

  4. Para cada tipo de contenido, haz clic en la muestra de color para usar el selector de color. En el área Seleccionado recientemente se muestran los colores que has seleccionado recientemente para tu tema. En el área Actualmente en uso se muestran los colores que estás usando actualmente en otras partes de tu tema.

    Para dejar en color en transparente, haz clic en Ninguno.

  5. Haz clic en Guardar.

Tipografía

Puedes configurar el estilo y tamaño de la fuente para el texto de tu tienda online.

Personalizar tu configuración de tipografía

  1. Haz clic en Personalizar junto a Pop.

  2. Haz clic en Configuración del tema.

  3. Haz clic en Tipografía.

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

  5. 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.

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

  7. Para cambiar la fuente a un estilo diferente, como negrita o cursiva, haz clic en Regular. A continuación, haz clic en el estilo que deseas usar y luego 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 Personalizar junto a Pop.

  2. Haz clic en Configuración del tema.

  3. Haz clic en Redes sociales.

  4. 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.

  5. 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.

  6. 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.

Haz que tu logo sea más grande en dispositivos móviles

En primer lugar, para hacer que tu logo sea más grande en cualquier diseño, es muy importante recortar todo 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 te asegures de que tu logo no se redujo debido al espacio negativo que contiene, puedes ajustar la altura de tu encabezado en dispositivos móviles para ampliar el espacio de tu logo. Como resultado, tu logo será más grande.

Ve al editor de temas y, en la sección Encabezado y navegación, aumenta el valor "Tamaño > de la Altura del Menú Móvil".

Haz tu logo más grande en la barra lateral

En primer lugar, para hacer que tu logo sea más grande en cualquier diseño, es muy importante recortar todo 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 con el espacio negativo cuando se sube al tema Pop:

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

Una vez que te asegures de que tu logo no se redujo debido al espacio negativo que contiene, puedes ajustar el ancho de tu barra lateral de manera que tengas más el espacio para ampliar tu logo. Como resultado, tu logo será más grande.

Ve al editor de temas y, en la sección Encabezado y navegación, aumenta el valor de "Tamaño > Ancho del menú del Escritorio".

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.

¿Estas listo(a) para comenzar a vender con Shopify?

Pruébala gratis