Shopify's Online Store 2.0 allows apps to integrate directly with your theme using App Blocks, making it easy to display product banners without editing your theme code.
Follow the steps below to add Prime Product Badges & Stickers to your product pages.
Step 1: Open the Theme Editor
- Log in to your Shopify Admin.
- Navigate to Online Store → Themes.
- Click Edit Theme on your active theme.
Step 2: Open a Product Template
From the template selector at the top of the Theme Editor, choose a Product template where you want the banners to appear.
Step 3: Add the Prime Banners App Block
- In the left sidebar, click Add block.
- Under the Apps section, select Prime Banners.
The app block will now be added to your product template.
Step 4: Position the Banners
Drag and drop the Prime Banners block to your preferred location on the product page.
Recommended: Place the banners directly above product description for maximum visibility.
Step 5: Customize the App Block (Optional)
You can further customize the banner display using the available app block settings.
Banner Group
Choose the Banner Group you want to display on the product page.
Outer Class
Add custom CSS classes to the banner container (div) for additional styling.
Outer Style
Apply custom inline CSS to the banner container.
Inner Class & Inner Style
Similarly, you can apply custom classes and styles to the banner elements themselves for advanced customization. know more.
Step 6: Save Your Changes
Click Save in the Theme Editor to publish your changes.
Step 7: Preview Your Store
Open any product page on your storefront to confirm that the banner are displayed correctly.
