¿Quieres Tutoriales prácticos de Shopify para sacar el dolor de cabeza de la actualización de su tienda, y ayudarle a aumentar sus ventas? Únase al dojo VIP de Blackbelt Commerce. Nota: Desde que publicamos el artículo a continuación en 2013, Shopify ha actualizado su tutorial con un brillante nueva versión que funciona mucho mejor. Hemos dejado el post abajo en caso de que quieras referirnos a él, pero tu mejor apuesta es seguir la nueva versión de Shopify Aquí:
¿Necesitas mostrar una colección de productos en una página de tu tienda Shopify?
De Shopify artículo inicial proporciona un punto de partida decente, pero hay un problema con él.
Usando el método anterior, puede terminar con la misma imagen de producto una y otra vez, si sus colecciones contienen el mismo primer producto. La razón es esta: la solución de Shopify arriba toma la primera imagen del primer producto en esa colección.
Si tiene dos colecciones – "Under $100" y "HATS", el primer producto podría ser el mismo – un sombrero con un precio de $20. Ese mismo sombrero se mostrará dos veces cuando añadas tus colecciones usando el método anterior. Esto no se ve bien.
Lo que necesitamos: la capacidad de establecer y usar la imagen de colección en su lugar.
Mostrar una imagen de colección – en lugar de una imagen de producto – nos permite establecer una imagen específica para cada colección y mostrarla aquí en la página. La forma en que esto funciona es:
- Si hay una imagen de colección, muéstrela. Esto significa que podríamos tener una imagen única para nuestra colección "under $100" y nuestras colecciones "HATS" en el ejemplo anterior.
- Si no hay ninguna imagen de colección, muestre la primera imagen del primer producto de la colección. Esto es un seguro. ¿No hay imagen de colección? Mostrar una imagen de producto en su lugar, por lo que no terminamos con una imagen en blanco.
Cómo hacerlo: aquí está el código que desea
Pssst... ¿quieres más consejos y soluciones de crecimiento empresarial como estos? Construimos toda una suite de complementos útiles para los propietarios serios de la tienda Shopify, basándonos en nuestro trabajo en más de 250 proyectos de Shopify.
→Consulte el kit de herramientas de Shopify aquí..
Ahora, en el resto del tutorial...
Siga las tutorial aquí, with one crucial change: In linklist.l iquid (the snippet this tutorial will ask you to create), use the following code instead. You may need to tweak the CSS settings – this snippet is built for the wonderful Mobilia Theme – but the logic and layout will work for any theme.
Aquí está:
{% if linklists[linklist].links.size > 0 %}
<!-- BEGIN table.products -->
<table class="products">
{% tablerow link in linklists[linklist].links cols: 3 %}
<div class="one-third column thumbnail">
<a href="{{ link.url }}" title="Browse our {{ link.object.title | escape }} collection.">
{% if link.object.image.src %}
<!-- collection image -->
<img src="{{ link.object.image.src | collection_img_url: 'large' }}" alt="{{ link.object.title | escape }}" />
{% else %}
<!-- if there's no collection image, show the first product image instead -->
<img src="{{ link.object.products.first.featured_image | product_img_url: 'large' }}" alt="{{ link.object.title | escape }}" />
{% endif %}
<br/><span class="info">{{ link.title }}</span>
</a>
</div>
{% endtablerow %}
</table>
<!-- END table.products -->
{% else %}
<p>Please {{ 'create a link list' | link_to: '/admin/links' }} that contains links to the collections you wish to feature here. The title of that link list must be <strong>{{ linklist | replace: '-', ' ' | capitalize }}</strong>.</p>
{% endif %}
Wrap-Up
- A veces, queremos mostrar colecciones en una página. Esto se utiliza a menudo en las páginas de subcategoría.
- El tutorial de Shopify es un gran comienzo, pero hay un hueco. No agarra la imagen de la colección-sólo la primera imagen del primer producto-por lo que puede terminar con la misma imagen una y otra vez, que no se ve bien.
- Para evitarlo, siga el mismo tutorial, pero utilice el código anterior en su nuevo 'Linklist. Liquid', en lugar del original.
***
Pssst... ¿quieres más consejos y soluciones de crecimiento empresarial como estos? Construimos toda una suite de complementos útiles para los propietarios serios de la tienda Shopify, basándonos en nuestro trabajo en más de 250 proyectos de Shopify.
→Consulte el kit de herramientas de Shopify aquí..
***
Gracias por mostrar interés en Shopify Insider blog @ Blackbelt Commerce. También tenemos algunas recomendaciones principales del blog para que usted Compruebe hacia fuera; Media Gallery for Shopify which social media network is good for your brand?, image gallery, how much does it cost to hire a shopify expert?, Y SEO para tu tienda Shopify. Vigila las nuevas publicaciones del blog.
¿Preguntas? ¿Comentarios sobre una mejor manera? Me encantaría oírlos en los comentarios. Si desea que veamos la página en su tienda, por favor asegúrese de incluir un enlace (con la contraseña si está protegido por contraseña), de lo contrario, no podremos verlo 🙂 ¡ gracias!
Hola Tristan,
¡ Impresionante post! Estoy consiguiendo un comportamiento gracioso en mi tienda con esto:
Aquí están los links que están regresando:
www.mystore.com/pages/”/collections/flour-grains-rice”
www.mystore.com/pages/”/collections/herbs-spices-seasonings”
¿Alguna idea de por qué está sucediendo esto?
Hola Tosin,
Me alegro de que lo haya encontrado útil.
Parece que tienes algunas cotizaciones adicionales allí donde está generando la colección + producto. Mi sugerencia sería comprobar la línea de código que está generando la parte después de/Pages/, como una primera parada. También – no querrás/pages/y/Collections/en la misma URL, ya que eso no funcionará. Debe ser uno o el otro.
Por lo tanto, probablemente es una línea de código que necesita corregirlo, donde se genera la última parte de la dirección URL. ¡ Espero que ayude!
Tristan.
Hola, estoy teniendo exactamente el mismo problema como arriba. Copié el código como se muestra y añadí el nombre de la lista de enlaces. Estoy tratando de mostrar las colecciones en mi página de inicio.
Gracias. 🙂
Hola, necesitaría un enlace para poder verlo 🙂 ¿qué sucede cuando se utiliza el código anterior?
Cuando utilizo su código alternativo – consigo el mismo extra "en mis enlaces, y me da un marcador de posición en lugar de la imagen.
Cuando cambio el fragmento a uno en la instrucción de Shopify que tira de la imagen, y no da el extra "
Hola, ¿podría enviar un enlace a su página? Puedo echar un vistazo. ¡Gracias!
He añadido una plantilla llamada Navidad-oferta y una colección llamada "oferta navideña". Ahora quiero añadir esta colección a la página de ofertas navideñas. Por favor, sugiera la solución.
Hola, ¿podría enviar un enlace a su página? Necesitaría ver eso para poder hacer una sugerencia 🙂 ¡ gracias!
¡ Muchísimas gracias por publicar este contenido gratis! Estoy seguro que en algún momento voy a necesitar ayuda experta y tú serás el primero en mi lista ya que has probado (a través de este foro) que sabes lo que estás haciendo. Gracias por la ayuda y elogios a su estrategia de marketing. ¡ Muchas gracias!
Gracias Sarah, me alegro de que te gustó!
La contraseña para entrar en la tienda es 4167858618
Seguí todas las instrucciones, pero me sigue dando esto:
Por favor, cree una lista de enlaces que contenga vínculos a las colecciones que desea que se incluyen aquí. El título de esa lista de enlaces debe ser Norval morrisseau.
¿Alguna idea?
Hola Janet,
Esa es una directriz en sí misma 🙂 ¿ha creado la lista de enlaces, en Navigation?
Hello i am using the https://icon-shopify-theme.myshopify.com/ theme, are you familiar with a way to show the collections in the same format as the feature products are showing?
No quiero un caousel, sólo quiero una fila de cuatro selecciones con la muestra de las colecciones de esa manera en lugar de un carrusel, hazme saber si puedes ayudar. Gracias
Hey Paul! This should be more or less built into your theme, using the collection-list.liquid template. Looks like it’s working quite well, as per this page: https://icon-shopify-theme.myshopify.com/collections
Si eso es lo que necesita, puede simplemente enlazar allí desde su navegación. Si no, sólo responda aquí y veré si puedo ayudar más.
Salud
Tristan.
Thanks SOOOO much. I struggled all morning annoyed at my lack of experience in liquid. The only, and literally ONLY thing I’d want past the point of my new custom collections page shown here: https://flyryde.myshopify.com/pages/design would be if it could react to page size the same way my main collections page does. In other words, on mobile it would size down to show only 1 collection per row instead of sizing down the 3 collections currently shown.
De cualquier manera, enormes gracias de nuevo!
Hola
Me alegro de que ayudó! Bien hecho, la página se ve bien 🙂 para la vista móvil, difiere por tema. Como estás usando BlockShop, mi sugerencia sería intentar agregar las clases div responsivas a la página que creaste. Este es un ejemplo que puede aplicar a las columnas 3 x:
En lugar de sólo
Querido Tristan,
Espero que lo estés haciendo muy bien. Necesito una pequeña ayuda, por favor. He implementado el código Page. lista-Collections y actualmente tiene un problema donde todas las colecciones se muestran en el centro de la página.
¿Cómo puedo conseguir que formen una fila (una junto a la otra)
saludos
Srinivas
Hola, ¿podría enviar un enlace a la página? Y voy a echar un vistazo y ver si puedo recomendar. (No se puede decir bastante sin ver la página 🙂). Gracias – Tristan.
HelloTrsitan!
Gracias por publicar este gran tutorial, tengo una solicitud muy similar, comprar un poco diferente.
He creado una página personalizada, y quiero agregar colecciones multiplicados, pero no quiero que se generen automáticamente, solo quiero insertar la línea de código que mostrará la colección, me las arreglé para mostrar la colección de productos destacados, pero no puedo encontrar una manera de mostrar una colección diferente. ¿Alguna sugerencia?
Aquí está el diseño
https://drive.google.com/open?id=0B9_r3iDkYzEUZE9SVmxWUlp6ZkRhVFdGWFQ3c09tMXFTa3Bv
Basicly 1 página personalizada tendrá 3 colecciones.
Saludos a Dimitri!
¡ Hola Sam! Gracias por leer. Desafortunadamente, este es un poco más complejo de lo que podemos hacer aquí, pero si desea algo de ayuda no dude en ponerse en contacto con nosotros y podemos ser capaces de ayudar como un mini-proyecto 🙂 Hope que ayuda, sólo hazme saber si tienes alguna otra pregunta.
Gracias
Tristan.
Hola Tristan,
Seguí el tutorial de Shopify, y traté de implementar sus cambios porque su ' me está dando una columna de colecciones en lugar de filas. Desafortunadamente no puedo encontrar donde la creación de Linklist. Liquid se menciona o se utiliza en su tutorial o el suyo.
Su ayuda/perspicacia sería muy apreciada.
PWD: tracietricia
Hola Bob, parece que la contraseña no funciona, así que no puedo echar un vistazo al momento. Siéntase libre de hacernos saber si se abre más tarde y podemos echar un vistazo. ¡Salud!
Hola he intentado seguir este tutorial a la letra, pero cada vez que asigne la plantilla de página que he creado a una nueva página, parece sobrescribir el título de mi página y mostrar "colecciones de productos"-y sólo muestra una página de todas mis colecciones-no los que he hecho en el Lista de enlaces.
Lo he intentado dos veces, con 2x páginas diferentes y listas de enlaces y tener el mismo resultado hasta ahora. ¿Puede por favor apuntarme en la dirección correcta?
The page in question is https://rideonbmx.com.au/pages/testcollections
Hey Chris! Looking mostly good, but I can see what you mean about the title. It all depends on your theme, we’d need to take a look at the backend of your store to check that out. We’d be happy to do so, but that’s a little more than what we can cover for free as part of the post. If you’d like us to delve into it in a mini-project (1-2 hours would likely cover it), please contact us over here and happy to help: https://www.blackbeltcommerce.com/contact/
¡Gracias!
Tristan.
Hola Tristan, estoy usando el tema de suministro y no tengo Linklist. Liquid. ¿Qué puedo hacer?
Hola Gary! La mejor apuesta sería crear Linklist. Liquid, luego insertarlo usando:
{% include ‘linklist.liquid’ %}
en el lugar correcto de la plantilla. ¿Eso ayuda? 🙂
¡Oye! Esto es realmente emocionante... Cuando lo pego a pesar de que dice "por favor, cree una lista de enlaces que contiene vínculos a las colecciones que desea que se presentan aquí. El título de esa lista de enlaces debe ser. "en la página que creé... ¿Qué necesito cambiar en la codificación para solucionarlo?
Estoy usando el tema Blockshop
Hola Lani – encantado de ayudar. ¿Intentaste crear la lista de enlaces? 🙂 lo que esto significa es, ir a la tienda en línea > navegación y crear una nueva lista de enlaces, según las pautas 🙂 Hope que ayuda, sólo hazme saber si tienes alguna otra pregunta.
Gracias
Tristan.
En otros casos, estos acuerdos pueden ser la forma estándar de préstamos inmobiliarios dentro de su jurisdicción. Familiarícese con ciertas regulaciones en relación con sus restricciones sobre propiedades abandonadas
en las instalaciones de almacenamiento. Localizaremos el servicio de conducción de tráfico que, si se hace correctamente, puede ser extremadamente bueno para usted como la empresa, como
así como a los clientes, que pueden transformarse en clientes habituales, como es necesario con un negocio de Internet.
Hola el enlace al tutorial está muerto, así que no tengo idea de cómo aplicar este código editado y cómo afecta al original. ¿Hay algún lugar donde pueda acceder al tutorial completo?
He notado que no monetizar su sitio web, no pierda su tráfico,
puedes ganar dinero adicional cada mes porque has
tiene contenido de alta calidad. Si quieres saber cómo hacer dinero extra, busca: el Adsense esencial de Ercannou
Alternativa
¿Cómo es eso?