All Collections
Tutorials
General Overview
How to add a banner on your product page
How to add a banner on your product page

Step-by-step guide to add and configure a banner on your product page.

Sergio Peñas avatar
Written by Sergio Peñas
Updated over a week ago

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.



Did this answer your question?