You will use Product LeanTags to display product details. You may want to do this for:

  • Product information (image, pricing, descriptions..) on a product page.
  • Content that's been added to a shopping cart.
  • An order summary on a checkout page or confirmation page.

There are two types of product tags

Standard Product Tags are used when there is only one product being displayed on the page. This is a generic tag that can be used for all products. The product that you would like to display on this page can be defined on the page’s settings.

Individual Product Tags are used when showing multiple products on one page.

Displaying an Individual Product

You can use the global product LeanTag to dispaly a single product on a page. If you dispaly multiple products on a page, you'll need to use individaul product tags.

displaying a single product on a product page for ecommerce
An example displaying single product data with a title, description, and price.

LeanTags Used to Display One Product Per Page

These are global product tags which should be used when displaying a single product on a page.

data-lp-type="product_image”

data-lp-type="product_name_label”

data-lp-type="product_title_label”

data-lp-type="product_description_label”

data-lp-type="product_price_label”

data-lp-type="product_shipping_costs_label”

HTML Used to Display Single Product Example With LeanTags

This is the HTML used to display a single product using global product tags.

<img data-lp-type="product_image" width="50" height="50"></img>

<div data-lp-type="product_title_label"></div>
<div data-lp-type="product_description_label"></div>
<div data-lp-type="product_price_label"></div>

Displaying Multiple Products on a Page

Individual product tags must be used when displaying multiple products on a singel page.

Multiple products dynamically displayed on an ecommerce page.
Multiple products on a page example

LeanTags Used to Display Multiple Products Per Page

A global product tag becomes speficic for a particular product (in this case product id 1) when data-lp-product=”1" is placed before the global tag.

Here are the LeanTags used to display both "product 1" and "product 2" on a single page.

Product 1 LeanTags

data-lp-product=”1" data-lp-type="product_image”

data-lp-product=”1" data-lp-type="product_name_label”

data-lp-product=”1" data-lp-type="product_title_label”

data-lp-product=”1" data-lp-type="product_description_label”

data-lp-product=”1" data-lp-type="product_price_label”

data-lp-product=”1" data-lp-type="product_shipping_costs_label”

Product 2 LeanTags

data-lp-product=”2" data-lp-type="product_image”

data-lp-product=”2" data-lp-type="product_name_label”

data-lp-product=”2" data-lp-type="product_title_label”

data-lp-product=”2" data-lp-type="product_description_label”

data-lp-product=”2" data-lp-type="product_price_label”

data-lp-product=”2" data-lp-type="product_shipping_costs_label”

HTML Used to Display Multiple Product Example With LeanTags

This is the HTML used to dispaly the example with two products, with their respective LeanTags.

data-lp-product=”1" <img data-lp-type="product_image" width="50" height="50"></img>

data-lp-product=”1" <div data-lp-type="product_title_label"></div>
data-lp-product=”1" <div data-lp-type="product_description_label"></div>
data-lp-product=”1" <div data-lp-type="product_price_label"></div>

data-lp-product=”2" <img data-lp-type="product_image" width="50" height="50"></img>

data-lp-product=”2" <div data-lp-type="product_title_label"></div>
data-lp-product=”2" <div data-lp-type="product_description_label"></div>
data-lp-product=”2" <div data-lp-type="product_price_label"></div>