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 .

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.

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.

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

• Fuentes (familia de fuentes y tamaño de fuente para encabezado, botones y texto del cuerpo).

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

• Favicon . Aquí puede cambiar o agregar el favicon de su sitio.

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

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

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.

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.

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.

Luego, debe copiar el código del bloque de llamadas a acciones en nuestro archivo.

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:

{          "type": "color",   // type selector          "id": "title_color",  //id this block          "label": "Title color", // label on the page builder          "default": "#333333" //default setting       },

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:

<style> .color-text-{{ section.id }} { color: {{ section.settings.title_color }}; } </style>

Para que nuestro bloque sea único, cambie su nombre. Hará que sea mucho más fácil encontrar:

Como resultado, el código de nuestra plantilla se verá así:

<div class="little-image-text--block" style="background-color:{{section.settings.background_color }}">   <div class="little-image-text--block-wrapper page-width feature-row">     <div class="little-image-text--image-wrapper">        {{ section.settings.image_little | img_url: '600x' | img_tag }}    </div>     <div class="little-image-text--text-wrapper">       <h1 class="little-image-text--tittle color-text-{{ section.id }}">{{ section.settings.text-box }}</h1>       <p class="little-image-text--text">{{ section.settings.text }}</p>       <a href="{{ section.settings.link }}" style="color:{{section.settings.color_btn }};" class="btn little-image-text--btn">{{ section.settings.linktext }}</a>    </div>   </div> </div>   <style> .color-text-{{ section.id }} { color: {{ section.settings.title_color }}; } </style>   {% schema %} {   "name": "Call to Actions",   "class": "index-section index-section--flush",   "settings": [       {         "type": "image_picker",         "id": "image_little",         "label": "Image"           },       {          "type": "color",          "id": "background_color",          "label": "Background color",          "default": "#ffffff"       },       {         "id": "text-box",         "type": "text",         "label": "Heading",         "default": "Title"       },       {          "type": "color",          "id": "title_color",          "label": "Title color",          "default": "#333333"       },       {         "id": "text",         "type": "richtext",         "label": "Add custom text below",         "default": "<p>Add your text here</p>"       },   {       "id": "link",       "type": "url",       "label": "Button link"       },       {       "id": "linktext",       "type": "text",       "label": "Button text",       "default": "Click Here"       }   ],   "presets": [     {       "name": "Call actions width color",       "category": "BelVG"     }   ] } {% endschema %}

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 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í:

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

Además de eso, puede crear productos combinados con diferentes precios para cada característica.

También puede cambiar el título y la descripción para SEO.

Como resultado, la página con el producto creado se ve así:

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!