Customize Product Card in List View on All-Products Page

ERPNext
, , , ,
1

Hi everyone,

I’m working on customizing the Product Card in the List View on the All-Products page in my Webshop. Currently, the product card structure looks like this:

<div class="row list-row w-100 mb-4">
    <div class="col-2 border text-center rounded list-image">
        <a class="product-link product-list-link" href="{{ product_url }}">
            <img class="website-image h-100 w-100" alt="{{ product_name }}" src="{{ product_image }}">
        </a>
    </div>
    <div class="col-10 text-left">
        <div style="display: flex; margin-left: -15px;">
            <div class="col-8">
                <a href="{{ product_url }}" style="color: var(--gray-800); font-weight: 500;">
                    {{ product_name }}
                </a>
            </div>
            <div class="col-4 cart-action-container">
                <button class="btn btn-sm btn-primary btn-add-to-cart" data-item-code="{{ product_code }}">
                    Add to Cart
                </button>
            </div>
        </div>
        <p class="product-code">Item Code: {{ product_code }}</p>
        <div class="product-price">{{ product_price }} {{ currency }}</div>
    </div>
</div>

What I Need to Change:

  1. Increase the product image column from col-2 to col-3.
  2. Adjust the text and button columns accordingly.
  3. Ensure the layout remains responsive and aligns properly.

Questions:

  • Where exactly can I find this template file in Frappe/ERPNext?
  • What’s the recommended way to override it without affecting core updates?
  • Is there a way to modify it using a custom app or Jinja template extension?

Any guidance or best practices would be highly appreciated! :rocket:

Thanks in advance! :blush: