Post Top Ad

Your Ad Spot

miércoles, 26 de agosto de 2020

Cómo editar el tema de Shopify

¿Busca una forma de darle a su sitio web un aspecto único? ¿Quieres saber cómo editar un tema de Shopify? Lea el artículo para descubrir cómo cambiar colores, fuentes, íconos de redes sociales, crear nuevas secciones de Shopify (bloques en PageBuilder) y nuevas plantillas. Aquí también aprenderá cómo personalizar una página de pago y agregar un producto.
Cómo editar el tema de Shopify
Cómo crear nuevas secciones de Shopify (bloques en PageBuilder)
Cómo crear nuevas plantillas de Shopify
Cómo crear una página de pago de Shopify
Cómo agregar un producto a Shopify

Cómo editar el tema de Shopify

Si decides crear tu propio tema, debes registrarte en el servicio Shopify y luego configurar tu propia tienda siguiendo las instrucciones.
Una vez que ingrese la información básica, como el nombre de la tienda, la moneda, el país y otros, puede comenzar a personalizar un tema estándar o usar el nuestro. Si elige la segunda opción (nuestro tema), vaya a la Tienda en línea -> Temas .
Cómo editar el tema de Shopify y agregar nuevas secciones de Shopify
Haga clic en Cargar tema y seleccione el archivo con nuestro tema. Ahora puedes personalizar nuestro tema y luego elegirlo como el principal.
Aquí demostramos cómo puede editar el tema de Shopify en el ejemplo del  tema FoodStore de BelVG . Su tema principal es el estándar. La personalización de temas creados por otros desarrolladores puede diferir ligeramente.
editar tema de Shopify
Para comenzar a personalizar el tema, debe hacer clic en el botón Personalizar . Abrirá el generador de páginas con la página principal de su tienda.
Para cambiar las imágenes de su tema, debe hacer clic en Configuración del tema . Abre los campos donde puede cambiar las imágenes.
Personalización del tema de Shopify

Las imágenes incluyen:

  • Color (encabezado y enlaces, texto del cuerpo, precio, color de los botones, color de los campos, superposiciones de imágenes y fondo de la página).
personalizar el tema de Shopify
  • Fuentes (familia de fuentes y tamaño de fuente para encabezado, botones y texto del cuerpo).
Cómo editar el tema de Shopify - fuentes
  • Redes sociales . Aquí puedes especificar enlaces a tu tienda en redes sociales. Los iconos de estas redes aparecerán en el pie de página. Además, puedes indicar redes sociales para compartir productos.
cómo editar el tema de Shopify - redes sociales
  • Favicon . Aquí puede cambiar o agregar el favicon de su sitio.
cómo editar el tema de Shopify - favicon
  • Para cambiar la visualización del encabezado, vaya a Sección y seleccione el bloque Encabezado . En este bloque, puede agregar un logotipo, cambiar su ubicación y ajustar el tamaño del logotipo. Además, en este bloque puede elegir qué menú mostrar en el encabezado.
cómo editar el tema de Shopify - encabezado
  • Para cambiar el tipo de pie de página, vuelva a la Sección y seleccione Pie de página . En este bloque puede elegir si desea mostrar los íconos de pagos, el idioma y la selección de moneda. También puede cambiar el nombre de los bloques y elegir el menú que se mostrará en el pie de página.
cómo editar el tema de Shopify - pie de página
Regrese a la Sección para modificar el contenido de la página principal y otras. Puede mover bloques en esta sección o, haciendo clic en el bloque, cambiar el contenido del bloque.
cómo eidt el tema de Shopify - secciones de Shopify
Por ejemplo, seleccione el bloque Llamada a acciones . En este bloque, puede simplemente seleccionar los parámetros, como la imagen, el color de fondo, el texto del título, el texto del bloque, el texto del botón y un enlace cuando se presiona. Con manipulaciones tan simples, puede agregar contenido a su sitio.
cómo editar el tema de Shopify - llamada a la acción
Para agregar un nuevo bloque a la página, debe volver a la sección con todos los bloques y seleccionar Agregar sección . Aparecerá una lista de bloques que se pueden usar en su tema.

Cómo crear nuevas secciones de Shopify (bloques en PageBuilder)

Creemos un nuevo bloque, idéntico al llamado a la acción pero con la capacidad de cambiar el color del texto del encabezado. Para crear un nuevo bloque, vaya a Tienda en línea -> Temas -> Acciones -> Editar código en el panel de administración. Haga clic en el botón Agregar una nueva sección e ingrese un nombre para una nueva plantilla.
cómo agregar nuevas secciones de shopify pagebuilder
Luego, debe copiar el código del bloque de llamadas a acciones en nuestro archivo.
agregar secciones de Shopify
Primero, necesitamos agregar un selector de color para el título en este bloque. Para hacer esto, debe agregar el siguiente fragmento de código a nuestra plantilla:

Si queremos aplicar la configuración al título, necesitamos agregar una clase única a la etiqueta h1:
<h1 class="little-image-text--tittle color-text-{{ section.id }}">{{ section.settings.text-box }}</h1>
Para usar la variable de color exactamente con el título que cambiamos, necesitamos agregar el siguiente código a la parte HTML:

Para que nuestro bloque sea único, cambie su nombre. Hará que sea mucho más fácil encontrar:
personalización del tema de Shopify
Como resultado, el código de nuestra plantilla se verá así:

Para agregar nuestro bloque al sitio, debe abrir la página necesaria en el modo Personalizar . Haga clic en Agregar secciones y seleccione el bloque. Agrega la información principal y observa que el texto del título cambia según el que hayas seleccionado.
cómo agregar secciones de Shopify - personalización

Cómo crear nuevas plantillas de Shopify

Para crear o editar plantillas de página, abra la pestaña Plantilla en el editor de código. En esta sección, seleccione un archivo existente o cree uno nuevo. Por ejemplo, cree una nueva plantilla de página de Colección con texto estático debajo del título. Para hacer esto, cree un archivo llamado collection.width-static-text.liquid . En este archivo, la sección de colección estándar se mostrará de forma predeterminada.
{% comment%}
El contenido de la plantilla collection.liquid se puede encontrar en /sections/collection-template.liquid
{% endcomment%}
{% section 'collection-template'%}
Necesita crear su nueva sección para mostrar el texto estático. Para hacer esto, cree una nueva sección llamada collection-template-width-text , copie el código de la sección estándar de la colección en esta sección y edítelo.
Cambie la ruta al archivo de sección en la nueva plantilla de colección:
{% comment%}
El contenido de la plantilla collection.liquid se puede encontrar en /sections/collection-template.liquid
{% endcomment%}
{% section 'collection-template-width-section'%}
Para aplicar esta configuración a una sección específica, vaya a Productos -> Colecciones  en el panel de administración. Seleccione la colección necesaria y cambie la plantilla de nuestra página a la creada anteriormente. Guarde todos los cambios. Y ahora la página de la categoría seleccionada se verá así:
Shopify personalización del tema - secciones

Cómo crear una página de pago de Shopify

Para cambiar las imágenes de la página de pago, abra la página del carrito en el modo PageBuilder . La versión básica de Shopify proporciona varias configuraciones para cambiar las imágenes. Para agregar sus bloques a la página de pago o agregar sus propios estilos CSS, debe operar la versión Shopify Plus .
El plan básico de Shopify proporciona las siguientes configuraciones para cambiar las imágenes de pago:
  • Agrega un logo.
  • Cambiar el fondo de las columnas.
  • Cambie la familia de fuentes para el título y el texto.
  • Cambia el color del texto, botones y errores.
cómo editar el tema de Shopify - página de pago
cómo editar el tema de Shopify - Shopify Chechout

Cómo agregar un producto a Shopify

Para agregar un producto al catálogo, abra la pestaña Productos -> agregar producto en el panel de administración. Verá la página donde puede ingresar la información básica sobre el producto.
cómo agregar un producto a Shopify
cómo agregar un producto a Shopify en admin
Además de eso, puede crear productos combinados con diferentes precios para cada característica.
Shopify personalización: agregue productos a Shopify
También puede cambiar el título y la descripción para SEO.
cómo editar el título y la descripción de la página de Shopify
Como resultado, la página con el producto creado se ve así:
crear producto en shopify

Envolviendolo

Ahora, puedes desarrollar y diseñar profesionalmente tu tema de Shopify siguiendo nuestra guía paso a paso. Hicimos todo lo posible para mantener toda la información y los pasos simples, pero si aún necesita ayuda o desea confiar en un desarrollador dedicado, el equipo de BelVG está aquí para ayudarlo. Contáctenos para obtener la solución perfecta para su negocio en línea.
¿Tiene alguna pregunta? ¡No dudes en preguntar cualquier cosa en los comentarios a continuación!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas