Página de proveedores en Shopify: La forma inteligente de mostrar automáticamente a los proveedores en su tienda

Listen To Our Podcast

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

Si ya hay una colección para ese proveedor (por ejemplo, puede que tenga yourstore.com/collections/nike para mostrar todos los productos de Nike), entonces, apuntará a esa colección.

Si no hay una colección para ese proveedor, apuntará a una página de proveedor que muestre todos los productos de ese proveedor.

¿Por qué es esto 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 dicha colección. Esto le da la flexibilidad de usar ambas, 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. Haga una copia de seguridad de su tema como se describe aquí.

Paso 2: En “plantillas”, haz clic en crear nueva plantilla. Llámalo algo así como “page.vendorlist” o similar. Esto es lo que seleccionará cuando cree su página.

Paso 3: Cuando haga clic en “Aceptar”, debería llevarlo a su nueva plantilla. Verás esto:

{{page.content}}

Debajo de eso, pega esto:

ul class = “proveedor de la lista de bloques de red móvil de tres hacia arriba”

{% para product_vendor en 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%}

{% para colección en colecciones%}

{% si my_collection_handle_stripped = = collection.handle%}

{% assign its_a_match = true%}

{% endif%}

{% endfor%}

{% si its_a_match%}

li class = “vendedor-list-item” a href = “/ collections / {{product_vendor | handleize}}” {{product_vendor}} /a /li

{% else%}

li class = “vendedor-list-item” {{product_vendor | link_to_vendor}} /li

{% endif%}

{% endfor%}

/ul

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

{% asignar contador = 0%}

{% para el proveedor en shop.vendors%}

{% asignar contador = contador | más: 1%}

{% endfor%}

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

Ahórrate.

Paso 5: Ahora ve a Páginas de administración y crea una nueva página, “Lista de proveedores” por ejemplo. Lo llamas como quieras. Añade contenido en la parte superior, como “aquí hay una lista de todos nuestros proveedores”. Ahórrate. Luego, vaya a la parte inferior y verá “Plantilla de página”. Elija el nombre de la plantilla que acaba de crear, en nuestro caso, “page.vendor-list.liquid”. Ahórrate.

Paso 6: Ahora abre esa página. Deberías ver una lista de proveedores en tu tienda. Se vinculará a las colecciones de proveedores siempre que sea posible, y cuando no haya colección para ese proveedor, se vinculará a una página de proveedor generada automáticamente. También es posible que desee vincular esa página desde su navegación para que sus clientes puedan encontrarla.

¡Terminaste! Es posible que desee agregar algunos de sus propios CSS para darle estilo o usar las columnas receptivas de su tema si lo desea. De lo contrario, ya terminaste.

Ejemplo:

Aquí hay dos ejemplos de dos de nuestros clientes:

Gracias por estar al día con nuestro blog Shopify Insider @ Blackbelt Commerce. Por favor, asegúrese de consultar nuestros servicios. También tenemos algunas recomendaciones de blog principales para que usted revise; Gifs animados para páginas de productos Shopify, Cómo mostrar porcentaje de descuento guardado y los beneficios del pensamiento multicanal. Mantenga un vistazo a las nuevas entradas de blog.

¿Preguntas? Deje un comentario a continuación y nos pondremos en contacto con usted lo antes posible.

39 responses to “ Página de proveedores en Shopify: La forma inteligente de mostrar automáticamente a los proveedores en su tienda

  1. Thank you so much for posting this tutorial! After years of using different ecommerce platforms, I can’t believe something like this sees so difficult in Shopify.

    I have one question though. Mine just creates one, long, single-column list. I followed the tutorial exactly but I cant get mine to display in 3 columns like the example you link to.

    Would you have any ideas on how to correct that?

    1. Hi there, glad you liked it! I tried to take a look at your site, but it’s password-protected at the moment 🙂 To get them to show in thirds / columns, you’d need to use the responsive styles in your theme to make the columns one-third in width (i.e. 33.3% width). Then they should cascade across like in the example above. Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

      1. Thanks for your tutorial. For making the 3 or 4 column how to do, if have any CSS work then will be better if you provide me.

  2. Thanks for this! I was confused why I couldn’t find anything like this anywhere on Shopify’s official site. I’m glad you made this tutorial because I needed it! 🙂

    1. Hi Trish! If you follow the steps above, it should work. Make sure you select the page template in step 5. If you need some help, please contact us and we can give you a quotation on setting it up for you. Cheers!

  3. Thanks for this tutorial, but i am having problems getting it to work with my site. I am using the classic theme. When i go to make a new template, it asks it i want it to be a page, collection, password and a few other options, and Im not exactly sure which one to use. I have tried using page, but then under the new pages i am unable to see the drop down for the new template i created. Any suggestions? thank you!

    1. New page template will be the way to go. If you’re using the LIVE theme (not a preview), then it should show. Otherwise, if you’re developing the new page template in a preview theme, you won’t be able to select it until you publish that theme live. Hope that helps!

  4. Hi Tristan,

    I added the code a few days ago, but was unable to accomplish the brand list look. Can you please assist me and clarify Step 4?

    Thanks

    1. Hi Trish! If you follow the steps above, it should work. Make sure you select the page template in step 5. If you need some help, please contact us and we can give you a quotation on setting it up for you. Cheers!

  5. I have one question though. Mine just creates one, long, single-column list. I followed the tutorial exactly but I cant get mine to display in 3 columns like the example you link to.

    Would you have any ideas on how to correct that?

    1. 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/

      Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

  6. This is brilliant, thankyou. I have implemented this on my site however I am having difficulties putting the list into 3 or 4 columns & wonder if you could assist? I dont have much coding experience – so if you could help with what coding to enter to achieve this & where?

    I know above you have said “To get them to show in thirds / columns, you’d need to use the responsive styles in your theme to make the columns one-third in width (i.e. 33.3% width.”

    However Im not sure how I would achieve this?

      1. Hi Susan — that looks great, thanks a lot for posting the link, I love it when I hear folks that have been using the tutorials we publish. Glad it helped and thanks for letting us know 🙂

    1. 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/

      Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

  7. Hi,

    Can you please clarify Step 4:

    “Then, at the VERY top of that file, paste this:”

    At the very top as in … line 1?

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

    I can only get a single column.

    Plus, in your response to Susan, the link to the post about splitting columns is broken.

    Thanks

  8. Tristan, thanks for this tip. It seems to work great so far.
    I have a question for you though. Do you happen to have a simple way to exclude one or more vendors from the list? I have a client that would like to display all of their third party vendors on a page, but exclude their own vendor listing.
    Any advice you could provide would be great.

    1. BTW, I believe you may be having an issue with your spam blocking script on this page. I tried leaving a comment previously, and nothing would happen when I tried to submit. Confirmed in multiple browsers. However disabling JS on the page seems to have allowed the comment to post as normal. Just an FYI

    2. Hi MDJ, glad you liked it! Yes, that could be done. Let’s pretend your client’s brand is called “Blackbelt”. For the top part of the code, which is normally like this:

        {% 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 %}

      To *omit* the brand, you could add an ‘unless’ statement like this:

      {% 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, thank you for your prompt response.
        The solution seems obvious once you spelled it out, but for some reason I was just not seeing it before.

        Just so you know, when I tried to implement this as you laid it out above, with a single unless statement, the template would only show those vendors with an explicit collection. However by wrapping each half of the if/else statement in matching unless statements, it seems to work perfectly. I am sure this is a less than elegant solution, but as long as it is functional, so be it.

  9. Great tutorial, thanks.
    I am able to get a one column list of vendors. And using the link you provided to the multiple column tutorial, I can see the correct class in my code (class=”desktop-12 mobile-3″), but it is still showing up as one column. I am using the vantage theme also. Are you able to help? TIA.

  10. Thanks for the great tutorial!

    Everything is working but there are bullet points before all the vendors. Is it possible to remove the bullet points?

    Thanks in advance.

    Kind regards,
    Sarah

Add Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

;

Comments 39

  1. Thank you so much for posting this tutorial! After years of using different ecommerce platforms, I can’t believe something like this sees so difficult in Shopify.

    I have one question though. Mine just creates one, long, single-column list. I followed the tutorial exactly but I cant get mine to display in 3 columns like the example you link to.

    Would you have any ideas on how to correct that?

    1. Hi there, glad you liked it! I tried to take a look at your site, but it’s password-protected at the moment 🙂 To get them to show in thirds / columns, you’d need to use the responsive styles in your theme to make the columns one-third in width (i.e. 33.3% width). Then they should cascade across like in the example above. Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

      1. Thanks for your tutorial. For making the 3 or 4 column how to do, if have any CSS work then will be better if you provide me.

  2. Thanks for this! I was confused why I couldn’t find anything like this anywhere on Shopify’s official site. I’m glad you made this tutorial because I needed it! 🙂

    1. Hi Trish! If you follow the steps above, it should work. Make sure you select the page template in step 5. If you need some help, please contact us and we can give you a quotation on setting it up for you. Cheers!

  3. Thanks for this tutorial, but i am having problems getting it to work with my site. I am using the classic theme. When i go to make a new template, it asks it i want it to be a page, collection, password and a few other options, and Im not exactly sure which one to use. I have tried using page, but then under the new pages i am unable to see the drop down for the new template i created. Any suggestions? thank you!

    1. New page template will be the way to go. If you’re using the LIVE theme (not a preview), then it should show. Otherwise, if you’re developing the new page template in a preview theme, you won’t be able to select it until you publish that theme live. Hope that helps!

  4. Hi Tristan,

    I added the code a few days ago, but was unable to accomplish the brand list look. Can you please assist me and clarify Step 4?

    Thanks

    1. Hi Trish! If you follow the steps above, it should work. Make sure you select the page template in step 5. If you need some help, please contact us and we can give you a quotation on setting it up for you. Cheers!

  5. I have one question though. Mine just creates one, long, single-column list. I followed the tutorial exactly but I cant get mine to display in 3 columns like the example you link to.

    Would you have any ideas on how to correct that?

    1. 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/

      Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

  6. This is brilliant, thankyou. I have implemented this on my site however I am having difficulties putting the list into 3 or 4 columns & wonder if you could assist? I dont have much coding experience – so if you could help with what coding to enter to achieve this & where?

    I know above you have said “To get them to show in thirds / columns, you’d need to use the responsive styles in your theme to make the columns one-third in width (i.e. 33.3% width.”

    However Im not sure how I would achieve this?

      1. Hi Susan — that looks great, thanks a lot for posting the link, I love it when I hear folks that have been using the tutorials we publish. Glad it helped and thanks for letting us know 🙂

    1. 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/

      Hope that helps, just let me know if you have any other questions.
      Thanks,
      Tristan.

  7. Hi,

    Can you please clarify Step 4:

    “Then, at the VERY top of that file, paste this:”

    At the very top as in … line 1?

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

    I can only get a single column.

    Plus, in your response to Susan, the link to the post about splitting columns is broken.

    Thanks

  8. Tristan, thanks for this tip. It seems to work great so far.
    I have a question for you though. Do you happen to have a simple way to exclude one or more vendors from the list? I have a client that would like to display all of their third party vendors on a page, but exclude their own vendor listing.
    Any advice you could provide would be great.

    1. BTW, I believe you may be having an issue with your spam blocking script on this page. I tried leaving a comment previously, and nothing would happen when I tried to submit. Confirmed in multiple browsers. However disabling JS on the page seems to have allowed the comment to post as normal. Just an FYI

    2. Hi MDJ, glad you liked it! Yes, that could be done. Let’s pretend your client’s brand is called “Blackbelt”. For the top part of the code, which is normally like this:

        {% 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 %}

      To *omit* the brand, you could add an ‘unless’ statement like this:

      {% 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, thank you for your prompt response.
        The solution seems obvious once you spelled it out, but for some reason I was just not seeing it before.

        Just so you know, when I tried to implement this as you laid it out above, with a single unless statement, the template would only show those vendors with an explicit collection. However by wrapping each half of the if/else statement in matching unless statements, it seems to work perfectly. I am sure this is a less than elegant solution, but as long as it is functional, so be it.

  9. Great tutorial, thanks.
    I am able to get a one column list of vendors. And using the link you provided to the multiple column tutorial, I can see the correct class in my code (class=”desktop-12 mobile-3″), but it is still showing up as one column. I am using the vantage theme also. Are you able to help? TIA.

  10. Thanks for the great tutorial!

    Everything is working but there are bullet points before all the vendors. Is it possible to remove the bullet points?

    Thanks in advance.

    Kind regards,
    Sarah

Add Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.