Skip to main content

useProductListItem

This hook is used to get the product list item data.

propsTypeDescriptionExample
thumbnail_metaObjectThumbnail meta{altText: null, height: 1039, src: "https://cdn.shopify.com/s/files/1/0571/2193/1426/products/518s6Q_2BEqxL._AC_UX522.jpg?v=1622444565", url: "https://cdn.shopify.com/s/files/1/0571/2193/1426/products/518s6Q_2BEqxL._AC_UX522_500x500.jpg?v=1622444565", width: 522}
wishListBooleanIf product is in wishlist or nottrue
productTypeStringProduct typenormal
firstAvailableVariantObjectFirst available variant
productObjectProduct object
containerWidthNumberContainer width196.36363636363637
onQuantityChangeFunctionFunction to change quantity
addingTocartLoadingBooleanadd to cart loadingfalse
openProductFunctionFunction to open product detail
onOpenProductDetailFunctionFunction to open product detail
outOfStockBooleanIf product is out of stockfalse
imageAspectRatioNumberImage aspect ratio1
imageRatioNumberImage ratio1
isProductListPageBooleanIf product list pagetrue
hasTagFunctionFunction to check if product has tag
onSavedFunctionFunction to save product
titleStringProduct titleAppmaker Free gift
imageUrlStringProduct image urlhttps://cdn.shopify.com/s/files/1/0571/2193/1426/products/gift-box-with-red-bow_120072-333_500x500.jpg?v=1664447615
salePercentagestringSale percentage20%
salePriceNumberSale price20
regularPriceNumberRegular price20
onAddToCartFunctionFunction to add product to cart
isAddToCartLoadingBooleanIf add to cart loadingfalse
average_ratingNumberAverage rating4.5
reviews_countNumberReviews count2
gridViewListingBooleanIf grid view listingtrue
addToCartFunctionFunction to add product to cart
countNumberProduct count1
updateCartFunctionFunction to update cart
addingBooleanIf adding to cartfalse
setAddingFunctionFunction to set adding to cart
show_last_few_remainingBooleanIf show last few remainingtrue
show_last_few_remaining_textStringShow last few remaining textOnly 2 left in stock
brandColorStringBrand color#000000
numColumnsNumberNumber of columns3
onSaleBooleanIf product is on saletrue
tagsArrayProduct tags["gift"]
salePriceValueNumberSale price value20
regularPriceValueNumberRegular price value20
hasReviewsBooleanIf product has reviewstrue
custom_fieldsArrayCustom fields[{key: "custom_field_1", value: "custom_field_1_value"}, {key: "custom_field_2", value: "custom_field_2_value"}]
productNodeObjectProduct node
isWishlistPageBooleanIf it's wishlist pagetrue
vendorNameStringVendor nameVendor
showVendorNameBooleanIf show vendor namefalse