1. Help Center
  2. Tracking page
  3. Shopify Open Store Components

🖼️ Banner App Block

Overview

This app block shows banners with images. It can be used to create banners with discount codes, links to collections, discounted products, etc. The purpose is to make your tracking page more lively and to offer returning customers products they might be interested to buy. The end goal is to convert visitors into customers by creating more sales opportunities.

Visualization

Here are a few visualizations of this block across different screens and in different styles:

Customization

Let’s see what can you customize in this app block:

General

In this section, you can customize the following elements:

Image

You can select an image as the background of the banner.

URL
Where the banner will redirect to on click

Show

Click on the dropdown to select when you want to see the announce bar message. The options to choose from are:

  • Always
  • Search mode
  • Shipment details mode

Black overlay

You can set the black overlay on the banner.

Text

You can set the text on the banner as a caption.

Text spacing

This element allows formatting of the text with spacing.

Button label

This is to choose the name of the button above the banner according to what you want the button to do.

Style

The Style section has elements for configuring the format and design of the banner.

Right-to-left

Check this box if you have selected a language with the same direction for your tracking page.

Text color

This element allows you to set the color of the text inside the banner.

Button label color

Here, you can set the button label color.

Button background color

You can set the button background color.

Button hover color

Customize the button hover color.

Text font size

Make your text easily readable by adjusting the font size here.

Button label font size

Adjust the button label font size to fit the text into the button.

Button outline mode

Check this option to add a clickable property that sets the button outline mode.

CSS style

You can leverage this section for custom CSS styling.

Contact us

For queries and feedback, feel free to reach out to us and let us assist you!