Display item in cart differently based on product name or collection?

[JoeCat]

Is it possible to add logic into the cart to display details differently in the cart based on some attribute of the item (either collection, or product title)?  I am using products to add fees and I'd like to display them a little differently, such as not showing image, and making the whole line smaller.   Every item will have the word "fee" in the title, and will be part of a Fee collection.  

If possible, I'd like to be able to group all the Fee items together in the cart as well, but that is secondary.

This is unmodified Product section of cart of Dawn theme for reference.

  <form action="{{ routes.cart_url }}" method="post" id="cart_form" data-cart-form="cart-template" data-total-discount="{{ cart.total_discount }}">
    <div class="section clearfix cart__wrapper">
      <div class="eleven columns medium-down--one-whole">
        {% assign total_saving = 0 %}
        {% for item in cart.items %}
          {% if item.variant.compare_at_price > item.variant.price %}
            {% assign saving = item.variant.compare_at_price | minus: item.variant.price | times: item.quantity %}
            {% assign total_saving = saving | plus: total_saving %}
          {% endif %}

          <div class="section clearfix cart__item" data-cart-item data-line-id="{{ forloop.index }}" data-variant-id="{{ item.id }}">
            <div class="five columns small-down--one-fifth alpha cart__item--image">
              <a href="{{ item.url }}" title="{{ item.title | escape }}" class="cart_page_image">
                {% include 'image-element', image: item.product.featured_media.preview_image, alt: item.title, object_fit: settings.align_height, max_height: settings.collection_height %}
              </a>
            </div>

            <div class="eleven columns small-down--four-fifths omega cart_content_info cart__item--content">
              <h3 class="cart__item--title">
                <a href="{{ item.url }}">{{ item.product.title }}</a>
              </h3>

              {% unless item.product.has_only_default_variant or item.variant.title contains "Title" %}
                <p class="meta">
                  {% for option in item.product.options %}
                    <span class="label">{{ option }}:</span> <span>{{ item.variant.options[forloop.index0] }}</span><br />
                  {% endfor %}
                </p>
              {% endunless %}

              {% if item.properties %}
                <p>
                  {% for p in item.properties %}
                    {% unless p.last == blank %}
                      {% if p.last contains '/uploads/' %}
                        <div>
                          {{ p.first }}: <a class="lightbox" href="{{ p.last }}">{{ 'cart.general.uploaded_file' | t }}</a>
                        </div>
                      {% else %}
                        <div>
                          {{ p.first }}: {{ p.last }}
                        </div>
                      {% endif %}
                    {% endunless %}
                  {% endfor %}
                </p>
              {% endif %}

              <p class="modal_price">
                {% if item.price > 0 %}
                  <span class="money {% if item.price < item.variant.compare_at_price or item.line_level_discount_allocations.size > 0 %}sale{% endif %}">
                    {{ item.final_price | money }}
                  </span>
                  {% if item.price < item.variant.compare_at_price or item.line_level_discount_allocations.size > 0 %}
                    <span class="money was_price">
                      {{ item.variant.compare_at_price | money }}
                    </span>
                  {% endif %}
                {% else %}
                    {{ settings.free_price_text }}
                {% endif %}
              </p>

              {% if item.line_level_discount_allocations.size > 0 %}
                {% for discount_allocation in item.line_level_discount_allocations %}
                  <p class="meta cart__item--discount">
                    <span class="label">{{ 'cart.general.discount' | t }}:</span>
                    {{ discount_allocation.discount_application.title }} (-<span class="money">{{ discount_allocation.amount | money }}</span>)
                  </p>
                {% endfor %}
              {% endif %}

              <div class="product-quantity-box left">
                <span class="ss-icon product-minus js-change-quantity" data-func="minus"><span class="icon-minus"></span></span>
                <input type="number" min="0" size="2" class="quantity" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" data-cart-quantity-input="cart-template" {% if settings.limit_quantity and item.variant.inventory_management != blank and item.variant.inventory_quantity > 0 and item.variant.inventory_policy == "deny" %}max="{{ item.variant.inventory_quantity }}"{% endif %} />
                <span class="ss-icon product-plus js-change-quantity" data-func="plus"><span class="icon-plus"></span></span>
              </div>

              <p class="price_total">
                <strong>{{ 'cart.general.total' | t }}:</strong>
                {% if item.line_level_discount_allocations.size > 0 %}
                  <span class="money">
                    {{ item.final_line_price | money }}
                  </span>
                {% endif %}
                <span class="money {% if item.line_level_discount_allocations.size > 0 %}was_price{% endif %}">
                  {{ item.original_line_price | money }}
                </span>
              </p>

              <a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" class="cart__remove-btn" data-line-id="{{ forloop.index }}" data-remove-item="cart-template"><span class="remove-text">{{ 'cart.general.remove' | t }}</span> <span class="remove-icon"></span></a>

            </div>
          </div>
        {% endfor %}
      </div>

      <div class="five columns medium-down--one-whole">
        <div class="section clearfix">
          <div class="subtotal">

            {% if cart.cart_level_discount_applications != blank %}
              <p class="cart_discounts js-cart_discounts sale">
              {% for discount_application in cart.cart_level_discount_applications %}
                <span class="cart_discounts--title">{{ discount_application.title }}</span>
                <span class="cart_discounts--price">
                  -<span class="money">{{ discount_application.total_allocated_amount | money }}</span>
                </span>
              {% endfor %}

              </p>

            {% endif %}

            <p class="cart_subtotal js-cart_subtotal">
              <span class="right">
                <span class="money">{{ cart.total_price | money }}</span>
              </span>
              <span>{{ 'cart.general.subtotal' | t }}</span>
            </p>

            {% if section.settings.display_savings and total_saving > 0 or section.settings.display_savings and cart.total_discount > 0 %}
              <p class="cart_savings js-cart_savings sale">
                <span class="right">
                  <span class="money">{{ total_saving | plus: cart.total_discount | money }}</span>
                </span>
                <span>{{ 'layout.general.savings' | t }}</span>
              </p>
            {% endif %}

            {% if settings.show_multiple_currencies %}
              {% unless shop.enabled_currencies.size > 1 %}
                <p>
                  <small>
                    {{ 'cart.general.orders_processed_in_currency_html' | t: currency: shop.currency }}
                  </small>
                </p>
              {% endunless %}
            {% endif %}

            {% if section.settings.display_special_instructions %}
              <label for="note">{{ 'cart.general.note' | t: shop_name: shop.name }}:</label>
              <textarea id="note" name="note" rows="2">{{ cart.note }}</textarea>
            {% endif %}

            {% if settings.display_tos_checkbox %}
              <p>
                <input type="checkbox" class="tos_agree" id="cart_agree" required />
                  <label class="tos_label" for="cart_agree">
                    {{ 'cart.general.agree_to_terms_html' | t }}
                  </label>
                {% if settings.tos_page != blank %}
                  <a href="{{ pages[settings.tos_page].url }}" target="_blank" class="tos_icon">{{ 'cart.general.view_terms' | t }}</a>
                {% endif %}
              </p>
            {% endif %}

            {% if section.settings.cart_message != blank %}
              <div>
                {{ section.settings.cart_message }}
              </div>
            {% endif %}

            <p class="tos_warning checkout_button">
              <button type="submit" class="action_button add_to_cart" id="checkout" name="checkout">{% if settings.show_lock_icon %}<span class="icon-lock"></span>{% endif %}{{ 'cart.general.checkout' | t }}</button>
            </p>

            {% if content_for_additional_checkout_buttons %}
              <div class="additional-checkout-buttons additional-checkout-buttons--vertical">
                {{ content_for_additional_checkout_buttons }}
              </div>
            {% endif %}

            {% if cart.item_count > 0 %}
              <a href="{% if cart.items.first.product.collections != blank %}{{ cart.items.first.product.collections.last.url }}{% else %}{{ routes.all_products_collection_url }}{% endif %}" class="continue-shopping">{{ 'cart.general.continue_shopping_link_html' | t }}</a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </form>

  {% include 'cart-shipping-calculator' %}
{% endif %}

</div>

[JoeCat · Accepted solution]

Found the solution myself.

Just injected this code within the loop

      {% if  item.product.title contains "Fee" %}   

[Dharna1]

Hi Joe,

I need the similar solution but for the specific vendor. Say if vendor = "x" then display product row in different style. Please let me know which specific place I need the inject your code. 

[JoeCat]

I couldnt easily show you exactly where to put it (if you're new to this you'll want to reseach your theme to see where the "loop" is in the cart), but once you get to the cart code I THINK a modification of my solution MIGHT work:

{% if item.product.vendor contains "ABC" %}

But it might not work.  In my original testing, I settled on item title because some other hidden attributes werent being recognized in the cart - so its possible it will not work.   If it doesnt work, a rough workaround could be usining my 'product.title' solution and put a special character like an asterick in the product title (so long as you're ok with that appearing everywhere).