Home » Support Center » How to modify the built-in styles of the storefront plugin?

How to modify the built-in styles of the storefront plugin?

BlingRush app storefront plugin runs on the following pages:

  1. The product page
  2. The customer order page
  3. The thank-you/order status page
  4. The contest game page

For each page, the plugin checks if the product presented/purchased is a product of type contest and if so, renders the relevant information on the page.

The main parts of the widget are:

  1. The contest registration flow (only relevant on the contest product page)
  2. The message board panel presents relevant information on the contest and its progress
  3. The participant list panel presents all the registered participants and their current status in the contest.

All of the UI elements contain default styles that the store can modify. Also, the user can set a custom CSS class for each UI part. Applying custom CSS classes will require the store to make changes in the storefront Theme and add to its CSS files’ custom styles.

To modify the styles, the user must have at least a basic understanding of CSS styling.

  1. Open the relevant page to customize under the Customizations menu located at the top navigation menu in the BlingRush app.
  2. Each page has a Custom Styles section which contains all the styles to change and the CSS selectors that the style would be applied on.
  3. To apply a custom CSS class on the different contest-related panels on the page, set the relevant fields located in the Contests Page Components Appearance And Behavior section
  4. We support diffrent custom styles for the different pages by modifying the customization of each page seperatly. However, in many use cases, most of the custom styles would be identical between the pages. To prevent the need to modify each page seperatly, tick the Copy and overwrite all the custom styles in all the other pages field. This will copy the same settings to all the pages once you click on the Save button