Con esta funcionalidad podrás editar el código HTML y CSS de tu tienda para crear un diseño personalizado. Es exclusivo para usuarios del plan Profesional con un dominio propio delegado.

¿Quieres diseñar tu sitio pero no tienes maquetador web? ¿ya tienes contratado el plan Profesional? contáctanos.

En esta versión, podrás modificar el encabezado, pie y contenido de la página principal tu tienda.

Contenidos


¿Cómo empezar?

Antes de empezar, ten en cuenta que cada plantilla de MercadoShops tiene su propia estructura DOM. Para ahorrarte trabajo, te recomendamos que elijas la plantilla que menos modificaciones requiera para adaptarse a tus necesidades (de ser necesario, deberás reescribir nuestras reglas CSS).

¿Qué voy a necesitar?
Te recomendamos Firebug y cualquier editor de texto (notepad++, Sublime, etc).

Paso a paso

  1. Dentro de tu administrador de MercadoShops, ingresa a Diseño > Apariencia y elige la opción “Personalizada”.
  2. Elige la plantilla desde la que quieres comenzar.
  3. Descarga el .zip con los archivos y realiza tus cambios.
  4. Sube el .zip las veces que sea necesario para ir previsualizando los cambios.
  5. Clic en “Aplicar” para que los cambios se impacten en tu tienda.

Editando el HTML

MercadoShops usa un lenguaje de programación simple llamado VTL, que te permite agregar variables al código HTML. Esas variables harán que el código de la tienda siga siendo dinámico, es decir, que el vendedor pueda seguir editando los contenidos de la tienda a través de su administrador y construyas el sitio en base a ese contenido.

Por ejemplo, el vendedor puede querer cambiar su logo, agregar o modificar el árbol de categorías, mostrar u ocultar banners en la página principal, etc. Al usar variables en tu código HTML, el contenido del sitio responderá a la configuración del vendedor y evitará que haya que modificar el código HTML para hacer cada uno de estos cambios.

Al subir tu código HTML personalizado, MercadoShops reemplazará las variables por el contenido real que cargaste, una lógica similar a lo que hacen otros CMS, como WordPress.

Ejemplo de código fuente

Para empezar el proceso de análisis, descarga el .zip de tu propia tienda, revisa los códigos HTML/CSS y vuelve a subirlos en una tienda de prueba para previsualizarlo.

Esto te ayudará a ver cómo está organizado el código, entender cómo se reemplazan las variables y cómo se aplican las hojas de estilo.

Recuerda que no es obligatorio usar todas las variables del archivo original que descargues. Si alguna no te sirve, simplemente elimínala del HTML.

Armando el .Zip
Los archivos del .zip que descargaste están organizados en carpetas. Al modificar algo, siempre respeta:

  • la misma estructura del archivo original descargado.
  • el tamaño máximo del archivo con las imágenes: 5 MB.
  • el encoding: UTF-8.

Ejemplo de zip

Guarda las carpetas directamente en la raíz del archivo, así:
Guarda las carpetas directamente en la raíz del zip

Otros Contenidos

Si deseas agregar contenidos que todavía no están disponibles en MercadoShops, como un segundo carrousel en tu página principal u otras imágenes de fondo, puedes subirlos en el .zip junto con las modificaciones que hayas hecho.


Variables

Son bloques de información que podrás usar en el código HTML para diseñar tu tienda, como tu logo, las fotos de las publicaciones y los datos de contacto.

Por ejemplo, si quieres diseñar el árbol de categorías de la tienda usa la variable $categoryLevel1 en el código HTML.

Llamamos “entidades” a las variables que contienen información. Cuando uses una variable con la marca “entidad”, podrás acceder a más atributos usando este formato: $nombreVariable.atributo.

Por ejemplo, si quieres mostrar en el HTML la URL de categoría de nivel 1 usa el atributo “.url”: $categoryLevel1.url.

La marca “Admin” te indica en qué parte del administrador de la tienda agregaste o modificaste el contenido que será usado en el HTML.

Recuerda siempre agregar el símbolo “$” a los nombres de las variables y de respetar las minúsculas y mayúsculas cuando las escribas en el código HTML.

$hasLogo
Admin: Logo.
Indica si se ha seleccionado mostrar un logo o el nombre de la tienda.

#if( $hasLogo )

 #end

$searchQuery
Palabra buscada por el visitante de la tienda. Podrías usar para mostrar la palabra buscada por el visitante en el header/footer de toda la tienda.

$menuItemList
Entidad: MenuItem. Admin: Paginas.
Lista con todos los elementos del menú. Recorre los elementos de esta lista para diseñar tu propio menú.

#foreach( $menuItem in $menu-items )
 $menuItem.name
#end

$menuItem
Entidad: MenuItem. Admin: Paginas.
Elemento del menu. Usa los atributos de este elemento para mostrar el nombre del ítem del menú, la url, etc.

#foreach( $menuItem in $menu-items )
 $menuItem.name
#end

$level1CategoryList
Entidad: Category. Admin: Categorías
Lista con todas las categorías de primer nivel. Recorre los elementos de esta lista para diseñar tu propio árbol de categorías

#foreach ( $categoryLevel1 in $level1CategoryList )
#end

$categoryLevel1
Entidad: Category. Admin: Categorías.
Categoria de primer nivel. Usa los atributos de este elemento para mostrar el nombre de la categoria, la url, etc.

$categoryLevel1.name

$categoryLevel2
Entidad: Category. Admin: Categorías.
Categoria de segundo nivel.

$categoryLevel2.name

$categoryLevel3
Entidad: Category. Admin: Categorías.
Categoria de tercer nivel.

$categoryLevel3.name

Un ejemplo de cómo recorrer un árbol de categorías sería similar a lo siguiente:


#foreach($categoryLevel1 in $level1CategoryList)
    #if($categoryLevel1.hasSubCategories)
       #foreach($categoryLevel2 in $categoryLevel1.subCategories)
          #if($categoryLevel2.hasSubCategories)
             #foreach($categoryLevel3 in $categoryLevel2.subCategories)
             #end
          #end
       #end
    #end
#end

 

$showContent
Admin: Pagina principal.
Indica si debe mostrarse el contenido personalizado (texto e imágenes). Si el vendedor decidió ocultar esta sección, esta variable devolverá el valor FALSO.

#if($showContent)
 #if($showContentImage)
  #foreach ($contentImage in $contentImageList)
       
 #end
#elseif ($showContentText)
$contentText

#end
#end

$showContentImage
Admin: Pagina principal.
Indica si deben mostrarse las imágenes del contenido personalizado. Si el vendedor decidió mostrar IMÁGENES en esta sección, esta variable devolverá el valor VERDADERO.

#if($showContentImage) Mostrar imagen
#end

$showContentText
Admin: Pagina principal.
Indica si debe mostrarse el texto del contenido personalizado. Si el vendedor decidió mostrar TEXTO en esta sección, esta variable devolverá el valor VERDADERO.

#if($showContentText) Mostrar el texto
#end

$contentText
Admin: Pagina principal.
Texto del contenido personalizado cargado por el vendedor.

$contentText

$contentImageList
Entidad: Banner. Admin: Pagina principal.
Lista de imágenes del contenido personalizado. Recorre los elementos de esta lista para diseñar tu galería de banners.

#foreach ($contentImage in $contentImageList)
#end

$contentImageMaxHeight
Admin: Pagina principal.
Altura que tendran las imágenes del carrousel.


$contentImage Entidad: Banner. Admin: Pagina principal. Imagen del contenido personalizado. Usa los atributos de este elemento para mostrar la url de la imagen, el link, etc.

#if($contentImage.hasLink)
    link de la imagen
#end

$outstandingMaxItemsPerPage
Admin: Pagina principal.
Cantidad maxima de items destacados por pagina del carrousel. Remplaza esta variable por la cantidad de publicaciones destacados que quieres mostrar al mismo tiempo o dejala para que MS lo configure por ti.
Configurado por MS:


Para mostrar de a ‘2’ publicaciones:


$outstandingItemList
Entidad: Ítem. Admin: Pagina principal.
Lista de ítems de la posición “Anuncios Destacados”. Recorre los elementos de esta lista para diseñar tu propia galería de publicaciones destacadas.

#foreach ($outstandingItem in $outstandingItemList)
#end

$outstandingItem
Entidad: Item. Admin: Pagina principal.
Ítem destacado. Usa los atributos de este elemento para mostrar el titulo, foto, precio, etc. de cada publicación.

$outstandingItem.title

$galleryProductsTitle
Admin: Pagina principal.
Titulo del la galería de productos.

$galleryProductsTitle

$galleryItemList
Entidad: Ítem. Admin: Pagina principal.
Lista de ítems a mostrar en la home. Recorre los elementos de esta lista para diseñar tu propia galería de publicaciones.

#foreach ($galleryItem in $galleryItemList)
#end

$galleryItem
Entidad: Item. Admin: Pagina principal
Item a mostrar en la home. Usa los atributos de este elemento para mostrar el titulo, foto, precio, etc. de cada publicación.

$galleryItem.title

$newsItemsTitle
Admin: Pagina principal.
Titulo del la galería de productos nuevos.

$newsItemsTitle

$newsMaxItemsPerPage
Admin: Pagina principal.
Cantidad maxima de items en novedades por pagina del carrousel.
Remplaza esta variable por la cantidad de publicaciones en novedades que quieres mostrar al mismo tiempo o dejala para que MS lo configure por ti.

Configurado por MS:


Para mostrar de a ‘2’ publicaciones: $newsItemList Entidad: Ítem. Admin: Pagina principal. Lista de ítems del área de novedades. Recorre los elementos de esta lista para diseñar tu propia galería de publicaciones.

#foreach ($newsItem in $newsItemList)
#end

$newsItem
Entidad: Ítem. Admin: Pagina principal.
Ítem del área de novedades. Usa los atributos de este elemento para mostrar el titulo, foto, precio, etc. de cada publicación.

$newsItem.title

$showContactFooter
Admin: Datos
Indica si debe mostrarse la informacion de contacto. Si el vendedor decide no mostrar ese dato en su home, devolverá FALSO.

#if($showContactFooter)
#end

$showAddres
Admin: Datos
Indica si debe mostrarse la dirección. Si el vendedor decide no mostrar ese dato en su home, devolverá FALSO.

 #if( $showAddres )$address

 #end

$address
Admin: Datos
Direccion de la tienda

$address

$showPhone
Admin: Datos
Indica si debe mostrarse el teléfono

#if( $showPhone )$phone

#end

$phone
Admin: Datos.
Teléfono de la tienda.

$phone

$hasOnlyOneCategory
Admin: Categorías.
Indica si la tienda tiene una única categoría. Si la tienda tiene una sola categoría activa, podría optar por directamente no mostrarla.

#if( $hasOnlyOneCategory ) Todos los productos
#end

$uniqueCategory
Entidad: Category. Admin: Categorías.
Única categoría de la tienda. Si la tienda tiene una sola categoría activa, puedes usar directamente esta variable sin tener que recorrerla.

#if( $uniqueCategory ) Soy la categoría num. 1
#end

$shopHasCart
Indica si la tienda utiliza carrito o no.

#if( $shopHasCart )  Tengo carrito
#end

Entidades

MenuItem

  • isFirstItem: indica si el ítem es el primero del menú.
  • target: valor del atributo “href” del elemento.
  • name: label del elemento.
  • noFollow: indica si debe ponerse o no el atributo rel=”nofollow”.
  • linkTarget: valor del atributo “target” del elemento.

Category

  • id: identificador de la categoría.
  • url: URL de la categoría.
  • name: nombre de la categoría.
  • hasSubCategories: indica si tiene categorías de nivel inferior.
  • subCategories: listado de categorías de nivel inferior pertenecientes a la categoría.
  • isInSelectedPath: indica si la categoría esta seleccionada o es ancestro de la categoría seleccionada.

Banner

  • height: altura de la imagen.
  • src: valor del atributo “src”.
  • link: link al que apunta la imagen.
  • alt: valor del atributo “alt”.
  • hasLink: indica si la imagen tiene un link.

Ítem

  • title: titulo del ítem destacado.
  • url: URL del ítem.
  • hasImages: indica si el ítem tiene o no imágenes.
  • imageUrl: URL de la imagen principal del ítem.
  • currencySymbol: simbolo de la moneda correspondiente al precio del ítem.
  • entirePrice: parte entera del precio del ítem.
  • decimalPrice: parte decimal del precio del ítem.
  • itemPrice: precio entero del ítem (para paises donde no se utilizan centavos).
  • subtitle: subtitulo del ítem.
  • showLastAvailable: indica si debe mostrarse o no el texto de “Ultimos Disponibles”.
  • promotion: promoción activa para este item, de existir alguna

Promotion

  • title: titulo del ítem destacado.
  • name: nombre de la promoción.
  • freeShipping: indica si tiene envío gratis.
  • discount_type: el valor “PRICE” indica si es una promoción con descuento en el precio del producto. El valor “QUANTITY” indica si es una promoción con unidades bonificadas al comprar cierta cantidad, ej “3×2”.
  • discountPercent: disponible sólo si discount_type=PRICE. Porcentaje de descuento de la promoción (ej. “10%”).
  • quantityBuy: disponible sólo si discount_type=QUANTITY. Cantidad de unidades a pagar para que la promoción sea aplicable (ej: “paga 2 unidades…”).
  • quantityTake: (disponible sólo si discount_type=QUANTITY) Cantidad de unidades adquiridas debido a la promoción (ej: “… y llevas 3 unidades”).
  • fromDate: fecha de inicio de la promoción, de ser aplicable.
  • to: fecha de fin de la promoción, de ser aplicable.

Archivos HTML

Al descargar el .zip, encontrarás estos archivos en la carpeta HTML:

  • header.html: incluye logo, buscador, menú de navegación etc. que se repiten por toda la tienda.
  • footer.html: incluye datos de contacto, botones sociales etc. que se repiten por toda la tienda.
  • home.html: incluye las secciones de ítems destacados, novedades y el damero de producto.

Editando el CSS

Construimos MercadoShops bajo el concepto de diseño modular. Usamos los siguientes términos para definir y entender nuestra estructura:

  • Elemento: unidad mínima de contenido, es un elemento único e indivisible. Por ejemplo, un botón, link o imagen.
  • Componente: es una combinación de elementos, con una funcionalidad y propósito determinado. Es independiente y reusable en diferentes contextos y estructuras. Por ejemplo, carrousel, menú de navegación y lista de categorías.
  • Layout o vista: combinación de elementos y componentes. Se distribuyen de acuerdo a bloques estructurales o grillas, con el objetivo de organizarlos visualmente.
  • Tema: es un conjunto de diferentes vistas o layouts.

componentes

layout y componentes

Modificando componentes o elementos

Este es el ejemplo más sencillo. Si quieres modificar el aspecto visual de un componente o elemento, busca esas reglas dentro del archivo componentes.css.

Modificar layouts

Para modificar estructuras vas a necesitar redefinir algunos de los estilos del sistema de grillas que usa MercadoShops.
Nuestras estructuras son “responsive design”, así que necesitarás revisar otros archivos dependiendo de lo que quieras lograr:

  • basic.css: define layout para pantallas de baja resolución. Por ejemplo, en dispositivos móviles.
  • tablet.css: define layout para pantallas de media resolución como las tablets.
  • desktop.css: define layout para pantallas de alta resolución como en monitores de escritorio.

Recuerda que podrás utilizar el sistema de grillas con el que te sientas más cómodo.

En el CSS

Como buena práctica, te recomendamos no modificar los estilos que usan los temas de MercadoShops. Lo ideal es que declares todos tus estilos en personalized.css. De esta manera, las reglas de MercadoShops nunca se modifican y funcionan como backup por si cometes algun error.
Todos los archivos CSS están comentados. Esto te ayudará a entender qué hace cada regla y qué esperar si la modificas o reescribes.
Tratamos de usar la cascada en todos los casos posibles, por lo que necesitarás seguir las reglas a través de algunos archivos para lograr lo que necesites.

Crossbrowsing

Utilizamos comentarios condicionales en lugar de hacks css. ¿Por qué?
En síntesis, agregamos una clase al tag HTML para identificar que versión de IE es. Lo único que necesitas es usar esa clase como prefijo al declarar las reglas CSS que solo se aplicarán a ese navegador.

Archivos CSS

Con el objetivo de mejorar la performance, unificamos todos los CSS en un único request.
Como todos los archivos están unificados, incluimos como comentario el nombre del archivo.
Buscando “file name” podrás entender dónde comienza y dónde termina cada archivo CSS.
Todos las plantillas de MercadoShops tienen la siguiente estructura:

Estilos comunes a todos los temas

  • personalized.css: donde puedes cargar tus clases personalizadas.
  • base.css: estilos comunes -layout y componentes.
  • normalize.css: reset, mobile reset y crossbrowsing.
  • jquery-ui-1.7.2.custom.css: query visual widgets.
  • chico-x.x.x.cs: estilos visuales básicos de ChicoUI*.
  • mesh-x.x.x.cs: grillas ChicoUI.

Estilos que varian por tema

  • /theme/basic.css: estilos de layout cuando max-width:640px.
  • /theme/tablet.css: estilos de layout cuando min-width:640px y max-width:1024px.
  • /theme/desktop.css: estilos de layout cuando min-width:1024px.
  • /theme/componentes.css: redefine estilos de componentes del base.css.
  • userlook.css: estilos personalizados desde el admin de apariencia.

*ChicoUi es una colección de herramientas fáciles de usar, gratuitas y open source para desarrolladores y diseñadores, creadas por el equipo de front-end de MercadoLibre.

 

Si tenés más dudas acerca de cómo diseñar tu Shop ingresa a Diseñadores.