Skip to main content
The product card component is a custom web component that renders product information in various layouts with support for wishlists, donations, and special offers.

​
Component usage

The product card is implemented as a custom HTML element <custom-salla-product-card> that accepts a product object and various attributes to control its appearance. 
<custom-salla-product-card 
  product="{{ product }}" 
  shadow-on-hover
></custom-salla-product-card>

​
Attributes

​
product
object
required
Product object containing all product information including id, name, price, images, and status
​
horizontal
boolean
Displays the card in horizontal layout instead of vertical
​
shadowOnHover
boolean
Adds shadow effect when hovering over the card
​
hideAddBtn
boolean
Hides the add to cart button from the card
​
fullImage
boolean
Displays the product image as full-width with overlay content
​
minimal
boolean
Renders a minimal version of the card with reduced information
​
isSpecial
boolean
Applies special styling and shows quantity circle indicator for limited offers
​
showQuantity
boolean
Displays remaining quantity badge on the product card

​
Display styles

​
Vertical card

Default card layout with image on top and content below: 
<custom-salla-product-card 
  product="{{ product }}"
></custom-salla-product-card>

​
Horizontal card

Card with image on the side: 
<custom-salla-product-card 
  product="{{ product }}" 
  horizontal
></custom-salla-product-card>

​
Full image card

Card with full-width image and overlay content: 
<custom-salla-product-card 
  product="{{ product }}" 
  fullImage
  shadow-on-hover
></custom-salla-product-card>

​
Minimal card

Compact version without subtitle and donation details: 
<custom-salla-product-card 
  product="{{ product }}" 
  minimal
></custom-salla-product-card>

​
Special offer card

Highlights limited quantity products with countdown timer: 
<custom-salla-product-card 
  product="{{ product }}" 
  isSpecial
  shadow-on-hover
></custom-salla-product-card>

​
Features

​
Wishlist integration

The card automatically integrates with Salla’s wishlist system. Users can add or remove products from their wishlist directly from the card.

​
Price display

The component automatically handles different price scenarios:
  • Sale prices with strikethrough original price
  • Starting prices for products with variants
  • Regular pricing
  • Donation amounts for donation products

​
Product badges

Cards display relevant badges based on product status:
  • Pre-order labels
  • Promotion titles
  • Remaining quantity
  • Out of stock indicators

​
Image handling

The card respects the store’s image fit settings and uses the configured placeholder for products without images.
The product card reads the fit_type setting from store configuration to determine whether images should be contained or covered.

​
Product object

The product object passed to the component should include: 
{
  id: "123",
  name: "Product Name",
  url: "/product/product-name",
  price: 100.00,
  sale_price: 80.00,
  regular_price: 100.00,
  is_on_sale: true,
  status: "sale", // sale, out
  type: "product", // product, booking, donating
  quantity: 50,
  image: {
    url: "https://...",
    alt: "Product image"
  },
  rating: {
    stars: 4.5
  },
  add_to_cart_label: "Add to Cart"
}

Build docs developers (and LLMs) love

Get started for freeTalk to us