Configuración del tema

Puedes usar la configuración del tema para realizar cambios en la tipografía, los colores, los enlaces a redes sociales y la configuración de la pantalla de pago de tu tienda online.

Puedes usar la configuración del tema para realizar cambios en la tipografía, los colores, los enlaces a redes sociales y la configuración de la pantalla de pago de tu tienda online. Los cambios que realices en la configuración del tema se aplicarán a toda tu tienda online.

Colores

Puedes definir esquemas de colores primarios y secundarios para 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 color para el tipo de contenido cuyo color deseas cambiar.

  4. Haz clic en Guardar.

Para obtener más información sobre las opciones, incluyendo cómo configurar gradientes de color, consulta Esquemas de color.

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.

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 disponibles con el campo de búsqueda o haciendo clic en Cargar más.
  5. Haz clic en el nombre de la fuente que deseas usar y luego haz clic en Seleccionar.
  6. Haz clic en Guardar.

Personaliza los tamaños de fuente

Puedes establecer los tamaños de fuente predeterminados para el texto del encabezado y cuerpo dentro de la configuración del tema de tipografía.

Pasos:

  1. Haz clic en Configuración del tema > Tipografía.
  2. Para cambiar el tamaño de fuente predeterminado de los títulos, usa la escala de tamaño de fuente para seleccionar el tamaño de fuente predeterminado. El tamaño de fuente mínimo es 100%, y el tamaño de fuente máximo es 150%. Cada incremento de la escala aumenta el tamaño de fuente en un 5%. La configuración predeterminada es 100%.
  3. Para cambiar el tamaño predeterminado de la fuente del texto del cuerpo, utiliza la escala de tamaño de fuente para seleccionar el tamaño de fuente predeterminado. El tamaño de fuente mínimo es 100 %, y el máximo es 130 %. Cada incremento de la escala aumenta el tamaño de fuente en un 5 %. La configuración predeterminada es 100 %.
  4. Haz clic en Guardar.

Diseño

El diseño te permite establecer el ancho máximo en el que se mostrará tu tienda online.

  1. Haz clic en Configuración de tema > Diseño.
  2. Usa el control deslizante de rango para elegir entre un ancho de página de 1000 px o 1600 px. La configuración predeterminada es de 1600 px.
  3. [Opcional] El control deslizante de rango permite agregar espacio vertical entre las secciones, hasta un máximo de 100 px entre una y otra sección.
  4. [Opcional] Si tienes un diseño de cuadrícula, usa los controles deslizantes de rango de espacio horizontal y vertical para agregar espacio entre el contenido de la cuadrícula. Horizontalmente, podrás agregar un máximo de 40 px de espacio a tus filas, mientras que, en sentido vertical, un máximo de 40 px de espacio a tus columnas.
  5. Haz clic en Guardar.

Bordes y sombras

Puedes ajustar los bordes y las sombras de algunos tipos de contenido interactivo, como los cajones, botones, variantes o entradas de valores de cantidad.

Las opciones que puedes personalizar para los bordes son las siguientes:

  • Grosor, que cambia el contorno del artículo.
  • Opacidad, que define la visibilidad del contorno del artículo.
  • Radio de esquina, que redondea las esquinas de los artículos.

Las opciones de las que dispones para las sombras se indican a continuación:

  • Opacidad, que cambia la visibilidad de la sombra del artículo. Con una opacidad de sombra de 0%, la sombra se elimina por completo.
  • Los controles deslizantes de rango de desplazamiento horizontal o vertical mueven la ubicación de la sombra alrededor del artículo.
  • Usa el control deslizante de rango de difuminación para cambiar la opacidad de la sombra del artículo.

Botones

Para personalizar la configuración de los botones de llamada a la acción en tu tienda online, puedes agregar sombras, cambiar el espaciado o la opacidad, y ajustar la forma de los botones.

Ejemplo de tienda online con botón de llamada a la acción

Personalizar botones

  1. Haz clic en Configuración del tema.
  2. Haz clic en Botones.
  3. Usa las escalas deslizantes para cambiar la apariencia del Bordes del botón.
  4. Usa las escalas deslizantes para cambiar la Sombra del botón. Al configurar la opacidad de la sombra al 0% se elimina la sombra.
  5. Haz clic en Guardar.

Botones de variantes

Los botones de variantes te permiten mostrar variantes de un producto en una página de producto o una sección de producto destacado. Los clientes pueden seleccionar la variante que deseen para agregar el producto a su carrito sin necesidad de cambiar de página.

Ejemplo de tienda online con botones de variantes seleccionables

Personalizar botones de variantes

  1. Haz clic en Configuración del tema.
  2. Haz clic en Botones de variantes.
  3. Usa las escalas deslizantes para cambiar la apariencia del Borde del botón de la variante.
  4. Usa las escalas deslizantes para cambiar la Sombra del botón de variante. Al configurar la opacidad de la sombra al 0% se elimina la sombra.
  5. Haz clic en Guardar.

Entradas

Las entradas son áreas interactivas que requieren que los clientes especifiquen información, por ejemplo, un selector de cantidad, un formulario de suscripción de correo electrónico o notas del carrito. Puedes ajustar la apariencia de las entradas de tu tienda online en la configuración del tema.

Ejemplo de tienda online con entrada de cantidad

Personalizar entradas

  1. Haz clic en Configuración del tema.
  2. Haz clic en Entradas.
  3. Usa las escalas deslizantes para cambiar la apariencia del Borde de tu entrada.
  4. Utiliza las escalas deslizantes para cambiar la Sombra de entrada. Al ajustar la opacidad de la sombra en 0% se elimina la sombra.
  5. Haz clic en Guardar.

Tarjetas

Las tarjetas son áreas compartimentadas en secciones que te permiten mostrar varios artículos, como tarjetas de productos, tarjetas de blogs, tarjetas de colecciones o tarjetas de collages. Puedes personalizar la forma, el estilo, el color, la alineación y el relleno de las imágenes en las tarjetas de la sección.

Personalizar tarjetas

  1. Haz clic en Configuración del tema.
  2. Haz clic en Tarjetas.
  3. Usa el menú desplegable para elegir un Estilo de tarjeta.
  4. Agrega un Relleno de imagen con la escala deslizante. Esto agrega espacio alrededor de las imágenes de tu tarjeta.
  5. Usa el menú desplegable para establecer la Alineación de texto para tus tarjetas. Elige entre la izquierda, centrado (predeterminado) o la derecha.
  6. Usa el menú desplegable para seleccionar un Esquema de colores para tus tarjetas.
  7. Usa las escalas deslizantes para cambiar la apariencia del Borde de tu tarjeta.
  8. Usa las escalas deslizantes para cambiar la Sombra de la tarjeta. Al configurar la opacidad de la sombra al 0% se elimina la sombra.
  9. Haz clic en Guardar.

Contenedores de contenido

Los contenedores son la parte de texto de las secciones de contenido, por ejemplo, el cuadro de texto en una presentación de diapositivas, un banner de imagen o las columnas en secciones multicolumna. Puedes personalizar la apariencia de los contenedores de contenido de tu tienda online.

Personalizar contenedores de contenido

  1. Haz clic en Configuración del tema.
  2. Haz clic en Contenedores de contenido.
  3. Utiliza las escalas deslizantes para cambiar la apariencia del Borde del contenedor de contenido.
  4. Usa las escalas deslizantes para cambiar la Sombra del contenedor de contenido. Al configurar la opacidad de la sombra al 0% se elimina la sombra.
  5. Haz clic en Guardar.

Elementos multimedia

Los elementos multimedia son el componente visual de las secciones, por ejemplo, los elementos multimedia de productos o la imagen en las secciones de imagen con texto. Puedes agregar bordes y sombras a tus elementos multimedia.

Personalizar elementos multimedia

  1. Haz clic en Configuración del tema.
  2. Haz clic en Multimedia.
  3. Usa las escalas deslizantes para cambiar la apariencia del Borde de multimedia.
  4. Usa las escalas deslizantes para cambiar la Sombra de multimedia. Al configurar la opacidad de la sombra al 0% se elimina la sombra.
  5. Haz clic en Guardar.

Menús desplegables y ventanas emergentes

Ajusta la apariencia de los menús desplegables de navegación, las ventanas emergentes y las ventanas emergentes del carrito.

Personalizar menús desplegables y ventanas emergentes

  1. Haz clic en Configuración del tema.
  2. Haz clic en Menús desplegables y ventanas emergentes.
  3. Usa las escalas deslizantes para cambiar la apariencia del Borde.
  4. Usa las escalas deslizantes para cambiar la Sombra. Al configurar la opacidad de la sombra al 0% se elimina la sombra.
  5. Haz clic en Guardar.

Cajones

Los cajones son contenedores ocultos e interactivos que aparecen y desaparecen cuando los tocas o haces clic en ellos; por ejemplo, las opciones de un filtro o menú de navegación desplegable.

Personalizar cajones

  1. Haz clic en Configuración del tema.
  2. Haz clic en Cajones.
  3. Usa las escalas deslizantes para cambiar la apariencia del Borde.
  4. Usa las escalas deslizantes para cambiar la Sombra. Al configurar la opacidad de la sombra al 0% se elimina la sombra.
  5. Haz clic en Guardar.

Emblemas

Los distintivos Oferta y Agotado se agregan automáticamente a las imágenes de los productos cuando su precio baja o cuando el número de inventario llega a 0. Puedes ajustar la posición, la forma y el color de tus distintivos.

Ejemplo de tienda online con distintivos de Oferta y Agotado

Los distintivos Página y Blog aparecen en los resultados de búsqueda relevantes. Puedes personalizar la posición y la forma de estos distintivos, pero no el color.

Personalizar distintivos

  1. Haz clic en Configuración del tema.
  2. Haz clic en Emblemas.
  3. Usa el menú desplegable para seleccionar la posición del emblema dentro de las tarjetas del producto. Elige entre arriba a la izquierda, arriba a la derecha, abajo a la izquierda (predeterminada) o abajo a la derecha.
  4. Agrega esquinas redondeadas con la escala deslizante Radio de esquina. Definir el radio de la esquina en 0 px produce emblemas con bordes cuadrados, y aumentar el radio redondea los bordes de los emblemas.
  5. Elige un Esquema de colores para tus emblemas. Puedes configurar un esquema de color alternativo para los artículos agotados.
  6. Haz clic en Guardar.

Íconos

Los íconos son imágenes pequeñas que se pueden agregar a ciertas secciones o bloques. Define el esquema de colores para los íconos en la configuración del tema.

Ejemplo de tienda online con íconos en filas desplegables

Personalizar íconos

  1. Haz clic en Configuración del tema.
  2. Haz clic Íconos.
  3. Usa el menú desplegable para seleccionar el color predeterminado para tus íconos. Para los íconos de la tienda, elige colores en Acento 1, Acento 2, Botón con contorno o Texto.
  4. 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. Los enlaces a tus cuentas de redes sociales aparecen en el pie de página de tu tienda online.

Personalizar tu configuración de redes sociales

  1. Haz clic en Configuración del tema.
  2. Haz clic en Redes sociales
  3. Para agregar enlaces a tus redes sociales, introduce los enlaces a tus cuentas en los campos suministrados en Cuentas. Introduce enlaces completos, como https://instagram.com/shopify o https://twitter.com/shopify.
  4. Haz clic en Guardar.

Comportamiento de búsqueda

Online Store incluye la búsqueda predictiva, que muestra sugerencias de productos cuando los clientes empiezan a escribir en el campo de búsqueda. Las sugerencias de productos pueden ayudar a los clientes a redactar y refinar sus búsquedas, y ofrecen nuevas formas para explorar una tienda online. También permiten a los clientes navegar rápidamente en los resultados sin tener que abandonar su página actual para ver otra lista de resultados de búsqueda.

Puedes personalizar las siguientes configuraciones para la búsqueda:

  • Habilitar sugerencias de productos: habilitar o deshabilitar sugerencias de productos.
  • Mostrar proveedor: mostrar u ocultar proveedores en las sugerencias de productos.
  • Mostrar precio: mostrar u ocultar precios en las sugerencias de productos.

Cambiar la configuración de entrada de búsqueda

  1. Haz clic en Configuración del tema.
  2. Haz clic en Buscar entrada
  3. Usa la configuración para personalizar el comportamiento de búsqueda de la tienda.
  4. Haz clic en Guardar.

Para más información sobre cómo funcionan las sugerencias de productos, consulta Búsqueda predictiva.

Favicon

Puedes agregar un ícono de favoritos o un favicon, que puede ayudar a distinguir tu tienda online. Se muestra un favicon en los siguientes lugares:

  • La pestaña de tu navegador web
  • El historial de tu navegador web
  • Íconos en tu escritorio
  • al lado del nombre de tu tienda online cuando está marcada como favorito

Leer más sobre favicons.

Personalizar tu favicon

  1. Haz clic en Configuración del tema.
  2. Haz clic en Favicon
  3. En el área Imagen de favicon, haz clic en Seleccionar imagen y luego realiza una de las siguientes acciones:

    • Para usar una imagen que ya has subido a tu panel de diálogo de Shopify, haz clic en una imagen para seleccionarla y haz clic en Seleccionar.
    • Para usar una imagen de tu computadora, haz clic en Subir. Elige una imagen en tu computadora y haz clic en Abrir para empezar a subirla. Se seleccionará automáticamente cuando se termine de subir. Haz clic en Seleccionar.
    • Para seleccionar una imagen gratuita, haz clic en Imágenes gratuitas y busca o haz clic en una imagen para seleccionarla.
  4. Agregar texto alternativo a tu imagen de favicon:

    1. Haz clic en Editar texto alternativo.
    2. En la ventana Editar imagen, introduce una breve descripción de la imagen.
    3. Haz clic en Guardar.

Formato de moneda

Puedes elegir que los precios de productos, carritos y pantalla de pagos siempre muestren los códigos de moneda.

  1. Haz clic en Configuración del tema.
  2. Haz clic en Formato de moneda.
  3. Para activar los códigos de moneda, haz clic en la casilla de verificación Mostrar códigos de moneda.
  4. Haz clic en Guardar.

Carrito

Puedes cambiar el estilo del carrito en tu tienda online. Cuando un cliente agrega un producto de tu tienda a su carrito, este puede aparecer como un carrito lateral, una página o una notificación emergente. Cuando el carrito del cliente está vacío, puedes mostrar una colección destacado en el carrito lateral.

Pasos:

  1. Haz clic en Configuración de tema > Carrito.
  2. Usa el menú desplegable para seleccionar un estilo de carrito: lateral, página o notificación emergente.
  3. Opcional: para mostrar el proveedor de los artículos en el carrito de un cliente, haz clic en Mostrar proveedor.
  4. Opcional: para ofrecer a los clientes un área para hacer solicitudes especiales o agregar información adicional de pedidos, selecciona la opción Habilitar nota del carrito.

Si tienes el tipo de carrito configurado como Lateral, puedes mostrar una colección en el carrito lateral. La colección seleccionada solo aparece cuando el carrito está vacío.

Para agregar una colección al carrito lateral, haz clic en Seleccionar colección. Una vez que se haya seleccionado una colección, haz clic en Cambiar para seleccionar otra colección o eliminar la colección del carrito. También puedes hacer clic en Crear colección para crear una nueva colección. Este botón te sacará de la configuración del tema y de la sección de Colecciones de tu panel de control de Shopify.

Pantalla de pago

Esta sección te permite personalizar la pantalla de pago de tu tienda. Consulta Pantalla de pago de Shopify para ver más información sobre la pantalla de pago de tu tienda.

Cambiar los estilos del tema

Un estilo de tema es una colección de ajustes elegidos por un diseñador de temas. Puede aplicar un estilo del tema a tu tienda para darle un aspecto y una apariencia perfeccionados. Todos los temas tienen un estilo de tema aplicado de forma predeterminada. Cuando personalizas una plantilla, la configuración del estilo del tema se reemplaza con tu versión personalizada. Cuando aplicas un estilo a tu tema, cambias los ajustes actuales, como colores y tipografía.

Pasos:

  1. Haz clic en Configuración del tema > Estilos.

  2. En los menús desplegables, selecciona las opciones de estilo del tema. Las opciones disponibles dependen del tema que utilices.

  3. Haz clic en Guardar.

Deshacer y rehacer cambios

El botón Deshacer revierte tu cambio más reciente, y el botón Rehacer reintegra un cambio que deshiciste. Al hacer clic en el botón Deshacer más de una vez, continuará deshaciendo tu trabajo, con un cambio a la vez. Los botones Deshacer y Rehacer se encuentran en la barra de herramientas del editor de temas.

Los botones Deshacer y Rehacer en la barra de herramientas del editor de temas

Haz clic en el botón Deshacer para revertir los siguientes cambios:

  • agregar, reorganizar y eliminar secciones
  • aplicar colores, fuentes y otra configuración en la pestaña Configuración de tema
  • restablecer un estilo de tema.

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

Prueba gratis