Tienda Shopify: mostrar "más colores" Si un producto tiene varias variantes de color

En tu Shopify tienda, ¿alguna vez se ha preguntado cómo mostrar un enlace a "más colores" sólo para los productos que tienen varios colores? Es posible que desee hacer esto también:

• Anime a los clientes a hacer clic en la página del producto y ver más opciones de color
• Diga a los clientes que hay más colores disponibles, no solo el de la foto

Esto es lo que se verá como una vez que termines de agregar "más colores" a tu cuadrícula de colección en tu Tienda Shopify:

Paso 1: abre tu editor de temas en la tienda de Shopify

Primero hacer una copia de seguridad de su tema.  A continuación, vaya a la tienda en línea > temas > haga clic en Editar HTML/CSS (tutorial aquí).  Esto abrirá tu editor de temas.

Paso 2: encuentra tu product Loop

Dentro de su tema, habrá un archivo de bucle de producto.  Lo que esto hace es un loop a través de todos los productos dondequiera que veas una cuadrícula de producto. Por ejemplo, en la Página principal, en las páginas de recopilación, en productos relacionados y así sucesivamente.

Depende del tema, pero normalmente estará ubicado bajo el Carpeta Snippets , y normalmente se llamará algo como:

• producto-Grid. Liquid
• producto-listado. Liquid
• producto-miniatura. Liquid

O similar.  Encuentra ese archivo y ábrelo.

Paso 3: Inserte el código (abajo)

Una vez que lo has encontrado, necesitas encontrar dónde se muestra el precio , para que podamos insertar el código debajo de él.  Es decir, si quieres que se vea como la captura de pantalla de arriba.  (Si lo desea en otro lugar, por ejemplo, por encima del precio, usted podría hacer eso también, sólo cambiar donde se pega).  Por ahora, Supongamos que queremos que el enlace "otros colores" se muestre debajo del precio en la cuadrícula del producto, como la captura de pantalla anterior.

In that case, look for {{ product.price }} or {{ product.price_min }} in your file by using CTRL+F to find.  (Or you could just look for ‘price’ and it will likely show up as well.)

Una vez que lo haya encontrado, inserte el siguiente código:

{% assign option_index = 0 %}
{% for option in product.options %}
{% capture downcased_option %}{{ option | downcase }}{% endcapture %}
{% assign option_index = forloop.index0 %}
{% assign how_many_options = 0 %}
{% assign current_options = '' %}
{% for variant in product.variants %}
{% assign current_option = variant.options[option_index] %}
{% unless current_options contains current_option %}
{% if how_many_options > 0 %}
{% assign current_options = current_options | join: '|' | append: '|' %}
{% endif %}
{% assign current_options = current_options | append: current_option %}
{% assign current_options = current_options | split: '|' | sort %}
{% assign how_many_options = current_options | size %}
{% endunless %}
{% endfor %}

{% unless option == "Title" %}
{% if current_options.size > 1 and option contains "Colo"%}
More Colors >
{% endif %}
{% endunless %}
{% endfor %}

Paso 4: guardar.

Guarde el archivo. A continuación, actualice la cuadrícula de la colección (por ejemplo, yendo a YOURSHOP.com/collections/all) y debería verla allí.

Notas:

• Puedes cambiar "más colores >" a cualquier texto que desees, por ejemplo, "Mostrar más colores", "ver otras opciones", etc.
• Comprobamos el "Colo" arriba, para tener en cuenta tanto el ColO (Inglés americano) y ColoUr (inglés británico/australiano).

Invitamos a ver nuestros otros grandes posts del blog en Shopify responsive checkout tenemos otros tutoriales sobre cómo respaldar tu tienda Shopify.  Por último, nos encantaría que visite nuestra página de servicios! ¡ Podemos ayudarte a explotar tus ventas!

—

¿Preguntas? Encantados de responder en los comentarios. Gracias nuevamente por seguir nuestra Shopify Insider blog @ Blackbelt Commerce, tenemos muchos otros posts valiosos e informativos que le ayudarán a seguir para optimizar su sitio web: aquí están nuestras principales recomendaciones; Cómo hacer una copia de respaldo de tu tienda Shopify,  the importance of e-commerce stores, 4 social media tricks for your e-commerce storeY Cómo mostrar el porcentaje de la hoja de trucos. Asegúrese de revisar todos nuestros opiniones de clientes.  Además, puede aprender todo sobre que son los expertos en Shopify en Blackbelt Commerce.