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 configured from all the Planet templates, so the first step to configure your banner is creating a new rule in the rule's page.
Step 2. Activate the banner
Once you have chosen the template, in the "Widgets" section you will find the option to add a banner in your promotion.
Step 3. Configure the banner
When you activate the "Banner on product page" option, you can configure the text and design of the banner. In addition, you can preview the changes.
Texts
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 will have the possibility to edit the colors of the different parts of the banner, its 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.