Note: This guide is intended for advanced users who are comfortable working with Shopify Liquid and CSS.
Prime Product Badges & Stickers gives you complete control over where your badges appear on your storefront. Badges can be displayed almost anywhere a product is shown, including:
- Product pages
- Collection pages
- Search results
- Featured product sections
- Custom product grids
- Any other product-related template
There are two ways to control badge placement:
- Move the integration code to a different location in your theme.
- Use the built-in CSS parameters to control the badge layout and positioning.
Built-in CSS Utility Classes
The app includes several utility classes that can be used without writing custom CSS.
| Class Name | CSS Applied | Purpose |
|---|---|---|
|
| Displays badges on separate lines. |
|
| Displays badges side by side. |
|
| Adds spacing to the right. |
|
| Adds spacing to the left. |
|
| Adds spacing above the badge container. |
|
| Adds spacing below the badge container. |
Method 1: Using primebOuterClass
The primebOuterClass parameter allows you to apply one or more CSS classes to the outer <div> that contains all badges.
This is the easiest way to adjust spacing and layout.
Example
{% render 'primeb',product: product,primebOuterClass:'prime-mt-1 prime-mb-1',primebInnerClass:'prime-d-inline-block prime-mb-1'%}
Result
The above example:
- Adds 0.25rem margin above the badge container.
- Adds 0.25rem margin below the badge container.
- Displays multiple badges inline with spacing between them.
Method 2: Using primebOuterStyle
For complete control over badge positioning, use the primebOuterStyle parameter to apply custom CSS directly to the badge container.
This is useful for advanced layouts such as positioning badges over product images.
Example
{% render 'primeb',product: product,primebOuterClass:'prime-d-inline-block',
primebOuterStyle:'position:absolute; right:0px; top:0px; z-index:1;',primebInnerStyle:'',primebInnerClass:'prime-d-block prime-mb-1'%}
Result
The above example:
- Positions the badge container in the top-right corner of the product card.
- Ideal for displaying badges over product images on collection pages.
- Stacks multiple badges vertically using
prime-d-block.
Choosing the Right Approach
| Goal | Recommended Option |
|---|---|
Add spacing around badges | Use |
Display badges side by side | Use |
Stack badges vertically | Use |
Position badges over product images | Use |
Fine-tune badge placement | Move the integration code to a different location in your theme. |
Need Help?
If you'd like to display badges in a custom location or need assistance with Liquid or CSS customization, our support team is happy to help.
- Contact us via the in-app Live Chat
- Submit a support request through our Help Center:
https://help.thalia-apps.com/docs/prime/submit-ticket
Tip: Every Shopify theme is structured differently. If you're unsure where to place the integration code or need help styling your badges, our team can assist with the setup.