Styling

Сonfigure color schemes, fonts, and the display type of the app block.

For this widget, you can create multiple style sets for a single offer. Learn more.

First, you need to choose the type of block in which the application will be placed on the site:

  • Bar
  • Widget

When selecting the Bar type, you are provided with advanced settings where you can enable the application to be displayed in a sticky mode. There are several ways to display the sticky bar:

  • None: sticky mode is not applied, and the application will be displayed statically in the main content flow of the page.
  • On scroll up: appears when the page is scrolled up. For this type, to avoid conflicts, you need to set additional settings by selecting "Top" in the Position field below.
  • On scroll down: appears when the page is scrolled down. For this type, to avoid conflicts, you need to set additional settings by selecting "Bottom" in the Position field below.
  • Always: always fixed at the top or bottom of the browser window (depending on your free choice in the Position field).

To reduce the time spent on style settings, we offer pre-configured style presets that you can select from the list, or you can create your own design using advanced custom settings. List of presets with descriptions:

A minimalist monochrome design with one or two accent colors that will use the default font settings set by your store's theme.

Follows the same design principle as the Default preset but without background filling for the block. (This design fits perfectly into a theme with a white background).

Follows the same design principle as the Default preset but uses the DM-Sans font with "Bold" weight, which will be applied to the main informational and accent elements of the application.

A design in blue tones with an accent color and the Inter font with "Semi Bold" weight, which will be applied to the main informational and accent elements of the application.

A design in beige tones with an accent color and the Jost font with "Medium" weight, which will be applied to the main informational and accent elements of the application, and the Inter font with "Normal" weight, which will display auxiliary text information.

A design in purple tones with an accent color and the Oswald font with "Normal" weight, which will be applied to the main informational and accent elements of the application, and the Jost font with "Normal" weight, which will display auxiliary text information.

Retains the principles of the Default preset using a dark monochrome palette with one accent color.

In this section, you can set personalized settings for the color palette, fonts, and element sizes of the application.

Settings for font types and weights.

Settings for the app card: background fill and borders.

Settings for the color palette, sizes, and styles of the text.

In this section, you can add personalized settings for the progress bar elements: color palettes and element sizes.