¿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:
<ul class="vendor-list block-grid three-up mobile one-up">
{% 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 %}
<li class="vendor-list-item"><a href="/collections/{{ product_vendor | handleize }}">{{ product_vendor }}</a></li>
{% else %}
<li class="vendor-list-item">{{ product_vendor | link_to_vendor }}</li>
{% endif %}
{% endfor %}
</ul>
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
https://www.reusablesetc.com.au/pages/brands
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.
¡ 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?
¡ 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.
Gracias por tu tutorial. Para hacer la columna 3 o 4 Cómo hacerlo, si tiene cualquier trabajo CSS entonces será mejor si usted me proporciona.
Hi there, thanks for your message. To fix that one up, we’d likely need to take a look at the back end of your site, as it’s a bit tricky to tell just from the front end. Feel free to contact us here: https://www.blackbeltcommerce.com/contact/
¡ 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! 🙂
¡ Hola Brad, Woohoo! Me alegro de que le haya sido útil 🙂 gracias — Tristan.
Hola
Recientemente agregué el código. Sin embargo, la página de marcas está en blanco. Por favor, avise.
Gracias
Trish
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!
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!
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!
Hola Tristan,
Agregué el código hace unos días, pero no pude lograr la apariencia de la lista de marcas. ¿Me puede ayudar y aclarar el paso 4?
Gracias
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!
Gracias por este tutorial. Una pregunta para su demo, cada uno de los proveedores están configurados para, por ejemplo,.
*link removed*
mientras que mi como este
*link removed*
Entonces, ¿cómo cambiarlo? Gracias
¡Hola! No es necesario cambiarlo: el tutorial anterior debería darle direcciones URL relativas para que use la dirección URL de su tienda, no BBT.
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?
Hi Anum! Glad to hear you’ve made a nice start on it. Each theme is a bit different, so the best way to find out how to get them into columns (e.g. thirds) is to see which kind of responsive style your theme is using, then apply that to the code you implemented. This is easier than it sounds 🙂 We have a separate post for that, which will help you figure out how to split it into columns — here it is – https://www.blackbeltcommerce.com/create-multiple-columns-using-html/
Espero que ayude, sólo hazme saber si tienes alguna otra pregunta.
Gracias
Tristan.
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?
https://www.spoiledbrat.co.uk/pages/brand-a-z
Un vínculo a la página del proveedor que he creado con la codificación
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 🙂
Hi Susan, thanks for the update. Each theme is a bit different, so the best way to find out how to get them into columns (e.g. thirds) is to see which kind of responsive style your theme is using, then apply that to the code you implemented. This is easier than it sounds 🙂 We have a separate post for that, which will help you figure out how to split it into columns — here it is – https://www.blackbeltcommerce.com/create-multiple-columns-using-html/
Espero que ayude, sólo hazme saber si tienes alguna otra pregunta.
Gracias
Tristan.
¡ Hola, gracias por su información sobre esto! He conseguido que la página funcione, pero ¿cómo puedo crear un menú desplegable cuando solo se enlaza a la Página principal de Designers? Si creo una lista desplegable ¿Cómo elijo un proveedor específico como este sitio web parece ser capaz de hacer?
https://www.hellogreen.com.au/pages/brands
Muchas gracias
Sam
Hi Sam! Thanks for your note, glad you liked the tutorial. The dropdowns on Hello Green are custom-built 🙂 So that isn’t really part of the tutorial here — for that you’d need to refer to your theme. This might help: https://help.shopify.com/themes/development/implementing-smart-drop-down-menus
¡Salud!
Tristan.
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.
Plus, this link is broken: https://www.blackbeltcommerce.com/create-multiple-columns-using-html/
Gracias de antemano,
Doug
¡ Hola Doug! Sí, según la directriz anterior, quise decir en la parte superior, justo antes de todo lo demás, es decir, la línea 1. Esas son sólo variables de todos modos, por lo que el cliente no verá nada allí, sólo se está configurando para el resto del contenido.
For the columns, I’d suggest this article: https://www.blackbeltcommerce.com/create-multiple-columns-using-html/
¡ Espero que ayude!
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
Hi Doug, thanks for letting me know about that! We recently switched domain names, so there are still a few things to update. That’s fixed – the article is here: 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!
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.
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
Gracias por hacernos saber sobre esto, voy a echar un vistazo a 🙂 apreciado!
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 %}- {{ product_vendor }}
- {{ product_vendor | link_to_vendor }}
{% 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 %}
{% else %}
{% 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
{% else %}
{% 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.
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.
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.
Del mismo modo, no podría publicar en este artículo a menos que me volví de JS.
Gracias por hacernos saber-mirando en este 🙂
Hola Tara! ¿Es capaz de publicar un enlace a la página? Encantado de echar un vistazo 🙂 gracias.
¡ Buen post!
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
Hi Sarah, glad it helped! Yes, but it depends on your theme, this might help: https://stackoverflow.com/questions/8289805/getting-rid-of-bullet-points-from-ul
Hola, ¿cómo puedo – en un idioma para los maniquíes de código – cambiar la visualización de ser una sola columna a ser más como unas cuantas columnas horizontales?
Gracias