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
Step 1. Log in to your online store on Shopify
To add your custom widget, you must log in to your online store through the Shopify dashboard.
Step 2. Customize your theme
Once inside your online store, on the theme page, click on "customize".
Now, you'll just need to look for the "products" page at the top of the Shopify theme editor.
Step 3. Add the banner to your product page.
To add the banner previously created with Planet to the product page, you must click on "add block" and add it to your theme.
You will only need to perform this action once, as Planet will automatically be given permission to display the banners on your product page whenever there are products or variants in a rule with a banner added.
Ready!
Your banner will now be visible on the product pages or variants affected by the rule. You can choose where to place the banner in your eCommerce to make it even more personalized. Simply move the block to the desired section and position.
Click save and your custom banners will automatically appear on your product page for any discounts you create in the app.
