Much Nicer Style - Product Add Ons


Plugin Details

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

Compatibility

  • Works with Squarespace 7.1

  • Uses Custom CSS


Add to Custom CSS

// ADD ON PRODUCT BOX - PRODUCT PAGE - GHOSTPLUGINS.COM //

.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 PAGE - GHOSTPLUGINS.COM //

.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 PAGE - GHOSTPLUGINS.COM //

.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 PAGE - GHOSTPLUGINS.COM //

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

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


Notes

No plugins notes


Previous
Previous

Bigger Thumbnails - Product Add Ons

Next
Next

Updated 2.0 Style - Product Add Ons