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 Usa el editor de temas para personalizar tu tema. La barra de herramientas del editor de temas está dividida en Secciones y Configuraciones de tema.
La barra de herramientas del editor de temas que muestra las Secciones y la Configuración de tema
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.

Secciones Las secciones son bloques de contenido personalizables que determinan el diseño de tu tienda online. Cada tema incluye secciones estáticas y secciones dinámicas. ### Secciones estáticas Las secciones estáticas están siempre en lugares específicos en tu tienda online. Puedes editar secciones estáticas, pero no puedes reorganizarlas ni eliminarlas. Cada tipo de página de tu tienda online tiene diferentes secciones estáticas.

Pop incluye las siguientes secciones estáticas:

  • Logotipo 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, and 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
  • Iconos 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 iconos 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 marketing por correo electrónico. Puedes obtener más información sobre el marketing por correo electrónico 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. Ubica Pop y haz clic en Personalizar.

  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. Ubica Pop y haz clic en Personalizar.

  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. Ubica Pop y haz clic en Personalizar.

  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 de carrito
  • Redes sociales
  • Pantalla de pago

Colores

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

  1. Ubica Pop y haz clic en Personalizar.
    1. Haz clic en Configuración de tema. 2. Haz clic en Colores. 3. Para cada tipo de contenido, haz clic en la muestra de color para usar el selector de color:
      El selector de color en el editor de temas
      - 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 fijar el color en transparente, haz clic en Ninguno. 4. Haz clic en Guardar.

Tipografía

Puedes elegir la tipografía del texto en tu tienda online.

Pasos

  1. Haz clic en Personalizar junto a ****.

  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:

    El botón 'Cambiar' en 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 :

    Una selección de grosores de fuente disponible en el selector de fuente

  8. Haz clic en Guardar.

Redes sociales

Puedes agregar botones de redes sociales para tus productos y publicaciones de blog, y enlaces a tus redes sociales.

Para personalizar la configuración de redes sociales:

  1. Ubica Pop y haz clic en Personalizar.

  2. Haz clic en Configuración del tema.

  3. Haz clic en Redes sociales.

  4. Para cargar 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 gratuitas.

  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 - Tuitear 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 logotipo de la tienda

Un logotipo proporcionalmente compacto se verá mejor en el tema Pop, ya que éste muestra tu logotipo en una barra lateral. Los logotipos 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 logotipo es de 450 píxeles, y la altura máxima es de 200 píxeles. El archivo de logotipo que cargaste se redimensionará para que se ajuste a dichas restricciones.

El formato ideal es PNG.

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

En primer lugar, para hacer que tu logotipo 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 logotipo antes de subir tu archivo a Shopify.

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

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

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

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

Una vez que te asegures de que tu logotipo 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 logotipo. Como resultado, tu logotipo 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 logotipo 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 logotipo antes de subir tu archivo a Shopify.

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

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

A continuación, se muestra el logotipo con el espacio negativo cuando se sube al tema Pop:

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

Una vez que te asegures de que tu logotipo 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 logotipo. Como resultado, tu logotipo 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 logotipo de la barra lateral

Antes de eliminar cualquier relleno añadido por el tema Pop encima y debajo de tu logotipo, 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 logotipo, antes de subir tu archivo a Shopify.

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

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

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

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

Una vez que hayas cargado un logotipo 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 logotipo, sigue estos pasos:

  1. Busca la plantilla que deseas editar y haz clic en Acciones > Editar código.

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

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

``sass {% comment %} La siguiente función de consulta de medios 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
  • Iconos 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 iconos 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