In the Style tab, you will be able to configure all the style related options that apply to all add-ons globally.
Style options
Let’s start with the options of the first section: Style options:
Block titles: choose here the default heading for the title in the block of options. You can select any tag between H1 and H6, and it will apply to all your add-ons titles.
Block background: set the background color for all block options.
Block padding: set the padding for the content in all block options.
Form style: choose the general style for the form elements: (checkbox, radio, select, input, textarea, etc.):
- theme style: select this if you want that all style elements are inherited from the theme style, or
- custom style: set your custom style using the options that will appear below
Checkbox style: choose between rounded or square.
Accent color: set the accent color (e.g. purple in the screenshot below).
Form border color: set the color of the borders in the form (e.g. all other borders of non-selected options – grey in the screenshot below).
Label font size (px): set the font size of all options labels in pixels.
Description font size (px): set the font size of all options labels in pixels.
Color swatches
These settings apply to all color swatches across your site:
Color swatch style: choose between
- rounded
- square
Color swatch size (px): set the size of the color thumbnails.
Labels / images
In the next section, you will be able to set up the options of all labels and images type of add-on globally. Yet, these settings can be overridden from every single label/image add-on.
Image position:
- above label
- below label
- left side
- right side
Force image equal heights: enable this to force the height of all options images to the same size. This is particularly useful if you use different sizes and ratios for your options images. If enabled, you will be able to set the exact size in pixels in the option below: Image hights (px).
Label position: choose here whether to show the label text inside or outside the borders.
Description position: choose here whether to show the description of a label/image option inside or outside the borders.
Padding (px): set the padding of all label options in pixels.
If you want to override these settings for one or more add-ons, you can do that from an additional “Style” tab available only on label/image add-ons.
Tooltip
Here you can set the tooltip options for all the add-ons across your website.
Show tooltips: enable to show the tooltips of your product options. You will be able to set up a custom text from the add-on settings.
Tooltip color: choose here both the background and the text colors.
Tooltip position: choose the default position between top and bottom.
Toggle
Show options in toggle: enable to show the options blocks in toggle sections.
Show toggle opened by default: enable to show the toggle opened by default.
If you want to override these settings for one or more add-ons, you can do that from the “Display settings” tab available for all add-ons types.