To add a new swatch design or to customize the default swatches,
- Navigate to Swatches Options > Swatches Designs.
- In the Swatches Designs section, there are some default designs along with the option to add new designs.
- To create a new design, click on the Add New Design tab and fill in the related details.
- To edit the properties of the default designs, click on the pencil icon of the corresponding design tab.
- Also, you can make use of the Search option in the Swatches Designs tab to find a specific swatch design in no time.
Common Attributes Styling
To style the common attributes,
- Navigate to Swatches Options > Swatches Designs > Add New Design > Common Attribute Styling.
- Enter the values in the corresponding fields.
Common Attribute Styling | |
Design Name | Enter a design name. |
Icon Height | Enter the required height for the icon. |
Icon Width | Enter the required width for the icon. |
Icon Roundness | Set the roundness of the icon. |
Icon Border Color | Choose a border color for the icon from the corresponding color picker. |
Additional Display Options
You can pick one of the 6 display styles for displaying the swatches on the product page.
Display Options for Swatches |
|
None | By default, every variation is displayed in a normal drop-down menu. |
Swatch Dropdown | With the Swatch Dropdown style, color and image variations can be displayed in a dropdown form. It also has a search option to find any specific variation in the list. |
Slider | It displays 3 variations at a time and you can view the rest of them by clicking on the left or right sliding arrows. |
Accordion | Expand and collapse to view all the variations. |
Horizontal Scroller | Scroll horizontally to view all the variations if the number of variations is high. |
Vertical Scroller | Scroll vertically to view all the variations if the number of variations is high. |
Customizing Hover and Border Details
To style hover and border details,
- Navigate to Swatches Options > Swatches Designs > Add New Design > Hover and Border Styling.
- Provide the values in the corresponding fields.
Hover and Border Styling |
|
Border Color On Hover | Choose a border color on the icon and hover from the corresponding color picker. |
Border Color On Selected | Choose a border color for the selected icon from the corresponding color picker. |
Border Width On Hover | Enter the required border width on the icon hover. |
Border Width On Selected | Enter the required width for the selected icon. |
Selection Hover Style | Choose the selection hover style from the corresponding dropdown. |
Customizing Tooltip
To style the tooltip details,
- Navigate to Swatches Options > Swatches Designs > Add New Design > Tooltip Styling.
- Enter the required values in the corresponding fields.
Image Tooltip |
|
Image Border Color | Choose the image border color from the corresponding color picker. |
Image Height | Enter the required image height. |
Image Width | Enter the required width for the image. |
Term Tooltip |
|
Term Name Text Color | Choose the text color for the term name from the corresponding color picker. |
Term Name Background Color | Choose a background color for the term name from the corresponding color picker. |
Term Name Font Size | Enter the required font size for the term name. |
Description Tooltip |
|
Description Text Color | Choose the desired text color for the tooltip description from the corresponding color picker. |
Description Background Color | Choose a background color for the description from the color picker. |
Description Font Size | Enter the required font size for the description. |
Enable Description Shadow | Enable the option to add a description shadow. |
Styling Swatch Type
To customize the swatch type,
- Navigate to Swatches Options > Swatches Designs > Add New Design > Swatch Type Specific Styling.
- Enter the required values in the corresponding fields.
Label Swatches |
|
Label Font Size | Enter the required font size for the label. |
Label Background Color | Choose a background color for the label from the corresponding color picker. |
Label Text Color | Choose the desired text color for the label from the corresponding color picker. |
Radio Swatches |
|
Radio Inner Color on Hover | For radio swatches, choose the inner color on hover from the corresponding color picker. |
Radio Outer Color | For radio swatches, choose the outer color from the color picker. |
Radio Inner Color on Selected | Choose the radio inner color for the selected swatches. |
Radio Outer Color on Selected | Choose the radio outer color for the selected swatches. |
Choose Radio Style | Choose the desired radio style from the provided styles. |
Select Swatches |
|
Enable Select2 Style for Select Box | When the option is enabled, the default select options changes to Select2. |
Color/Image Swatches |
|
Enable Swatch Dropdown | Enable the option to display the color/image swatches as dropdown. |
Styling Swatches Display
To customize swatches display,
- Navigate to Swatches Options > Swatches Designs > Add New Design > Additional Display Styling.
- Enter the required details in the corresponding fields.
Featured Swatches Styling |
|
Featured Icon Height | Enter the required height for the featured icon. |
Featured Icon Width | Enter the required width for the featured icon. |
Featured Font Size | Provide the required font size. |
Additional Info Swatches Styling |
|
Additional Icon Height | Enter the icon height on additional information. |
Additional Icon Width | Enter the icon width on additional information. |
Shop Swatches Styling |
|
Shop Icon Height | Enter the required height for the icon on the shop page. |
Shop Icon Width | Enter the required width for the icon on the shop page. |
Shop Font Size | Enter the required font size. |
Customize Attribute Description
To style the attribute description,
- Navigate to Swatches Options > Swatches Designs > Add New Design > Attribute Description.
- Provide the required values in the corresponding fields.
Attribute Description Styling |
|
Font Size | Enter the required font size. |
Font Color | Choose the desired font color from the corresponding color picker. |