Shopify Theme Base GitHub

Layout

Comprenda algunos elementos importantes en el layout: theme.liquid. Este layout contiene configuración y recursos que permiten a su tienda funcionar y optimizarse. Veremos lo siguientes puntos:

  • Carga de Shopify CDN
  • Carga favicon
  • SEO config (title y meta description)
  • content_for_header
  • header
  • content_for_layout
  • footer
  • Variables globales de la tienda
  • Carga de bundles

Carga de Shopify CDN

La CDN de Shopify es importante porque nos proporciona una red de contenido de clase mundial administrada por Fastly y Cloudflare. El uso de la CDN significa que su tienda en línea se cargará rápidamente en todo el mundo, a pesar de que los servidores de Shopify se encuentran en USA.

Los archivos entregados a través de Shopify CDN se minimizan y comprimen automáticamente usando Brotli, Zopfli y gzip, lo que reduce el tamaño de los archivos que el navegador debe descargar. Las solicitudes utilizan HTTP/3 y TLS 1.3 para mejorar aún más el rendimiento y la seguridad de las solicitudes.

./layout/theme.liquid

<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
    ...
  </head>

  <body>
    ...
  </body>
</html>

Carga favicon

Permite a los usuarios del BO (Backoffice) cargar y manipular el favicon a su gusto.

./layout/theme.liquid


<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
    
    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | img_url: '32x32' }}">
    {%- endif -%}
    ...
  </head>

  <body>
    ...
  </body>
</html>

SEO config

Permita mejorar y optimizar el SEO en su tiendo por medio de los siguientes tags:

  • title: Permite renderizar de manera dinámica y por template el título de la página
  • meta: Permite añadir una breve descripción para motores de búsqueda como Google

./layout/theme.liquid


<html>
  <head>
    ...
    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
    
    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | img_url: '32x32' }}">
    {%- endif -%}

    <title>
      {{ page_title }}
      {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
    </title>

    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags' %}
    ...
  </head>

  <body>
    ...
  </body>
</html>

content_for_header

El content_for_header es un objeto obligatorio en el tema. Debe colocarse dentro del tag <head>. Este objeto cargará dinámicamente todos los scripts requeridos por Shopify en el encabezado del documento. Estos scripts son necesarios para funciones como reCAPTCHA, apps de Shopify y más.

No debe intentar modificar o analizar el objeto content_for_header. Si el content_for_header cambia, también cambiará el comportamiento de su Liquid.

./layout/theme.liquid


<html>
  <head>
    ...
    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
    
    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | img_url: '32x32' }}">
    {%- endif -%}

    <title>
      {{ page_title }}
      {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
    </title>

    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags' %}

    {{ content_for_header }}
    ...
  </head>

  <body>
    ...
  </body>
</html>

Nuestro header, es una sección del directorio de secciones ./sections. Aquí podrá encontrar una estructura básica para empezar a generar un menú de navegación para el usuario:


<html>
  <head>
    ...
    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
    
    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | img_url: '32x32' }}">
    {%- endif -%}

    <title>
      {{ page_title }}
      {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
    </title>

    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags' %}

    {{ content_for_header }}
    ...
  </head>

  <body>
    ...
    {% section 'header' %}
    ...
  </body>
</html>

En esta sección podrá localizar un setting para asignar una navegabilidad desde BO (Backoffice). Utilice este menú por medio del snippet: site-nav.

¿Cómo utilizar los objectos linklist aquí?

Archivos

…

content_for_layout

El content_for_layout objeto genera dinámicamente el contenido de cada template de tienda. Debe agregar una referencia a este objeto entre las etiquetas HTML <body> y </body>.

./layout/theme.liquid


<html>
  <head>
    ...
    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
    
    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | img_url: '32x32' }}">
    {%- endif -%}

    <title>
      {{ page_title }}
      {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
    </title>

    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags' %}

    {{ content_for_header }}
    ...
  </head>

  <body>
    ...
    {% section 'header' %}

    {{ content_for_layout }}
    ...
  </body>
</html>

Nuestro footer, es una sección del directorio de secciones ./sections.

Pero a diferencia del header, el footer está construido, en su mayoría por bloques. Esta sección tiene dos tipos de bloques:

  • link_list: Añade un título y un menú de navegabilidad
  • newsletter: Añade un título, un subtítulo y un formulario de registro al newsletter

Conozca un poco sobre el formulario de newsletter aquí

Variables globales de la tienda

Este trozo de código genera variables para utilizar en nuestros modulos de JavaScript. Puede extender estas variables en caso que lo requiere, aquí tenemos un schema básico de las variables:

./layout/theme.liquid


<html>
  <head>
    ...
  </head>

  <body>
    ...

    <script>
      window.shopUrl = '{{ shop.url }}';
      window.routes = {
        cart_add_url: '{{ routes.cart_add_url }}',
        cart_change_url: '{{ routes.cart_change_url }}',
        cart_update_url: '{{ routes.cart_update_url }}',
        predictive_search_url: '{{ routes.predictive_search_url }}'
      };

      window.cartStrings = {
        error: `{{ 'sections.cart.cart_error' | t }}`,
        quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}`
      }

      window.variantStrings = {
        addToCart: `{{ 'products.product.add_to_cart' | t }}`,
        soldOut: `{{ 'products.product.sold_out' | t }}`,
        unavailable: `{{ 'products.product.unavailable' | t }}`,
      }

      window.accessibilityStrings = {
        shareSuccess: `{{ 'general.share.success_message' | t }}`,
      }
    </script>
  </body>
</html>

Carga de bundles

En nuestro layout, cargamos por default un bundle de JavaScript llamado theme.js. Este bundle contiene funcionalidad general de la tienda y puede encontrarlo así:

./layout/theme.liquid


<html>
  <head>
    ...
  </head>

  <body>
    ...

    <script>
      ...
    </script>

    <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
  </body>
</html>

Nota: Es posible generar más paquetes, pero recuerde generar una carga dinámica en donde se requieran.