Widget
We offer a wide range of widget designs, providing our users with the flexibility to select responsive designs that align with their brand guidelines. To explore our complete collection of designs, please visit the Ci demo site
This documentation page cover the following topics:
How to configure widget for your campaigns
Widget Overview Interface
Widget Detail Interface - Info Tab
Widget Detail Interface - Designer Tab
Available Widgets
How to configure widget for your campaigns
Widget configuration is the final step in the campaign setup process, allowing users to select the design that best suits the page where they want to display the recommendation widget. All our widgets are optimized for mobile devices, and operators can preview how they will appear on mobile screens using the mobile toggle feature. Here are the steps to configure the mobile toggle:
Select the widget design.
Choose the maximum number of products you'd like to display. Please note that our widgets can show up to four products at a time. Our widget designs incorporate carousel functionality, enabling end-users to scroll through all available products.
Select a block title, or leave this field empty if you don't want to display a title.
Choose the call-to-action (CTA) text where applicable. Note that some of our widget designs may not include a CTA.
Finally, select the position where you'd like to display the product recommendations. Keep in mind that if you create multiple campaigns targeting the same page and location, we will display a maximum of five widgets in random order.
Widget Overview Interface
Key Features on the Widget Overview Page:
Browse a comprehensive list of both public and custom widgets.
Access concise short descriptions of each widget.
Quickly check the publication status (published or not).
Easily sort widgets by label, description, or status.
Effortlessly search for specific widgets using labels.
Simply click on a widget label to navigate to the widget detail page.
Widget Detail Interface - Info Tab
The Widget Detail Page provides users with a comprehensive overview of all public and custom widgets, offering valuable insights into the widget's design and its usage in campaigns. This page is divided into four distinct sections:
Header: This section prominently displays the widget's label, status, and a brief description.
Description: Here, users can find an in-depth definition of the widget design, along with best practices for its utilization. Additionally, mobile and desktop previews of the widget are available for reference.
Used in Campaigns: The final section offers a comprehensive view of all campaigns employing this widget, including their current status. Users can easily access these campaign configurations by clicking on the campaign label.
Widget Detail Interface - Designer Tab
The Widget Detail Page, also known as the Designer Page, empowers users to configure and update widget settings. This functionality allows users to preview the HTML widget and modify both its metadata and underlying HTML code. The Designer Page comprises three sub-pages:
Widget: This section offers input fields for users to specify widget details, including its name, short and long descriptions.
Default Values: Here, users can configure default settings, typically established during the campaign design phase. These settings encompass:
Number of products to be displayed within the recommendation block.
Text for the call-to-action button.
Block title for the recommendation block.
Position of the recommendation widget on the destination page.
Code: This view provides access to the raw HTML code, granting operators the flexibility to edit the code, subsequently updating the live preview. It's important to note that the HTML code must include embedded Liquid to enable personalization with products in both the live preview and on the website.
Available Widgets:
Classic
The Classic widget is designed with a traditional layout for widely-used product recommendation carousels. This design predominantly includes a Block title, product image, title, and price. Operators can add a maximum of 12 products, with 4 products displayed at a time. End users can easily scroll left or right to explore the remaining products.
Our flexible design empowers operators to customize the Block title, choose the number of displayed products, and determine the widget's position as per their preferences.
Classic + CTA
The Classic + CTA widget is fashioned after the traditional layout of commonly used product recommendation carousels. This design primarily includes a Block title, product image, title, price, and a prominent Call to Action (CTA) button. Operators have the flexibility to add up to 12 products, with 4 products displayed simultaneously. End users can intuitively scroll left or right to explore the remaining products.
Our adaptable design empowers operators to customize the Block title, determine the number of displayed products, position the widget as desired, and define the CTA text for an engaging user experience
Classic + CTA + Border
The Classic + CTA + Border widget adopts a traditional layout commonly found in product recommendation carousels. This design features a Block Border, Block title, product image, title, price, and a prominent Call to Action (CTA) button. Operators can seamlessly add up to a maximum of 12 products, with 4 products elegantly displayed at any given time. Users can effortlessly scroll left or right to explore additional products.
Our versatile design empowers operators to customize the Block title, determine the number of products to display, position the widget precisely, and define the engaging CTA text, providing a tailored and captivating user experience
Modern
The Modern widget is crafted in alignment with contemporary design trends, featuring an engaging on-hover effect where the product image gracefully fades to reveal a compelling Call to Action (CTA) text.
This design primarily comprises a Block title, product image, title, price, and a CTA link. Operators have the freedom to include a maximum of 12 products, with 4 products elegantly presented at a time. Users can seamlessly navigate left or right to explore the full selection.
Our adaptable design empowers operators to personalize the Block title, specify the number of displayed products, precisely position the widget, and define the captivating CTA text, ensuring a dynamic and user-friendly experience.
Featured Products
The Featured Product widget is tailored for showcasing popular, best-selling, well-reviewed, or brand-new products prominently on the homepage of your website.
This design primarily comprises a Block title, product image, product title, price, and an engaging Call to Action (CTA) button. Operators have the capability to feature up to 12 products, with one product elegantly displayed at a time. Users can effortlessly navigate left or right to explore the remaining products.
Our versatile design empowers operators to customize the Block title, specify the number of featured products, precisely position the widget, and define the captivating CTA text, ensuring an engaging and conversion-focused presentation.
Netflix
The Classic widget features a modern layout that's commonly used on streaming sites. You can choose from two distinct design variations:
This design primarily includes a Block Title, Product Image, Product Title, and Price link. On desktop, the Product Title and Price are revealed when the customer hovers over the product image. On mobile, both attributes are visible from the start.
Menu Items
The Menu Items widget is specifically designed for promoting cross-selling and related products. It is most effective when used on product and checkout pages.
This design primarily includes a Block Title, Product Image, Product Tile, Price, and a Call to Action (CTA) button.
Our flexible design allows operators to add a block title, specify the number of products to display, choose the widget's position, and customize the CTA text to suit their needs.
Tips
You can display a maximum of 5 widgets on a single page.
If you require custom widget development, don't hesitate to reach out to our team of expert professionals. We're here to assist you in designing a new widget tailored to your needs.
Still need help?
Please contact our professional support team if you require further assistance