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:
- Mouse over the widget.
The widget's controls will be displayed.
- Click on the down arrow beside the widget icon.
- Choose the Settings item from the drop-down menu.
The widget Settings popup will be displayed.
- Click on the Advanced tab.
- 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.
- Click on the VISIBILITY RULES row to expand the section.
- Click on Always.
The Edit Rules popup will be displayed.
- 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.
- 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.
- Choose the test condition:
- True: The test is met.
- False: the test is not met.
- Choose a comparison test option:
- Click on the cross icon to add a new rule.
A set of rule options will be displayed.
- 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).
- Select an Operator:
- =: equal to.
- <>: not equal to.
- Specify a value for your condition.
- Click OK.
CUSTOM CLASSES
The Custom Classes settings let you specify a custom CSS class for your widget.
- Click on the CUSTOM CLASSES row to expand the section.
- Enter a name in the Custom Classes field.
RESPONSIVE SETTINGS
The Responsive Settings let you specify responsive CSS for your widget at specific device sizes.
- Click on the RESPONSIVE SETTINGS row to expand the section.
- Set the CSS for the widget at each supported device size:
- Wide Monitor
- Monitor
- Tablet
- Mobile
- Click on the VISIBILITY RULES row to expand the section.
- Click OK, once you have finished configuring the settings.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
Comments
0 comments
Please sign in to leave a comment.