Sales banner (Sale promo banner)

The sales banner allows you to create a visually appealing promotion for your sale. You can customize the banner by specifying the type of sale, the discount amount, the unit of measurement, and any additional terms or conditions. This helps attract customers and communicate the details of your sale effectively.

How to access the Sales banner section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
On any theme template, click “Add section”
Search and select “Sales banner”

To insert a new section between existing ones, follow the steps in the article "Add a section"

How to configure the Sales banner section

Basic Components

The Sales Banner section includes General Settings that control its overall configuration. To customize the Sales Banner, simply click on the section.

Settings in this article are organized and named according to the headings used in the theme customizer:

Sale
Content
Text settings
Button settings
Section settings

General settings

Sale

Settings	Description
Sale type	You can either use the recommended text “SALE UP TO” or come up with your own text that fits the context of your sale.
Sale amount	Enter the percentage or amount of discount.
Sale unit	Enter the unit of sale, such as “off” or “% off”.
Sale terms	Enter any additional terms and conditions for the sale.
Font size, font size for mobile	Adjust the font size for different device resolutions using each slider.
Font color	Choose the font color by clicking on the circle and selecting a color from the color picker.
Background color	To change the background color of a section, click the box displaying the color circle and color name to open the color picker. Then, select your desired color. The chosen color will be applied as the section’s background, helping to enhance the visual appeal and match your store’s branding.
Border color	Select the border color by clicking the color circle and color name to open the color picker.

Content

Settings	Description
Heading	This is a text field where you can add the heading of your banner. You can also format the text by making it bold or italic.
Font size	This is a slider that lets you adjust the font size of the heading for desktop devices. You can use it to make the font size bigger or smaller as per your requirement.
Font size for mobile	This is another slider that lets you adjust the font size of the heading for mobile devices. You can use it to make the font size bigger or smaller as per your requirement.
Font weight	This dropdown menu lets you select the font weight for the heading. Select from various options to customize the text’s thickness.
Font color	This color picker lets you select the font color for the heading. Click the box displaying the color circle and color name to select any color you like.

Text settings

Text	Description
Description	This is a text field where you can add the description of your banner. You can also format the text by making it bold or italic, adding a link to the text, also use the option of numbered or bullet lists.
Font size	This is a slider that lets you adjust the font size of text for desktop devices.
Font size for mobile	This is another slider that lets you adjust the font size of text for mobile devices.
Font weight	This dropdown menu lets you select the font weight for the description. Select from various options to customize the text’s thickness.
Font color	This color picker lets you select the font color for the description. Click the box displaying the color circle and color name to select any color you like.

Button settings

To set up buttons on a banner, you can follow these general steps:

Set up the first button by typing the label or text, selecting the link, and choosing the button color and font color.
If you want to add a second button, look for the option to add another button and repeat step 2.

Settings	Description
Button label	This option allows you to add a label to the button to see the button visible on the page. *If you remove the label, the button will become invisible on the page.
Button link	To set a button link, you can enter the link URL directly into the “Button link” field or select a page from the dropdown list that appears when you click on the field.
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary This setting can be applied to buttons, links, and underlined links within the section. To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the* “Primary button” and “Secondary button” blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Button style	Choose from seven button styles: Default: Solid background with text. Default with icon: Same as Default, plus an icon. Add icon in Theme Settings > Buttons > Add icon to inline button option by pasting SVG code. For detailed steps on adding an SVG icon, see the “Buttons” article in Theme Settings, and look for the “Add icon to inline button” option. For example, you can use an arrow icon. Outline: Transparent background with colored outline and text. Outline with icon: Outline style with an icon. Add icon the same way as Default with icon style. Inline: Looks like a text link. You can also add an icon using the same steps as the Default with icon style. Inline with underline: Inline style with a permanent underline. Inline with underline on hover: Inline style with underline appearing on hover.

Section settings

Setting	Description
Section top space	The “Section top space” setting allows you to adjust the amount of space at the top of the section using a slider.
Section bottom space	The “Section bottom space” setting functions similarly to the “Section top space” setting, but controls the space at the bottom of the section.
Enable full width section	Enable this toggle to display the section at full width.