Note: This is for advanced users who can work with Shopify liquid code and CSS styling language.
Badges can be placed at virtually any location on pages with products, including the product details page, collection page, search page, etc. The badge 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. smartbOuterClass: CSS classes passed using this parameter will be applied to the DIV containing the badges.
We have the following built-in classes that can be used to manage the badge placement:
Class Name | Resultant CSS |
|---|---|
smart-d-block | display: block; |
smart-d-inline-block | display:inline-block; |
smart-mr-1 | margin-right: .25rem; |
smart-ml-1 | margin-left: .25rem; |
smart-mt-1 | margin-top: .25rem; |
Example integration code:
{% render 'smartb', product: product, smartbOuterClass:'smart-mt-1 smart-mb-1', smartbInnerClass: 'smart-d-inline-block smart-mr-1 smart-mb-1' %}
This will apply a margin of .25rem to the top and bottom of the badge container.
2. smartbOuterStyle: Pass any custom CSS elements using this parameter and they will be applied to the badge container.
Example integration code:
{% render 'smartb', product: product, smartbOuterClass:'smart-d-inline-block', smartbOuterStyle:'position:absolute; right:0px; top:0px; z-index:1;', smartbInnerStyle:'', smartbInnerClass: 'smart-d-block smart-mr-1 smart-mb-1' %}
This code can be used to place the badges on the top right corner of the product images on collection pages.
Email [email protected] if you need assistance.