The most commonly used customization options are available in the "Customize" section of each widget.
You can adjust the settings using either basic or advanced options as needed.
For additional customizations beyond the standard options, you can use the Custom CSS section to apply your own styling.
To manually enter a CSS,
- Navigate to the “Customize” section
- Click on “Edit settings” of ‘Common settings and customizations”
- Scroll down to the section “Custom CSS”
- Enter your code there
- Save and exit
For example, say you want to underline the widget title for “Product add-ons(List)”, you can add the following code snippet to make the changes.
[widget="widget#pal"] .lb-addon-title { text-decoration: underline !important; }
You can include other CSS properties also within this code snippet.
In the above snippet [widget="widget#pal"] - Denotes the Product Add on List (#pal)
Similarly please refer to the following identifiers which belong to the respective widgets.
Widget name | Identifier |
Frequently bought together (List) | [widget="widget#bl"] |
Frequently bought together (Amazon) | [widget="widget#ba"] |
Product add-ons (List) | [widget="widget#pal"] |
Product add-ons (Grid) | [widget="widget#pag"] |
Product add-ons (Carousel) | [widget="widget#pac"] |
Product add-ons (Pop up) | [widget="widget#atcp"] |
Shop the collection (List) | [widget="widget#cpal"] |
Shop the collection (Carousel) | [widget="widget#cpac"] |
Shop the collection (Grid) | [widget="widget#cpag"] |
Product upsell / down-sell (Pop up) | [widget="widget#atcf"] |
In cart upsell | [widget="widget#icuc"] |
Cart add-ons (Pop up) | [widget="widget#ccpa"] |
Cart upsell / down-sell (Pop up) | [widget="widget#ccpf"] |
Note
All the customizations using CSS selectors will apply only for the pre-checkout widgets.
For any more queries, contact our customer support for free setup assistance.