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 página del carrito de la tienda online. Los cambios que realices en la configuración del tema se aplicarán a toda la tienda online.
En esta página
- Logo
- Colores
- Tipografía
- Diseño
- Animaciones
- Bordes y sombras
- Botones
- Botones de variantes
- Entradas
- Tarjetas
- Contenedores de contenido
- Elementos multimedia
- Menús desplegables y ventanas emergentes
- Cajones
- Emblemas
- Información de marca
- Redes sociales
- Comportamiento de búsqueda
- Formato de moneda
- Carrito
- CSS personalizado
- Estilo del tema
- Deshacer y rehacer cambios
Logo
Puedes agregar un logo para tu negocio a tu tienda online. Tu logo se muestra en los siguientes lugares:
- encabezado en todas las páginas
- página de contraseña
Personalizar el logo
Las imágenes de logos tienen un ancho máximo de 300 px.
Pasos:
Agregar un favicon
Puedes agregar un ícono de favoritos o un favicon, que puedes usar para ayudar con la promoción de marca de 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 la tienda online cuando tu sitio web esté marcado como favorito
Pasos:
Colores
Puedes crear y personalizar hasta 21 esquemas de colores únicos y aplicarlos a diferentes secciones en toda la tienda online. Obtén más información sobre opciones, esquemas y degradados de colores.
Pasos:
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.
Considera usar las fuentes del sistema en la tienda, ya que están instaladas en la computadora del usuario. Su uso evita la descarga de fuentes nuevas en la computadora del cliente, lo que puede afectar negativamente la velocidad de carga de la tienda. La fuente que se muestra en la computadora del cliente depende del sistema operativo.
Personalizar los tipos de fuente
Consulta la biblioteca de fuentes de Shopify para ver una lista de las fuentes disponibles.
Pasos
Personaliza los tamaños de fuente
Puedes establecer los tamaños de fuente predeterminados para el texto de los títulos y el cuerpo con la configuración del tema Tipografía.
El tamaño de fuente mínimo es 100% y el máximo es 150%. Cada incremento de la escala aumenta el tamaño de fuente en un 5%. La configuración predeterminada es 100%.
Pasos:
Diseño
Puedes establecer el ancho máximo en el que se mostrará la tienda online, así como el espacio vertical y horizontal entre las secciones.
Pasos:
Animaciones
Las animaciones te permiten agregar movimiento e interés visual a la tienda online. Puedes activar una animación con efecto de fundido de entrada que muestre las secciones de la tienda al desplazar el cursor y un efecto de movimiento para las tarjetas y botones.
Pasos:
Bordes y sombras
Puedes ajustar los bordes y las sombras de algunos tipos de contenido interactivo, como los cajones, botones, botones de variantes o entradas de cantidad del producto.
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 del elemento.
Las opciones que puedes personalizar para las sombras son las siguientes:
- Opacidad, que cambia la visibilidad de la sombra del elemento. Con una opacidad de sombra de 0%, la sombra se elimina por completo del elemento.
- Los controles deslizantes de rango Desalineación horizontal y vertical, que mueven la ubicación de la sombra alrededor del elemento.
- El control deslizante de rango Difuminar, que cambia la opacidad de la sombra del elemento.
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.
Pasos:
Botones de variantes
Los botones de variantes te permiten mostrar las 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. Puedes personalizar cómo se muestran los botones de variantes en la tienda online.
Pasos:
Entradas
Las entradas son áreas interactivas que requieren que los clientes especifiquen información, por ejemplo, un selector de cantidad, un formulario de suscriptor de correo electrónico o notas del carrito. Puedes ajustar la apariencia de las entradas de la tienda online.
Pasos:
Tarjetas
La configuración de las tarjetas de producto, tarjetas de colección y tarjetas de blog te permite personalizar el estilo de cada tipo de tarjeta cuando se muestran en las secciones de la página. Puedes cambiar el color, la alineación, el relleno de la imagen, los bordes y las sombras de estos tres tipos de tarjetas de sección.
Pasos:
Contenedores de contenido
Los contenedores se utilizan para el elemento 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 la tienda online.
Pasos:
Elementos multimedia
Los elementos multimedia son el componente visual de las secciones, por ejemplo, los elementos multimedia de productos o una imagen en la sección Imagen con texto. Puedes agregar bordes y sombras a los elementos multimedia.
Pasos:
Menús desplegables y ventanas emergentes
Puedes ajustar la apariencia de los menús desplegables de navegación, los modales emergentes y las ventanas emergentes del carrito en la tienda online.
Pasos:
Cajones
Los cajones son contenedores ocultos e interactivos que se muestran cuando los tocas o haces clic en ellos, como las opciones de un filtro de colección o menú de navegación desplegable. Puedes personalizar el borde y la sombra de los cajones de la tienda online.
Pasos:
Emblemas
Los emblemas Oferta y Agotado se agregan automáticamente a las imágenes del producto cuando bajas el precio o cuando el recuento de inventario llega a 0. Puedes ajustar la posición, la forma y el color de los emblemas Oferta y Agotado.
Los emblemas Página y Blog se muestran en los resultados de búsqueda relevantes. Puedes personalizar la posición y la forma de los emblemas Página y Blog, pero no puedes cambiar su color.
Pasos:
Información de marca
Puedes incluir información sobre la marca en la tienda online. Después de completar los siguientes pasos, puedes agregar el bloque Información de la marca en el pie de página de la tienda online.
Pasos:
Redes sociales
Puedes agregar enlaces a tus cuentas de redes sociales que se muestran en el pie de página de la tienda online.
Pasos:
Comportamiento de búsqueda
La tienda online incluye la búsqueda predictiva, que muestra sugerencias 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 la 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.
Para más información sobre cómo funcionan las sugerencias de búsqueda, consulta Búsqueda predictiva.
Puedes personalizar cómo se muestran las sugerencias de búsqueda a los clientes.
Pasos:
Formato de moneda
Puedes elegir que se muestre el código de moneda con los precios de los productos.
Pasos:
Carrito
Puedes cambiar el estilo del carrito en la tienda online. Cuando un cliente agrega un producto de la tienda a su carrito, este último se puede mostrar como un carrito lateral una página o una notificación emergente. Para mantener al cliente en la página de producto, utiliza la opción de carrito lateral o notificación emergente. Para llevar al cliente a la página del carrito, usa la opción de página. Cuando el carrito del cliente está vacío, puedes mostrar una colección destacada en el carrito lateral.
Pasos:
CSS personalizado
La sección CSS personalizado te permite introducir tu propio código CSS, por ejemplo, para personalizar la apariencia de los botones de la tienda online aparte de la configuración predeterminada que está disponible o a fin de aplicar un estilo único a elementos de texto específicos.
El CSS personalizado en la configuración del tema afecta a todas las páginas de la tienda online, excepto la pantalla de pago.
Obtén más información sobre cómo agregar CSS personalizado al tema.
Estilo del tema
Un estilo de tema es una colección de opciones de configuración elegidas por un diseñador de temas. Puede aplicar un estilo del tema a la tienda para darle una apariencia perfeccionada. Todos los temas tienen un estilo aplicado de forma predeterminada. Las demás opciones de estilo que tengas dependerán del tema que utilices.
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:
Deshacer y rehacer cambios
El botón Deshacer revierte el cambio más reciente y el botón Rehacer vuelve a agregar un cambio que deshiciste. si haces clic en el botón Deshacer más de una vez, continuará deshaciendo el trabajo, con un cambio a la vez. Los botones Deshacer y Rehacer se encuentran en la barra de herramientas del editor de temas.
Haz clic en el botón Deshacer para revertir los cambios que realizaste en el tema, incluidos los siguientes ejemplos:
- agregar, reorganizar y eliminar secciones
- aplicar colores, fuentes y otras opciones de configuración del tema;
- Restablecer un estilo del tema