Custom Widget Best Practices
Custom Widget Best Practices
Embedded Files
When building a custom widget, operators must address certain key considerations to ensure optimal functionality. The HTML and CSS code should adhere to the following criteria:
Mobile Responsiveness: All widgets should be designed to seamlessly adapt to tablet and mobile screens, ensuring a consistent user experience across devices.
Dynamic Row Handling: Widgets should be capable of intelligently collapsing rows in the absence of dynamic content. For instance, if a title is missing, the corresponding row should automatically collapse.
Aspect Ratio Preservation: Images should respect their original aspect ratios to prevent distortion or irregular display.
JS Library Awareness: Operators should be mindful of licensing fees associated with various JavaScript libraries, selecting options that align with budget constraints.
Code Embedding and Custom CSS: The provided code and CSS should be entirely custom and programmatically embeddable on any web store. It's essential that these widgets operate independently of the website's existing CSS. To achieve this, all IDs and CSS classes should be labeled with a unique prefix, mitigating conflicts with native website styles.
Limited Use of Element IDs: Widgets should be designed to coexist peacefully on the same page, even when displaying the same products. For example, if two separate widgets appear on a website, scrolling one should not affect the functionality of the other.
Product Display Limit: Each widget should be capable of displaying a maximum of 12 products upon initial loading.
Dynamic Product Count: Marketers should have the flexibility to choose between displaying 1 to 12 products. Widgets should dynamically adjust the display block to accommodate the selected number of images.
Product Label Handling: If a product label exceeds 15 characters, the widget should truncate it and add three dots (...) after the fifteenth character for readability.
Image Rescaling: Images should smoothly rescale to fit the widget's configuration, ensuring consistent rendering regardless of the number of images displayed, ranging from 1 to 12.
Liquid Compatibility: The custom widget should adhere to the general specifications of the Shopify Liquid library, ensuring compatibility with our Liquid personalization engine.
By addressing these considerations, operators can create custom widgets that enhance user experience and seamlessly integrate with various web stores
Personalized Fieds
Personalized Fieds
CI employs the Liquid templating language to achieve widget personalization. Below is an overview of the JSON personalization objects available for use in Liquid.
Common Use Cases
Common Use Cases
Print all the articles returned by the recommendation engine
The below script with loop through all images returned by the recommednation engine and creates simple HTML with images and tracked url
{% for article in rec.article %}
<a
href="https://{{article.link | ci_render}}"
onclick="return CI.User.Track('clickOnProposition', {'articleId': '{{article.product_id}}', 'propositionId': '{{context.proposition_id}}'});"
>
<img
src="{{article.product_image}}"
alt="{{article.title}}"
/>
</a>
</div>
</div>
{% endfor %}
Click conversion tracking
Please use on click action calling the track function of the CI library to ensure the tracking is correctly executed. This is essential to ensure the conversion tracking for your CI dashboard is working as expected.
onclick="return CI.User.Track('clickOnProposition', {'articleId': '{{article.product_id}}', 'propositionId': '{{context.proposition_id}}'});"
Liquid reference rendering
We have implemented unique filter "ci_render" in our set up. This filter allows the engine to execute shopify liquid language scriptlets included in the value returned in the personalization object.
This means that in the example we are referring value of a link from first article. As the value printed here contains reference to another object "{{organization.domain}}/products/new-shirt". The CI Liquid engine will look for value of "domain" in the "organization" object and print the value in here resulting in final value of "https://whiteshirtstore.com/products/new-shirt".
href="https://{{rec.article[0].link | ci_render}}"
Tips
Tips
A maximum of 5 widgets can be displayed on a single page.
If you're interested in creating a custom widget, don't hesitate to reach out to our team of expert professionals. We offer development services to bring your widget ideas to life. Please contact us for more information
Still need help?
Still need help?
Please contact our professional support team if you require further assistance
Page updated
Report abuse