<dpd-product>
<dpd-product> shows a product from your store with an add to cart button.
DPD fills in the image, name, price, stock and payment plan, so the page
stays in step when you change the product in the admin.
<dpd-product product="163005"></dpd-product><dpd-product product="25223"></dpd-product>Attributes
Section titled “Attributes”| Attribute | |
|---|---|
product |
Required. The product’s ID. |
price-point |
The ID of one of the product’s prices. Leave it off for the product’s default price. |
layout |
card (the default) or detail. |
link |
Add it (no value needed) to link the product’s name to its page on your store. |
store |
The store to sell from. See More than one store. |
The detail layout
Section titled “The detail layout”layout="detail" shows the whole product: a large image, the description
you wrote in the admin, and a quantity field when the product allows more
than one. It’s made for a product page on your own site. The image sits beside the
text when the element is at least 640px wide, and above it when it’s narrower.
<dpd-product product="119694" layout="detail"></dpd-product>What else it does
Section titled “What else it does”- Shows Sold out, and disables the button, when the product is out of stock.
- Shows “Only 3 left” when you track stock for the product.
- Runs the product’s extra steps when it’s added: an upsell offer, a license agreement to accept, or a cross-sell offer. The product above has an upsell.
- Shows a product that’s free as Free.
To change how it looks, see Styling. The card’s parts are
card, image, name, name-link, price, description and
button.