How to customize the style of your banners?
With our BSS: Product Labels & Badges app, you can customize the style of your banners to fully match your brand or message. There are several options to bring your unique style to your banners:
You can have a preview of your banners from the Preview section of the Configuration tab. This preview is fixed-position and changes in accordance with the changes made in the Content and Style sections.
1. Content
1.1. Message
1.2. Banner clickable & Link URL
The Banner clickable option allows your customers to be redirected to a specific link when they click on the banner.
You can refer to our guide to make a banner clickable here.
2. Style
2.1. Text style
You can modify the text style of your banner by changing the Font size, Font, Text formatting and Text color
Font size: use this option to change the font size of your banner (you can either type the font size or use the spin button to increase/decrease the font size incrementally). The default font size is 16.
Font: use this option to change the font of your banner. While the default font is chosen, you can also upload your own font(s).
Text formatting: use this option to change the formatting of your banner text (Normal, Italic, Bold or Bold Italic). The default text formatting option is Bold.
Text color: use this option to change the color of the banner text (the default color is black). To change the text color, you can directly choose the color from the color picker or enter the color using the RGB, HSL or HEX color codes.
2.2. Background style
There are three options to modify your banner’s background style: Solid fill, Gradient fill and Image fill. For each option, you can adjust the background opacity using the scroll bar below the Background opacity text.
2.2.1. Solid fill
For this option, you can choose a solid color as your banner background. To change the banner background, you can directly choose the color from the color picker or enter the color using the RGB, HSL or HEX color codes.
2.2.2. Gradient fill
For this option, you can create a smooth transition between two colors for your banner.
The Select gradient color presets option consists of four types to adjust the direction of the gradient (left to right, top to bottom, bottom-left to top-right and top-left to bottom-right). By default, the left-to-right direction is chosen.
The Gradient color 1 and Gradient color 2 options indicate the starting and ending colors of the gradient. To change the gradient colors, you can directly choose the color from the color picker or enter the color using the RGB, HSL or HEX color codes. By default, the Gradient color 1 and Gradient color 2 are #FF6162 and #FF9766 respectively.
2.2.3. Image fill
For this option, you can either use images from the library as your banner background or upload your own images.
Use images from the library: choose your banner image from each page or search using the Search bar
The customized banner will appear at your storefront as follows:
If you have a problem when setting up this feature, please feel free to reach us at support-sbc@bsscommerce.com or Live Chat if you need any assistance.
Last updated
