Online Help

Styles Tab

Styles allow you to customize the appearance of the options set on your product page.

Each of the built in styling fields are described on the styles tab.

Below we have outlined some of the common styling changes:

  • Remove Title Section: Title Style => Enable Title
  • Change Size of Swatch Boxes: Swatch Style => Swatch Height and Swatch Width
  • Change Button Color: Button Styles => Button Color
  • Lookup Field Width: Lookup field style => Number width, Dropdown width
  • Change Calculation Styles: Calculation Styles
  • Change Add to Cart Button Styles: Add to Cart Button Styles
  • Show Price on Add to Cart Button: Add to Cart Button => Show Price on Add to Cart Button

Advanced Styling

This allow you to add your own Custom CSS to style any other elements of the option price calculator that do not have built in styles.


Commonly Request Custom Css

Rounded corners with a title section

.optionTitle {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.option-price-label {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


Rounded corner without a title section

.product-custom-option {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.option-price-label {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


Custom JavaScript

Add your own custom javascript to the option set.

What are your Feelings