Página del proveedor en Shopify: la forma inteligente de mostrar automáticamente a los vendedores en tu tienda

Por Cesar Beltran
La forma inteligente de mostrar automáticamente a los vendedores en el sitio web de comercio electrónico de su tienda
Escuche nuestro podcast

¿Necesita mostrar una lista de proveedores en su Tienda Shopify, sin tener que actualizarlos manualmente? Basándonos en nuestro trabajo con más de 300 tiendas Shopify, esta es una petición bastante común. Así que hemos reunido una manera inteligente de mostrar automáticamente todos los vendedores en su tienda, alfabéticamente. Así es como funciona:

  • Si ya hay una colección para ese proveedor (por ejemplo, podría tener yourstore.com/collections/nike para mostrar todos los productos de Nike), se señalará a esa colección.
  • Si no hay una colección para ese proveedor, se señalará a una página de proveedor que muestra todos los productos de ese proveedor.

¿Por qué es bueno?  Si tiene una colección de proveedores específica, es posible que desee mostrar texto específico o una imagen en la parte superior de esa colección.  Esto le da la flexibilidad de usar ambos : una colección o simplemente una página de proveedor normal, sin tener que actualizar nunca la página de proveedor de nivel superior.

Cómo implementarlo: proveedores automáticos en su tienda Shopify

Paso 1: Abre el administrador de tu tienda y ve a temas.  Haz una copia de seguridad de tu tema como esbozado aquí.

Paso 2: En "plantillas", haga clic en crear nueva plantilla.  Llámalo algo como "Page. vendorlist" o similar.  Esto es lo que seleccionará cuando cree su página.

Paso 3: Al hacer clic en "Aceptar", debería llevarte a tu nueva plantilla.  Verá esto:

{{ page.content }}

Debajo de eso, pega esto:

    {% for product_vendor in shop.vendors %} {% assign its_a_match = false %} {% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape  }} {% endcapture %} {% assign my_collection_handle_stripped = my_collection_handle | strip | escape %} {% for collection in collections %} {% if my_collection_handle_stripped == collection.handle %} {% assign its_a_match = true %} {% endif %} {% endfor %} {% if its_a_match %}
  • {{ product_vendor }}
  • {% else %}
  • {{ product_vendor | link_to_vendor }}
  • {% endif %} {% endfor %}

Paso 4: Luego, en la parte superior de ese archivo, pegue esto:

{% assign counter = 0 %}
{% for vendor in shop.vendors %}
  {% assign counter = counter | plus: 1 %}
{% endfor %}

{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}

Salvar.

Paso 5: Ahora ve a admin > pages y crea una nueva página, "lista de vendedores", por ejemplo. Llámalo como quieras. Añadir algo de contenido en la parte superior, como "aquí hay una lista de todos nuestros vendedores". Salvar. Luego, ve a la parte inferior y verás "plantilla de página". Elija el nombre de la plantilla que acaba de crear, en nuestro caso, "Page. proveedor-lista. Liquid". Salvar.

Paso 6: Ahora abre esa página. Debería ver una lista de proveedores en su tienda. Se vinculará a las colecciones de proveedores cuando sea posible, y cuando no haya ninguna recopilación para ese proveedor, se vinculará a una página de proveedor generada automáticamente.  Es posible que también desee vincular esa página de su navegación para que los clientes puedan encontrarla.

¡ Ya terminaste!  Puede que le guste agregar algo de su propio CSS para estipelo o usar las columnas responsivas de su tema si lo desea.  De lo contrario, ya terminaste.

Ejemplo: https://www.beltsbucklestees.com/pages/a-z-list-of-brands-2


Aquí hay dos ejemplos de dos de nuestros clientes:

https://www.beltsbucklestees.com/pages/a-z-list-of-brands-2
Página de vendedores de ropa BBT en Shopify

https://www.reusablesetc.com.au/pages/brands
Reusables etc proveedores página en Shopify

Gracias por mantenerse al día con nuestros Shopify Insider blog @ Blackbelt Commerce. Por favor, asegúrese de revisar nuestra Servicios. También tenemos algunas recomendaciones principales del blog para que usted Compruebe hacia fuera; GIFs animados para páginas de productos de Shopify,  Cómo mostrar el porcentaje de descuento guardado, how to boots the site popularity of your shopify plus store,  Los beneficios del pensamiento multicanal.  Vigila las nuevas publicaciones del blog.

¿Preguntas? Deja un comentario a continuación y te volveremos a ver lo antes posible.

¿Cuáles son las principales tiendas de Shopify?

Toma lo que aprendimos y utilíla para tu ventaja.
Obtenga nuestra investigación exclusiva: Insights de más de 500 tiendas Shopify.

Impulsado por ConvertKit
Cuéntales a los demás sobre este post

Comentarios 39

  1. ¡ Muchas gracias por publicar este tutorial! Después de años de usar diferentes plataformas de comercio electrónico, no puedo creer que algo como esto vea tan difícil en Shopify.

    Pero tengo una pregunta. El mío sólo crea una lista larga de una sola columna. Seguí el tutorial exactamente, pero no puedo conseguir la mía para mostrar en 3 columnas como el ejemplo que se enlaza a.

    ¿Tiene alguna idea de cómo corregirlo?

    1. ¡ Hola, me alegro de que te gustó! Traté de echar un vistazo a su sitio, pero está protegido por contraseña en el momento 🙂 para que se muestren en tercios/columnas, es necesario utilizar los estilos de respuesta en el tema para hacer las columnas de un tercio de ancho (es decir, 33,3% ancho). A continuación, deben entrar en cascada como en el ejemplo anterior. Espero que ayude, sólo hazme saber si tienes alguna otra pregunta.
      Gracias
      Tristan.

  2. ¡ Gracias por esto! Estaba confundido por qué no pude encontrar nada como esto en cualquier lugar en el sitio oficial de Shopify. Me alegro de que haya hecho este tutorial porque lo necesitaba! 🙂

    1. Hola Trish! Si sigue los pasos anteriores, debería funcionar. Asegúrese de seleccionar la plantilla de página en el paso 5. Si necesita ayuda, póngase en contacto con nosotros y le podemos dar una cotización sobre la configuración para usted. ¡Salud!

  3. Gracias por este tutorial, pero tengo problemas para conseguir que funcione con mi sitio. Estoy usando el tema clásico. Cuando voy a hacer una nueva plantilla, le pregunta que quiero que sea una página, colección, contraseña y algunas otras opciones, y no estoy exactamente seguro de cuál usar. He intentado usar Page, pero luego bajo las nuevas páginas no puedo ver el menú desplegable para la nueva plantilla que creé. ¿Alguna sugerencia? ¡Gracias!

    1. Nueva plantilla de página será el camino a seguir. Si estás usando el tema LIVE (no una vista previa), entonces debería mostrarse. De lo contrario, si está desarrollando la nueva plantilla de página en un tema de vista previa, no podrá seleccionarla hasta que publique ese tema en vivo. ¡ Espero que ayude!

    1. Hola Trish! Si sigue los pasos anteriores, debería funcionar. Asegúrese de seleccionar la plantilla de página en el paso 5. Si necesita ayuda, póngase en contacto con nosotros y le podemos dar una cotización sobre la configuración para usted. ¡Salud!

  4. Pero tengo una pregunta. El mío sólo crea una lista larga de una sola columna. Seguí el tutorial exactamente, pero no puedo conseguir la mía para mostrar en 3 columnas como el ejemplo que se enlaza a.

    ¿Tiene alguna idea de cómo corregirlo?

    1. Hola Anum! Me alegra saber que has hecho un buen comienzo. Cada tema es un poco diferente, por lo que la mejor manera de averiguar cómo ponerlos en columnas (por ejemplo, tercios) es ver qué tipo de estilo de respuesta está usando su tema, luego aplicarlo al código que implementó. Esto es más fácil de lo que parece 🙂 tenemos un post separado para eso, que le ayudará a averiguar cómo dividirlo en columnas — aquí está – https://www.blackbeltcommerce.com/create-multiple-columns-using-html/

      Espero que ayude, sólo hazme saber si tienes alguna otra pregunta.
      Gracias
      Tristan.

  5. Esto es brillante, gracias. He implementado esto en mi sitio sin embargo estoy teniendo dificultades para poner la lista en 3 o 4 columnas y me pregunto si usted podría ayudar? No tengo mucha experiencia de codificación – así que si usted podría ayudar con lo que la codificación para entrar para lograr esto y dónde?

    Sé arriba que usted ha dicho "para conseguir que se muestren en tercios/columnas, usted necesitaría utilizar los estilos responsivos en su tema para hacer las columnas un tercio de ancho (es decir, 33,3% ancho."

    Sin embargo no estoy seguro de cómo iba a lograr esto?

      1. Hola Susan — que se ve muy bien, muchas gracias por publicar el enlace, me encanta cuando escucho a la gente que ha estado usando los tutoriales que publicamos. Me alegro de que ayudó y gracias por hacernos saber 🙂

    1. Hola Susan, gracias por la actualización. Cada tema es un poco diferente, por lo que la mejor manera de averiguar cómo ponerlos en columnas (por ejemplo, tercios) es ver qué tipo de estilo de respuesta está usando su tema, luego aplicarlo al código que implementó. Esto es más fácil de lo que parece 🙂 tenemos un post separado para eso, que le ayudará a averiguar cómo dividirlo en columnas — aquí está – https://www.blackbeltcommerce.com/create-multiple-columns-using-html/

      Espero que ayude, sólo hazme saber si tienes alguna otra pregunta.
      Gracias
      Tristan.

  6. Hola

    Gracias por esto.

    At step 4, when you say to paste the code at the “VERY top of that file”, do you mean line 1? Or above {{ page.content }} . There’s some code above {{ page.content }} in my theme. Note sure specifically where to paste the second piece of code. I’ve tried all combo’s and still get a single list.

    Además, este enlace está roto: https://www.blackbeltcommerce.com/create-multiple-columns-using-html/

    Gracias de antemano,

    Doug

  7. Hola

    ¿Puede aclarar el paso 4:

    "Entonces, en la parte superior de ese archivo, pegue esto:"

    En la parte superior como en... línea 1?

    Or above {{ page.content }} … or below it?

    Sólo puedo conseguir una sola columna.

    Además, en su respuesta a Susan, se rompe el enlace a la publicación sobre la división de columnas.

    Gracias

    1. Hola Doug, gracias por dejarme saber sobre eso! Recientemente hemos cambiado los nombres de dominio, por lo que todavía hay algunas cosas para actualizar. Eso es fijo – el artículo está aquí: https://www.blackbeltcommerce.com/create-multiple-columns-using-html/

      Si solo ves una columna, te sugiero que revivas ese artículo. Es diferente para cada tema de Shopify, así que un poco difícil de aconsejar aquí. ¡ Espero que ayude!

  8. Tristan, gracias por este Consejo. Parece que funciona muy bien hasta ahora.
    Pero tengo una pregunta para ti. ¿Tiene una forma sencilla de excluir a uno o más proveedores de la lista? Tengo un cliente que desea mostrar todos sus proveedores de terceros en una página, pero excluir su propia lista de proveedores.
    Cualquier Consejo que pueda proporcionar sería genial.

    1. Por cierto, creo que puede estar teniendo un problema con su script de bloqueo de spam en esta página. Traté de dejar un comentario anteriormente, y nada pasaría cuando traté de enviar. Confirmado en varios navegadores. Sin embargo, deshabilitar JS en la página parece haber permitido que el comentario se publique como normal. Sólo una FYI

    2. Hola MDJ, me alegro de que te gustó! Sí, eso podría hacerse. Imaginemos que la marca de su cliente se llama "cinturón negro". Para la parte superior del código, que normalmente es así:

        {% for product_vendor in shop.vendors %}
        {% assign its_a_match = false %}
        {% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape }} {% endcapture %}
        {% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}

        {% if its_a_match %}

      • {{ product_vendor }}
      • {% else %}

      • {{ product_vendor | link_to_vendor }}
      • {% endif %}
        {% endfor %}

      Para * omitir * la marca, puede Agregar una declaración "a menos que" como esta:

      {% if its_a_match %}
      {% unless product_vendor == ‘Blackbelt’ %} <--- note: i added this

    3. {{ product_vendor }}
    4. {% else %}

    5. {{ product_vendor | link_to_vendor }}
    6. {% endunless %} <--- NOTE: I ADDED THIS {% endif %} {% endfor %} — The syntax and placement might need some adjustment depending on your particular theme, but that’s the approach I’d take. Hope that helps, just let me know if you have any other questions. Thanks, Tristan.

      1. Tristan, gracias por tu pronta respuesta.
        La solución parece obvia una vez que lo deletreó, pero por alguna razón simplemente no lo veía antes.

        Solo para que lo sepas, cuando traté de implementarlo como lo habías expuesto anteriormente, con una sola declaración, la plantilla solo mostraría a esos vendedores con una colección explícita. Sin embargo, ajustando cada mitad de la instrucción IF/Else en la coincidencia a menos que las instrucciones, parece funcionar perfectamente. Estoy seguro de que esta es una solución menos que elegante, pero siempre y cuando sea funcional, que así sea.

  9. Gran tutorial, gracias.
    Soy capaz de obtener una lista de una columna de proveedores. Y usando el enlace que proporcionó al tutorial de múltiples columnas, puedo ver la clase correcta en mi código (class = "Desktop-12 Mobile-3"), pero sigue apareciendo como una columna. Estoy usando el tema Vantage también. ¿Eres capaz de ayudar? Tia.

  10. Gracias por el gran tutorial!

    Todo está funcionando, pero hay puntos de bala antes de todos los vendedores. ¿Es posible eliminar los puntos de bala?

    Gracias de antemano.

    Atentamente
    Sarah

Añadir comentario

Su dirección de correo electrónico no se publicará. Los campos obligatorios se marcan *

Este sitio utiliza Akismet para reducir el spam. Obtén información sobre cómo se procesan los datos de tus comentarios.