Customize the widget with settings, CSS, and JavaScript

The Settings page controls how the options widget behaves and looks on your storefront, including custom CSS and JavaScript and advanced selectors for theme compatibility.

General settings

• App language: the language of the Optionize admin interface.
• Allow direct access to add-on products: by default, customers who land on one of Optionize's hidden add-on product pages are redirected to your home page. Turn this on to let them view those pages instead.
• Disable unavailable options: greys out option values whose linked add-on product is out of stock, so customers can't pick something you can't fulfill.

Custom CSS

Add your own CSS to restyle the widget. The widget's elements use class names starting with oz__, for example .oz__option-label.

1. Go to Settings and open the custom CSS field.
2. Add your rules and save.

If a rule doesn't apply, your theme's CSS is probably overriding it. Add !important to the declaration.

.oz__option-label {
  font-weight: 700 !important;
}

Custom JavaScript

For advanced tweaks such as input formatting or extra validation, add custom JavaScript in Settings. The code runs on product pages where the widget loads. Only use this if you're comfortable with code; a JavaScript error can stop the widget from working.

Advanced selectors

These settings tell the widget where to find parts of your theme. You normally don't need them; reach for them when something doesn't line up:

For placement problems, also consider the Options app block, which is often simpler; see Options appear in the wrong place on the page.

Still stuck? Message us from the chat in the app and we'll help.