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.

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 the section, simply click on the circle labeled "Background color" and select an appropriate color from the color picker.
Border color	Choose the border color by clicking on the circle and selecting a color from 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 is a dropdown menu that lets you choose the font weight for the heading. You can choose from various options.
Font color	This is a color picker that lets you choose the font color for the heading. You can pick any color you like by clicking on the color circle.

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 is a dropdown menu that lets you choose the font weight for text. You can choose from various options.
Font color	This is a color picker that lets you choose the font color for text. You can pick any color you like by clicking on the color circle.

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	You can choose from seven different button styles: Default button: This is the standard button style with a solid background color and text. Default button with icon Outline button: This style features a transparent background with a colored outline and text. Outline button with icon Inline button: The inline button style blends seamlessly with the surrounding text, appearing as a link with the same color. Inline button with underline: Similar to the inline button style, this option adds an underline to the text, making it more noticeable. Inline button with underline on hover — this option adds an underline to the text 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	Mark this checkbox and section will be displayed on the full width.