Widget Settings - Advanced
Widget Settings - Advanced
All widgets include a Responsive Properties tab in the settings. The responsive properties allow you to configure visibility rules, set custom CSS classes and set device-specific responsive CSS for the widget.
Watch the video below for a quick overview of the advanced properties for widgets, and read below for more detailed instructions and information on configuring these settings.
To configure the advanced properties of a widget:
1. Mouse over the widget.
The widget's controls will be displayed.
2. Click on the down arrow beside the widget icon.
3. Choose the Settings item from the drop-down menu.
The widget Settings popup will be displayed.
You can also double-click on the widget to open the widget Settings popup (excludes Text, Page Title, and Heading Widgets).
4. Click on the Advanced tab.
5. Configure the settings as required.
VISIBILITY RULES
The Visibility Rules settings let you set rules to control who and when a user sees the widget.
a. Click on the VISIBILITY RULES row to expand the section.
Once, expanded, you will see the currently defined rule. By default, the rule set for the widget is to always show.
b. Click on Always.
The Edit Rules popup will be displayed.
c. Set up a test query.
The test query allows you to specify a comparison test to see if all the rules that you define are satisfied.
i. Choose a comparison test option:
• All: Allows you to perform a test, where if all of the rules satisfy the test, the widget will be displayed.
• Any: Allows you to perform a test, where if any of the rules satisfy the test, the widget will be displayed.
ii. Choose the test condition:
• True: The test is met.
• False: the test is not met.
d. Click on the cross icon to add a new rule.
A set of rule options will be displayed.
e. Choose a condition from the dropdown list:
• All: Allows you to create a new test to perform on the subsequent rules, where if all of the rules satisfy the test, the widget will be displayed.
• Any: Allows you to create a new test to perform on the subsequent rules, where if any of the rules satisfy the test, the widget will be displayed.
• User Logged In: checks if the user is logged in.
• User Salutation: checks the salutation value defined in user's account.
• User State: checks the state value defined in user's account.
• Current Order Value: checks the user's current order value.
• Current Order Size: checks the user's current order size.
• Can Add Stores: checks if the user's account allows stores to be added.
• Can Add Campaigns: checks if the user's account allows campaigns to be added.
• Page has attributions: checks to see if the web page the widget is placed on has attributions (author, source and license links for materials used on the page).
f. Select an Operator:
• =: equal to.
• <>: not equal to.
g. Specify a value for your condition.
h. Click OK.
You can add multiple rules.
To remove a rule, click on the cross icon beside it.
CUSTOM CLASSES
The Custom Classes settings let you specify a custom CSS class for your widget.
A CSS Class is a reusable style that you can apply to HTML elements. In this case, the class that you define is specifically for the widget you are editing.
i. Click on the CUSTOM CLASSES row to expand the section.
j. Enter a name in the Custom Classes field.
Once you have created your custom class, you can specify the styling for the class in your website's Custom CSS.
RESPONSIVE SETTINGS
The Responsive Settings let you specify responsive CSS for your widget at specific device sizes.
k. Click on the RESPONSIVE SETTINGS row to expand the section.
l. Set the CSS for the widget at each supported device size:
• Wide Monitor
• Monitor
• Tablet
• Mobile
6. Click OK, once you have finished configuring the settings.
7. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.