Do you want to show your promotion on the product page of your eCommerce with a banner? In this guide, you will learn how to add a banner to your Shopify eCommerce.
1. Configure the banner on Planet
Step 1. Create a rule
The banner can be created with the "Banner" template or be added by creating any of the available templates.
Within this template, you can exclusively configure the banner to be included in your product page, while, in the case of adding it in any of the promotion templates, the banner will be optional to inform about the discount.
Step 2. Activate the banner
Once you have chosen the template, in the "Widgets" section you will find the option to add a banner to your promotion.
Step 3. Configure the banner
When you activate the "Banner on product page" option, you can configure the general settings and design of the banner. In addition, you can preview the changes.
General
You will have the option to edit the title and subtitle of the banner, as well as include a redirect to a link and a timer to show when the promotion ends.
⚠️ Remember that to show the countdown of the promotion it is necessary to add an end date to the rule.
Design
As for the design, you can edit the colors, font size, alignment, border width, rounding, etc. so that it adapts the most to the style of your store.
2. Add the banner on Shopify
1. Enable the Planet extension in your theme
Enabling the Planet extension in your Shopify theme is essential to display widgets in your store.
1. Access your theme editor in Shopify > Online Store.
2. Go to the Apps embeds section.
3. Enable the Planet extension.
4. Save the changes.
2. Change the position of widgets
By default, banners are placed above the buy buttons on your product page, but if you want to place them in another position, follow these steps:
Place widgets using blocks
Access your theme editor through Shopify > Online Store.
Select the product page.
Click on Add Block and select the banner block.
Move the block to the right position, you will be able to see how it looks like thanks to the blue square as an example.
Save the changes.
Place widgets using code
If your theme does not allow adding app blocks or you need to place the banners in a specific position, you can still include the code corresponding to each widget in the section of the product page you consider:
<banner-widget></banner-widget>
💡 Still have questions?
Visit our help section or contact us by email or chat.