Documentación Bootic

Todo la información para empezar a vender en línea.

¿Plantillas o archivos?

En el editor Bootic, puedes agregar archivos CSS o JS subiendo los archivos desde tu computador, o bien puedes hacerlo creando una nueva plantilla y pegando el contenido original. ¿Cuál es la diferencia?

La diferencia es que al agregarlos como archivos, no es posible modificarlos usando el editor de código. En cambio, al incluirlos como plantillas tienes la posibilidad de editarlos haciendo click sobre el nombre que le diste al archivo.

Como sugerencia, recomendamos que todas las librerías que utilices, ya sean Javascript o CSS -- por ejemplo el plugin Cycle de jQuery o el framework CSS Bootstrap -- las subas como archivos, ya que idealmente no querrás modificar el contenido de esos archivos. Para todo lo demás (es decir, hojas de estilo o código JS que sí fue escrito por tí) recomendamos ingresarlos como plantillas.

Cómo crear una nueva plantilla JavaScript o CSS

En este caso mostraremos como ejemplo la creación de una plantilla CSS llamada master.css.

Crear nueva plantilla

Para insertar una hoja de estilos primero tenemos que crear una plantilla de tipo "css" y darle un nombre.

Crear nueva plantilla

Luego la vinculamos desde layout.html usando los filtros asset_url y stylesheet_tag. El primero nos da la ruta absoluta a la hoja de estilos en los servidores Bootic. La segunda crea una etiqueta HTML <style>.

<html>
  <head>
    <title>{{ shop.name }}</title>
    {{ 'master.css' | asset_url | stylesheet_tag }}
  </head>
  <body>
    {{ content_for_layout }}
  </body>
</html>

El HTML generado es ahora algo como:

<html>
  <head>
    <title>Mi tienda</title>
    <link href="http://static.bootic.net/themes/112/master.css" media="all" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Hola, estas en la portada de mi sitio!</h1>
  </body>
</html>

Pero no es necesario preocuparse de las rutas a cada hoja de estilos. Los filtros indicados hacen el trabajo.

En el caso que quieras agregar código Javascript de tu tienda, una vez creada la plantilla, harías:

(...)
  <head>
    <title>{{ shop.name }}</title>
    {{ 'theme.js' | asset_url | javascript_tag }}
  </head>
(...)

Notar el cambio de stylesheet_tag por javascript_tag.

Crea tu tienda hoy mismo. Sin compromisos. Ver planes