Buttons and widgets

The button code page in the DPD admin writes these attributes for you, but you can change them by hand. Colors are hex without the #, like 469d3d.

Buttons

<a href="https://STORE.dpdcart.com/cart/add?product_id=123&method_id=456"
   data-dpd-type="button"
   data-text="Add to cart"
   data-variant="price-right"
   data-button-size="dpd-large"
   data-bg-color="469d3d"
   data-bg-color-hover="3b8534"
   data-text-color="ffffff"
   data-pr-bg-color="ffffff"
   data-pr-color="000000">Add to cart</a>

Attribute
data-dpd-type	button
data-text	The button’s label.
data-variant	Where the price goes: price-right, price-left, price-top or price-none. Leave it off for no price.
data-button-size	dpd-large, dpd-medium or dpd-small.
data-bg-color	The button’s color.
data-bg-color-hover	The button’s color under the mouse.
data-text-color	The label’s color.
data-pr-bg-color	The price box’s background.
data-pr-color	The price’s color.
data-lightbox	1 opens the cart in the lightbox.

Widgets

<a href="https://STORE.dpdcart.com/cart/add?product_id=123&method_id=456"
   data-dpd-type="widget"
   data-text="Buy now"
   data-variant="portrait"
   data-description="Sixty recipes for busy weeknights."
   data-bg-color="469d3d"
   data-bg-color-hover="3b8534"
   data-text-color="ffffff"
   data-background-color="ffffff"
   data-border-color="c7c7c7"
   data-title-color="333333"
   data-price-color="469d3d"
   data-desc-color="4c4c4c">Weeknight Sauces</a>

Attribute
data-dpd-type	widget
data-text	The buy button’s label.
data-variant	portrait (the default), landscape or no-image.
data-description	The text under the product’s name.
data-bg-color, data-bg-color-hover, data-text-color	The buy button’s colors, as for buttons.
data-background-color	The widget’s background.
data-border-color	Its border.
data-title-color	The product name’s color.
data-price-color	The price’s color.
data-desc-color	The description’s color.
data-lightbox	1 opens the cart in the lightbox.

The name, price, images and “what’s included” come from the product in the DPD admin. The widget images are the ones set on the product for widgets.

Styling with CSS

Buttons and widgets are ordinary HTML in your page, so your own CSS can style them. Their class names start with _dpd- and won’t change:

Class
._dpd-button_container	The whole button. Also has its size class, like .dpd-large.
._dpd-button_cta_text	The button itself, with its label.
._dpd-button_price	The price box.
._dpd-widget_container	The whole widget. Has ._dpd-widget_landscape in the landscape layout.
._dpd-widget_image	The image.
._dpd-widget_title, ._dpd-widget_price	The name and price.
._dpd-widget_description	The description.
._dpd-widget_includes	What’s included.
._dpd-widget_secure	The “Secure Checkout by DPD” line.

._dpd-button_cta_text {
  border-radius: 999px;
  font-family: inherit;
}