Una colección es un grupo de productos que has elegido y que hará que la experiencia de compra sea más fácil y rápida para los clientes de Shopify.
Los siguientes pasos lo guiarán para agregar subcategorías en la tienda Shopify:
Compruebe la configuración del tema:
La mayoría de los temas tienen un menú desplegable para agregar subcategorías en la tienda Shopify. Puedes comprobar si tu tema también tiene esta opción siguiendo estos pasos:
- Inicie sesión en su panel de control de Shopify , vaya a la página Personalizar temas y luego haga clic en Página de colección en la vista previa del tema
- Busque la pestaña Páginas de colección en el editor de temas, haga clic en ella. Si su tema tendrá la opción de filtrar con etiqueta, encontrará una opción Habilitar filtrado por etiqueta de producto en el editor de temas.
- Haga clic en la casilla de verificación Habilitar filtrado por etiqueta de producto
- Haga clic en Guardar
Si no pudo encontrar la opción Habilitar filtrado, puede agregarla editando el código de su tema. Para agregar la opción, puede seguir los pasos a continuación.
Editando su archivo theme.liquid
- Vaya a su panel de control de Shopify , navegue por la Tienda en línea y luego haga clic en Temas
- Busque el tema que desea editar, haga clic en Acciones —-> Editar código
- Haga clic en líquido en el directorio Diseño .
- En la parte inferior del archivo, encontrará una etiqueta de cierre </body>. Pegue el siguiente código en una nueva línea encima de la etiqueta de cierre </body>:
<script>
/* Filtros de etiquetas de productos: bueno para cualquier número de filtros en cualquier tipo de páginas de colección */
var collFilters = jQuery(‘.coll-filter’);
collFilters.change( función () {
var nuevasEtiquetas = [];
collFilters.each( función () {
si (jQuery( esto ).val()) {
newTags.push(jQuery( esto ).val());
}
});
if (nuevasEtiquetas.longitud) {
var consulta = newTags.join(‘+’);
ventana.ubicación.href = jQuery(‘{{ ‘etiqueta’ | link_to_tag: ‘etiqueta’ }}’).attr(‘href’).replace(‘/’ + ‘etiqueta’, ‘/’ + consulta);
}
más {
{ % si colección.manejador % }
ventana.ubicación.href = ‘/colecciones/{{ colección.manejador }}’;
{ % elsif colección.productos.primero.tipo == colección.título % }
ventana.ubicación.href = ‘{{ colección.título | url_para_tipo }}’;
{ % elsif colección.productos.primer.vendedor == colección.título % }
ventana.ubicación.href = ‘{{ colección.título | url_para_proveedor }}’;
{ % endif % }
}
});
</script>
- Haga clic en Guardar
Agregar un menú desplegable a la página de colección
Para agregar un menú desplegable, puede seguir los siguientes pasos. Pero puede omitir estos pasos si desea utilizar el botón de opción.
- Primero deberá agregar un código desplegable a su tema. El código variará según el tema que esté utilizando:
Para el tema de Brooklyn:
En el directorio Snippets , haga clic en collection-template.liquid. Pegue el siguiente código en una nueva línea arriba de la etiqueta de cierre </header> en el archivo:
<div class=”clearfix filter”> <p>Buscar por etiqueta:</p> <select class=”coll-filter”> <option value=””>Todo</option> {% para etiqueta en colección.all_tags %} {% si etiquetas_actuales contiene la etiqueta %} <valor de opción=”{{ etiqueta | handle }}” seleccionado>{{ etiqueta }}</option> {% else %} <option value=”{{ etiqueta | manejar }}”>{{ etiqueta }}</opción> {% endif %} {% endfor %} </select></div>
Para el tema Jumpstart:
En el directorio de la sección , haga clic en collection-template.liquid . Pegue el siguiente código en una nueva línea debajo de la etiqueta de apertura <div class=”wrapper wrapper–margins”> en el archivo:
<div class=”clearfix filter tag-filter”> <p>Buscar por etiqueta:</p> <select class=”coll-filter”> <option value=””>Todo</option> {% para etiqueta en collection.all_tags %} {% si current_tags contiene la etiqueta %} <option value=”{{ etiqueta | handle }}” seleccionado>{{ etiqueta }}</option> {% else %} <option value=”{{ etiqueta | manejar }}”>{{ etiqueta }}</opción> {% endif %} {% endfor %} </select></div>
Para otros temas:
En el directorio Plantilla , haga clic en collection.liquid . Pegue el siguiente código en una nueva línea arriba de la etiqueta {% section ‘collection-template’ %} en el archivo:
<div class=”clearfix filter”> <p>Buscar por etiqueta:</p> <select class=”coll-filter”> <option value=””>Todo</option> {% para etiqueta en colección.all_tags %} {% si etiquetas_actuales contiene la etiqueta %} <valor de opción=”{{ etiqueta | handle }}” seleccionado>{{ etiqueta }}</option> {% else %} <option value=”{{ etiqueta | manejar }}”>{{ etiqueta }}</opción> {% endif %} {% endfor %} </select> </div>
- Haga clic en Guardar y listo, si está utilizando cualquier otro tema excepto Jumpstart. Si está utilizando Jumpstart, vaya al paso editar el estilo del menú desplegable.
Agregue el botón de opción a las páginas de la colección:
Para agregar el botón de opción, puede seguir los siguientes pasos. Pero puedes saltar al anterior si quieres usar el menú desplegable:
- Primero deberá agregar el siguiente código de botón de opción a su tema:
<ul class=”subnav clearfix”> <li{% a menos que etiquetas_actuales %} class=”active”{% endunless %}> {% if collection.handle %} <a href=”/collections/{{ collection.handle } }{% if colección.ordenar_por %}?sort_by={{ colección.ordenar_por }}{% endif %}”>Todo</a> {% elsif colección.tipo_actual %} <a href=”{{ colección.tipo_actual | url_para_tipo | ordenar_por: colección.ordenar_por }}”>Todo</a> {% elsif colección.proveedor_actual %} <a href=”{{ colección.proveedor_actual | url_para_proveedor | sort_by: collection.sort_by }}”>All</a> {% endif %} </li> {% for tag in collection.all_tags %} {% if current_tags contiene la etiqueta %} <li class=»active»> { { etiqueta | link_to_remove_tag: etiqueta }} </li> {% else %} <li> {{ etiqueta | link_to_tag: etiqueta }} </li> {% endif %} {% endfor %}</ul>/* Contiene flotantes: nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix :before , .clearfix :after { content : “”; pantalla : mesa; } .clearfix :después { clear : ambos; } .clearfix {zoom: 1; } /* Estilos de subnavegación */ .subnav { clear : both; tipo-estilo-lista : ninguno; margen : 35px 0; relleno : 0; } .subnav li { pantalla : bloque; flotante : izquierda; } .subnav li a { pantalla: cuadra; altura : 28px; altura de línea : 28px; relleno : 0 7px; -webkit-border-radio : 7px; -moz-border-radio : 7px; borde-radio : 7px; fondo : #eee; margen : 0 7px 7px 0; color : #666;} .subnav li a :hover , .subnav li .active a { background : #666; color : #fff;}</estilo>
El archivo al que agregará el código del botón de radio dependerá del tema que esté utilizando:
Para el tema de Brooklyn:
En el directorio Snippets , haga clic en collection-template.liquid . Pegue el código del botón de opción mencionado anteriormente en una nueva línea arriba de la etiqueta de cierre </header> en el archivo.
Para el tema Jumpstart:
En el directorio de la sección , haga clic en collection-template.liquid . Pegue el código del botón de opción mencionado anteriormente en una nueva línea debajo de la etiqueta de apertura <div class=”wrapper wrapper–margins”> en el archivo.
Para otros temas:
En el directorio Plantilla , haga clic en collection.liquid . Pegue el código del botón de radio mencionado anteriormente en una nueva línea sobre la etiqueta {% section ‘collection-template’ %} en el archivo.
- Haga clic en Guardar .
Editar el estilo del menú desplegable para el tema Jumpstart
If you are a Jumpstart user and have added a drop-down menu code to your theme following the steps mentioned above, you can then continue with the following steps to edit CSS for your menu:
- Navigate the Asset directory, click scss.liquid. Go to the bottom of the file and paste the following code:
div.tag-filter { svg, .arrow { display: none; } text-align: center; margin-bottom: $gutter * 2;}
- And then click Save.