A veces por una razón o por otra necesitamos que el aspecto de una de nuestras páginas se vea diferente que al resto de nuestra tienda online en Shopify, por ejemplo a la hora de hacer una landing page queremos cambiar los colores del menú de navegación o cambiar el menú entero, cambiar la imagen del logo o todo aquello que se nos pase por la cabeza.

De una manera muy fácil y en pocos pasos podrás dar un aspecto diferente a las páginas que desees siempre respetando el diseño de las otras páginas, sólo creando un nuevo layout y seleccionándolo en la página que deseamos

Podemos ver que en la página de serigrafía Pulpoensutinta.com he utilizado un color azul para el toolbar dónde aparece la cuenta/carrito etc, también aparece el logo en la cabecera de la página.

shopify-cambiar-layout

En estos momentos sólo necesito cambiar el color del toolbar y cambiar la imagen del logo, si se precisa puedes cambiar todos y cada uno de los elementos que conforman el layout de la página como colores, tipografías, menús etc.

1- Creamos un nuevo layout basandonos en el principal.  Hacemos click en Layouts y en Add a new layout, le ponemos el nombre que deseemos, en este caso hemos llamado al Layout de shopify “aprende-shopify.liquid”

crear-layout-shopify

2- Ahora creamos un nuevo Template de Página, en este caso lo he llamado “alternativa” luego Shopify nos la renombrará como “page.alternativa.liquid”.

cambiar-layout-crear-pagina-Shopify
3- En nuestro nuevo theme “page.alternativa.liquid” vamos a la primera linea del código y escribimos el nombre de nuestro layout de la siguietne manera: {% layout ‘aprende-shopify’ %}
Debes cambiar ‘aprende-shopify’ por ‘el-nombre-de-tu-layout’
De esta manera la página llama al layout con todo su diseño.

cambiar-layout-de-pagina-shopify

4- Ahora creamos una nueva página desde nuestro Dashboard de Shopify, le damos un título y añadimos un pequeño texto, al final de la página de edición vemos la opción de escoger un Template diferente, escogeremos el template de la página creada en el punto 2 “page.alternativa.liquid”. Esto hace que nuestra nueva página llame al template creado, dónde previamente hemos insertado el código {% layout ‘aprende-shopify’ %}.

cambiar-template-pagina-shopify

5- Ahora esta todo configurado y correcto,  llega el momento de hacer los cambios de diseño que necesitemos en nuestro layout “aprende-shopify”, yo sólo he cambiado el color del toolbar y el logo. Puedes verlo aquí: http://www.pulpoensutinta.com/pages/aprende-shopify
Puedes ver que al navegar por otras páginas de la tienda el layout es diferente, es de color azul ya que es el original. Sólo en el enlace anterior se ve el nuevo layout modificado.

Si tienes alguna duda o sugerencia escríbe un comentario y te responderé lo antes posible! 🙂

This Post Has 4 Comments

  1. salva

    Hola, gracias por la información. Supongo que también se puede editar el footter, ahí te dejo la idea para un nuevo post…;)
    Mi pregunta era, ¿Qué theme tienes instalado en la web pulposensutinta? he buscado alguno con menú en la parte izquierda y no encuentro.
    Gracias de antemano.
    Un saludo.

  2. Carlos Martinez

    ¡Hola!, mi duda es la siguiente:

    En algunos productos que están en precio especial, se le agrega la palabra “oferta”, y me gustaría implementarlo en mi tienda, agradezco su ayuda, muchas gracias y que tenga un buen día.

  3. Livier Méndez

    Mi duda es como puedo accesar a los de mi menú?
    quiero modificarlo a dropdown

  4. JAIME CALA

    DE CASUALIDAD SABES COMO PONER IMAGENES EN EL SUBMENU ”DROPDOWM MENU” DE UNA PAGINA WEB?

Leave a Reply

Your email address will not be published. Required fields are marked *