Smart Product Descriptions

Note: This is for advanced users who can work with Shopify liquid code and CSS styling language.

The Highlight Box can be placed at virtually any location on the product page. Its position can be manipulated by:

1. Changing the integration code location

2. Passing appropriate parameters in the integration code    

There are two helpful integration parameters to manage the badge placement:

1. smarthOuterClass: CSS classes passed using this parameter will be applied to the DIV containing the Highlightbox. 

We have the following in-built classes that can be used to manage the badge placement:

Similarly, we can add classes with 2, 3, 4, and 5 suffixes to add margins of .5rem, 1rem, 1.5rem and 3rem respectively.  

Example integration code:

{% render 'smarth', product: product, smarthOuterClass: 'smart-mt-4 smart-mb-2' %}

This will apply a top margin of 1.5rem and bottom margin of .5rem Highlight Box container.

2. smarthOuterStyle: Pass any custom CSS elements using this parameter and they will be applied to the Highlight Box container.

Example integration code:

{% render 'smarth', product: product, smarthOuterStyle: 'border: 1px solid black' %}

This code can be used to add a black border on the Highlight Box.