Destacar un subconjunto de colecciones en una página

Precaución

Los temas vintage no están disponibles en la Theme Store. Estos temas no tienen las funciones incluidas en los temas de la Online Store 2.0 de Shopify, y los temas vintage gratuitos de Shopify no reciben actualizaciones aparte de las correcciones de seguridad.

Nota

Si usas un tema gratis de Shopify, puedes comunicarte con atención al cliente de Shopify para recibir ayuda con este tutorial. Requiere 15 minutos de tiempo de diseño. Obtén más información sobre la política de diseño de Shopify.

Nota

Esta personalización es para temas vintage de Shopify, y no se aplica a temas de Online Store 2.0.

• Conocer la versión de la arquitectura del tema
• Explorar las personalizaciones de temas de Online Store 2.0

Puedes destacar un subconjunto de colecciones en una página personalizada editando el código de tu tema. Este tutorial te muestra cómo crear una nueva plantilla de página y asignar colecciones para mostrar usando un menú.

Todas las tiendas Shopify tienen una página de lista de colecciones en la URL www.mystore.com/collections que muestra todas las colecciones en la tienda. Como alternativa a este tutorial, puedes editar tu página de lista de colecciones para mostrar solo una selección de tus colecciones.

Crear tu nueva plantilla de página

1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que deseas editar y, a continuación, haz clic en el botón ... > Editar código.

3. En el directorio Plantillas, haz clic en Agregar una nueva plantilla.

4. Crea una nueva plantilla para una página llamada list-collections.

Consejo

El tema Supply viene con un archivo prediseñado page.list-collections ya disponible.

1. Elimina el código existente en tu nuevo archivo page.list-collections. Busca el código de tu tema a continuación, y copia y pega el código en tu archivo page.list-collections.
2. Haz clic en Guardar.

Seleccionar tu tema

El código de esta personalización varía según tu tema. Haz clic en el botón de tu tema antes de copiarlo y pegarlo en tu archivo page.list-collections:

Boundless

Código para Boundless

1. Copia el código.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

{%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' -%}
{%- case linklists[page.handle].links.size -%}
{%- when 2 -%}
 {%- assign grid_item_width = 'medium-up--one-half' -%}
{%- when 3 -%}
 {%- assign grid_item_width = 'small--one-half medium-up--one-third' %}
{%- else -%}
 {%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' %}
{%- endcase -%}

<div class="page-width page-container">
  <header>
    <h1>{{ page.title }}</h1>
  </header>
  <div class="rte rte--indented-images">
    {{ page.content }}
  </div>

  <div class="grid grid--no-gutters collection-grid">
    {%- for link in linklists[page.handle].links -%}
      {%- if link.type == 'collection_link' -%}
        {%- assign featured = link.object.handle -%}
        {%- include 'collection-grid-item', collection: collections[featured] -%}
      {%- endif -%}
    {%- endfor -%}
  </div>
</div>

1. Pega el código en el archivo page.list-collections.

Brooklyn

Código para Brooklyn

1. Copia el código.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

{%- assign collection_count = 0 -%}
{%- assign isEmpty = true -%}
{%- for link in linklists[page.handle].links -%}
 {%- if link.type == 'collection_link' -%}
 {%- assign collection_count = collection_count | plus: 1 -%}
 {%- endif -%}
{%- endfor -%}

{%- assign collection_index = 0 -%}
{%- assign divisible_by_three = collection_count | modulo: 3 -%}
{%- assign divisible_by_two = collection_count | modulo: 2 -%}

<div class="grid">
 <div class="grid__item large--five-sixths push--large--one-twelfth">

   <header class="section-header text-center">
     <h1>{{ page.title }}</h1>
     <hr class="hr--small">
   </header>

   <div class="grid">
     <div class="grid__item large--four-fifths push--large--one-tenth">
       <div class="rte rte--nomargin rte--indented-images">
         {{ page.content }}
       </div>
     </div>
   </div>

 </div>
</div>

<div class="grid collection-grid">
 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign collection = collections[link.object.handle] -%}
     {%- assign collection_index = collection_index | plus: 1 -%}
     {%- assign collection_handle = collection.handle -%}
     {% include 'collection-grid-collage' %}
   {%- endif -%}
 {%- endfor -%}
</div>

1. Pega el código en el archivo page.list-collections.

Debut

Código para Debut

1. Copia el código.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="page-width">
 <div class="grid">
   <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
     <div class="section-header text-center">
       <h1>{{ page.title }}</h1>
     </div>

     <div class="rte">
       {{ page.content }}
     </div>
   </div>
 </div>

 <ul class="grid grid--uniform">

   {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
   {%- assign image_size = '350x' -%}

   {%- for link in linklists[page.handle].links -%}
     {%- if link.type == 'collection_link' -%}
       {%- assign collection = collections[link.object.handle] -%}
       <li class="grid__item {{ grid_item_width }}">
         {% include 'collection-grid-item', collection_image_size: image_size %}
       </li>
     {%- endif -%}
   {%- endfor -%}

 </ul>
</div>

1. Pega el código en el archivo page.list-collections.

Minimal

Código para Minimal

1. Copia el código.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="grid">

 <div class="grid__item post-large--two-thirds push--post-large--one-sixth">

   <div class="section-header">
     <h1 class="section-header--title">{{ page.title }}</h1>
   </div>

   <div class="rte">
     {{ page.content }}
   </div>

 </div>

</div>

{%- assign collection_item_width = 'medium-down--one-half post-large--one-third' -%}
{%- assign collection_width = 410 -%}

<div class="grid-uniform">

 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign featured = link.object.handle -%}
     <div class="grid__item {{collection_item_width}} text-center">
       {% include 'collection-grid-item' with collection_width: collection_width %}
     </div>
   {%- endif -%}
 {%- endfor -%}
</div>

1. Pega el código en el archivo page.list-collections.

Narrative

Código para Narrative

1. Copia el código.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="page-width">
 <header class="section-header text-center">
   <h1 class="section-header__title h2">{{ page.title }}</h1>
 </header>
 <div class="grid">
   <div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
     <div class="rte">
       {{ page.content }}
     </div>
   </div>
 </div>

 <div class="list-collections-template" data-section-id="list-collections-template" data-section-type="list-collections-template">
   {%- assign desktopColumns = '3' -%}
   {%- assign mobileColumns = '1' -%}

   {%- capture gridClasses -%}
     {% if desktopColumns == '3' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}
     {% if mobileColumns == '2' %}small--one-half {% endif %}
   {%- endcapture -%}

   {% comment %}
     For Collage style replace grid_style = 'grid' with grid_style = 'collage' below
   {% endcomment %}

   {%- assign grid_style = 'grid' -%}

   <div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ grid_style }}">
     <div class="card-list__column grid grid__item {{ gridClasses }}">

       {%- for link in linklists[page.handle].links -%}
         {%- if link.type == 'collection_link' -%}
           {%- assign collection = collections[link.object.handle] -%}
           {% include 'collection-card', collection: collection, width: desktopColumns, grid_style: grid_style %}
         {%- endif -%}
       {%- endfor -%}

     </div>
   </div>
 </div>
</div>

1. Pega el código en el archivo page.list-collections.

Simple

Código para Simple

1. Copia el código.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<h1 class="small--text-center">{{ page.title }}</h1>

<div class="rte">
 {{ page.content }}
</div>

{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}

<div class="grid grid--uniform">
 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {% assign collection = collections[link.object.handle] %}
     <div class="grid__item {{ grid_item_width }}">
       {% include 'collection-grid-item' %}
     </div>
   {%- endif -%}
 {%- endfor -%}
</div>

1. Pega el código en el archivo page.list-collections.

Venture

Código para Venture

1. Copia el código.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="page-width">
 <h1 class="small--text-center">{{ page.title }}</h1>
 <div class="content-block">
   <div class="rte rte--indented-images">
     {{ page.content }}
   </div>
 </div>

 {%- assign collection_count = 0 -%}

 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign collection_count = collection_count | plus: 1 -%}
   {%- endif -%}
 {%- endfor -%}

 {% assign number_rows = 1 %}

 {% case collection_count %}
   {% when 1 %}
     {% assign grid_item_width = 'medium-up--one-half' %}
     {% assign height = 450 %}
   {% when 2 %}
     {% assign grid_item_width = 'medium-up--one-half' %}
     {% assign height = 450 %}
   {% when 3 %}
     {% assign grid_item_width = 'medium-up--one-third' %}
     {% assign height = 330 %}
   {% when 4 %}
     {% assign grid_item_width = 'medium-up--one-quarter' %}
     {% assign height = 235 %}
   {% else %}
     {% assign grid_item_width = 'medium-up--one-third' %}
     {% assign height = 330 %}
     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}
 {% endcase %}

 <div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
   {% assign row_number = 1 %}
   {%- for link in linklists[page.handle].links -%}
     {%- if link.type == 'collection_link' -%}
       {%- assign featured_collection = collections[link.object.handle] -%}
       {% if collection_count > 4 and forloop.index > 3 %}
         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
       {% endif %}
       {% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
     {%- endif -%}
   {%- endfor -%}
 </div>

</div>

1. Pega el código en el archivo page.list-collections.

Crea una página para exhibir tus colecciones

1. Desde tu panel de control de Shopify, ve a Tienda online > Páginas.
2. Haz clic en Agregar página.
3. En el editor de página, introduce un Título en el cuadro de texto provisto. Debes usar el mismo título para el menú que crearás en los próximos pasos.

4. Asigna tu nueva plantilla a la página seleccionando colecciones por lista desde el menú desplegable Plantilla de tema en la sección Tienda online.

5. Haz clic en Guardar.

Nota

aunque tu nueva página esté visible, no aparecerá automáticamente en la navegación de tu tienda online. Tendrás que agregar un enlace a la página en un menú.

Crea un menú para controlar qué colecciones se muestran

1. Desde tu panel de control de Shopify, ve a Tienda online > Navegación.
2. Haz clic en el botón Agregar menú.
3. Dale a tu menú el mismo Título que el título que le diste a la página donde aparecerán tus colecciones. Por ejemplo, si la página que creaste tiene el título Living Room, dale al menú el título Living Room.
4. Agrega enlaces a tu menú para cada colección que desees mostrar haciendo clic en Agregar elemento del menú. Selecciona colecciones de tu tienda haciendo clic en Colecciones en el menú desplegable del cuadro de texto Enlace. Vincula tus colecciones de esta manera, en lugar de agregar una URL al cuadro de texto.
5. Haz clic en Guardar menú.