Shopify es una plataforma en la nube de comercio electrónico que no necesita conocimientos de programación para poder empezar a funcionar. Aún y así hay veces en que necesitamos personalizar un poco nuestras páginas. Para la creación de una página en Shopify con dos columnas debemos de tocar un poco de código, pero nada del otro mundo, podéis hacer copiar+pegar.

Para empezar tienes que ir a la página de CSS de tu plantilla. La encontrarás en el apartado Themes, luego accede a Template Editor y en la carpeta Assets selecciona la página style.css.liquid. No te equivoques, no debes de tocar el checkout.css.

Ahora en la página style.css.liquid baja hasta la última línea de código y copia+pega lo siguiente al final de todo:

.one-half-column-left {
width:48%;
float:left;
}

.one-half-column-right {
width:48%;
float:right;
}

Haz click en Save/Guardar.

2 columnas Shopify

Para acabar y comprobar su funcionamiento crearemos una nueva página dentro de Shopify, en el apartado Pages. Entraremos en el apartado del editor HTML.

2-columnas-shopify-html

Ahora toca introducir un poco de código para hacer funcionar el código CSS que hemos introducido anteriormente.
Copia, pega el siguiente código:

<div class="one-half-column-left">
<p>Escribe el texto para la columna de la izquierda aquí</p>
</div>
<div class="one-half-column-right">
<p>Escribe el texto para la columna de la derecha aquí</p>
</div>

Guarda la página y comprueba tu nuevo diseño en dos columnas.

Y eso es todo 😀

This Post Has 3 Comments

  1. Zeph Snapp

    Hola,
    Mi nombre es Zeph Snapp y pertenezco al equipo de Shopify. Me encontré con esta página en tu sitio, en la que mencionas a Shopify. Significaría mucho para nosotros si pusieras un enlace a este link http://es.shopify.com/ para que tus lectores tengan la oportunidad de acceder a Shopify en Español desde tu sitio.

    Con gusto puedes ponerte en contacto conmigo para cualquier duda.

    Gracias por mencionar a Shopify. Saludos

    1. Ronnymaik

      Hola Zeph! Gracias por tu comentario, espero que pongáis mi enlace pronto en la web de shopify entonces 🙂

  2. Belen

    Hola, muchas gracias por tu artículo.
    Solo me queda una duda, con estas modificaciones, cuando accedes desde el móvil el texto se adapta a la versión responsive o se ve mal?

    Muchas gracias, saludos!

Leave a Reply

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