Plantillas de diseño Bootic

Las plantillas HTML de cada página de tu tienda Bootic pueden ser editadas en el área de diseño de tu panel de administración.

Para esto, Bootic define una serie de plantillas presentes en todas las tiendas.

Contenido dinámico

Cada una de estas plantillas recibe contenido dinámicamente de acuerdo a lo que estas mostrando en ella. Para esto, Bootic define una sintaxis especial que puedes usar en las plantillas HTML para insertar el contenido dinámico. La tecnología detras de estas variables se llama Liquid y puedes leer más en este link.

Por ejemplo, para generar una lista de productos en la plantilla products.html:

<ul id="products">
  {% for product in products %}
  <li class="product">
    <h3><a href="{{product.url}}">{{ product.model }}</a></h3>
    <span class="price">{{ product.price.format }}</span>
  </li>
  {% endfor %}
</ul>

Esta sintaxis define tres tipos de operaciones: variables, filtros y etiquetas.

Variables

  {{ product.url }}

Filtros

'estilos.css' | asset_url

http://static.bootic.net/themes/110/estilos.css

Etiquetas

{% for product in products limit:3 %}
<a href="{{product.url}}">{{ product.model }}</a>
{% endfor %}

Variables y etiquetas disponibles

Estas son algunas de las variables y etiquetas disponibles en cualquier plantilla Bootic.

Producto

Disponible en product.html o dentro de un loop de productos.

Página

Disponible en page.html o dentro de un loop de páginas.

Colección

Disponible en collection.html o dentro de un loop de colecciones.

Formulario

Disponible en form.html o dentro de un loop de formularios.

Carro de compras