Pipeline Theme - Show Product Variants on Collection Grid

Store Design
1

Hello Everyone! I am working on my shop with the Pipeline theme but I need to show all products “Color” variants on the collection page. I have also a “Size” variant but I don’t need to show this one. Something like this:

Screenshot 2022-04-05 at 13.32.01.png
Screenshot 2022-04-05 at 13.32.01.png2310×718 139 KB

I have read many articles about this but apparently Pipeline code is very different to others. I have knowledge on HTML but this is a bit too difficult for me. I share you the code where this is done:

  • section-collection.liquid

    {% for product in collection.products limit: product_limit %}
      {% render 'product-grid-item', product: product %}
    {% endfor %}
  • product-grid-item

  

    
      

      {% if double_img %}
        
          {%- assign img_url = product.media[1].preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          
        

      {% endif %}
        

      {{ badge }}
    
  

  
  
    
      

        

          {{ product.title }}
        

        {%- if settings.product_grid_show_rating and product.metafields.reviews.rating.value != blank -%}
          
            {% render 'product-rating', product: product, show_rating_count: settings.product_grid_show_rating_count %}
          

        {%- endif -%}
      

      
        
          {% if product.price_varies %}{{ 'products.general.from' | t }} {% endif %}
          {{ product.price | money }}
        
        {% if on_sale %}
          
            {{ product.compare_at_price | money }}
          
        {% endif %}
        {% if current_variant.unit_price %}
          {% capture unit_price_separator %}
            /{{ 'general.accessibility.unit_price_separator' | t }} 
          {% endcapture %}
          {% capture unit_price_base_unit %}
            {% if current_variant.unit_price_measurement.reference_value != 1 %}
              {{ current_variant.unit_price_measurement.reference_value }}
            {% endif %}
            {{ current_variant.unit_price_measurement.reference_unit }}
          {% endcapture %}
          

            {{ 'products.product.unit_price_label' | t }}
            {{ current_variant.unit_price | money }}{{ unit_price_separator }}{{ unit_price_base_unit }}
        {% endif %}
        {% if sold_out %}
          
*{{ 'products.product.sold_out' | t }}*
        {% endif %}
        {{ swatches }}

Last code is a bit long but the important part is ate the html in the end, due that swatches are not used.

I will very apreciate you help! Thank you!!

1 Like
2

@Javier_montero

Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

1 Like
3

@Javier_montero
You can get this by the app also try the Swatches apps.

1 Like
4

Hi @Javier_montero ,

It’s customization work, for that you need to hire a developer or need a developer help,
to add this feature with custom code.

You can contact (https://www.halothemes.com/contact) for support.

If you find this answer helpful, please mark it as a SOLUTION.

Best regards.