Product Add Ons - Updated 2.0 Style

---

1. Plugin Info

Customize the style of product add ons for a more 2.0 style.

• Works with Squarespace 7.1

• Uses Custom CSS

---

2. Add this code to Custom CSS

// PRODUCT ADD ONS - 2.0 STYLE //

// ADD ON PRODUCT - SWAP POSITIONS OF TEXT AND + BUTTON

.product-details .pdp-product-add-ons .add-on-details {
  order: 5 !important;
  margin-left: 20px !important;
}

// ADD ON PRODUCT - CARD //

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

// ADD ON PRODUCT - THUMBNAIL //

.product-details .pdp-product-add-ons .add-on-thumbnail {
  width: 100px;
  height: 100px;
  border-radius: 5px 0px 0px 5px;
  border: 0px solid #eee;
  margin-right: -22px;
}

// 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;
}

// ADD ON PRODUCT + BUTTON //

.product-details .pdp-product-add-ons .sqs-add-to-cart-button {
  background: #242424;
  padding: 5px;
  border-radius: 50px;
}

// ADD ON PRODUCT + ICON //

.product-details .pdp-product-add-ons .add-on-add-to-cart-wrapper .sqs-add-to-cart-button svg.plus-icon {
  stroke: #fff !important;
}

---

3. Customizable Options

Product Add On (Button and Title Order)

• Button First, Title/Price Second

• Spacing Between

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

Product Add On (Button and + Icon)

• Background Color

• Padding

• Border Radius

• Icon Color

---

4. Plugin Notes

• Compatible with all product page layouts.

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

---