Product Add Ons - Much Nicer Style

---

1. Plugin Info

Customize the style of product add ons for a much nicer style.

• Works with Squarespace 7.1

• Uses Custom CSS

---

2. Add this code to Custom CSS

// ADD ON PRODUCT BOX //

.product-details .pdp-product-add-ons .add-on-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 20px;
}

// ADD ON PRODUCT - THUMBNAIL //

.product-details .pdp-product-add-ons .add-on-thumbnail {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  border-radius: 50px;
  border: 3px solid #eee;
}

// ADD ON PRODUCT - TITLE //

.product-details .pdp-product-add-ons .add-on-details .add-on-title {
  font-size: 15px;
  color: #000;
  margin-bottom: 0px;
}

// ADD ON PRODUCT - PRICE //

.product-details .pdp-product-add-ons .add-on-details .product-price {
  font-size: 13px;
  color: #999;
  magin-top: 0px;
}

---

3. Customizable Options

Product Add On (Card)

• Background Color

• Border Style and Radius

• Padding

Product Add On (Thumbnail)

• Height and Width

• Right Spacing

• Border Style and Radius

Product Add On (Title and Price)

• Font Size

• Color

• Spacing

---

4. Plugin Notes

• Compatible with all product page layouts.

• Fonts and other colors will inherit from your Squarespace settings.

---