Product Price - Pill Style (For Half Layout)


1. Plugin Info

Add a pill style to the price on a product’s main page using half layout.

  • Works with Squarespace 7.1

  • Uses Custom CSS


2. Add this code to Custom CSS

// Product Price - Pill Style (Half Layout) - Ghost //

.pdp-layout .pdp-details .product-price {
  background: #31ce95 !important;
  border: 2px solid #31ce95;
  border-radius: 50px !important;
  padding: 10px 20px !important;
  display: inline-block !important;
}

3. Customizable Options

  • Background Color

  • Border Style

  • Border Radius

  • Padding

The price’s text color can be changed in Squarespace settings.


4. Plugin Notes

  • Compatible with the half layout


Previous
Previous

Contact Form - Error Alert Style

Next
Next

Site Tag Line - Below Logo