Home » Support Center » Customizing the look and feel of the message board panel

Customizing the look and feel of the message board panel

Before reading this article, we suggest that you read the following:

Improve loading time, usability, and design of the contests storefront plugin

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

Embedding contest storefront plugin in your Theme templates

The app widget renders the message board panel on the contest-related pages, including the contest’s product page, the customer order page, the payment thank-you page, and the contest’s game page.

The panel contains a list of messages relevant to the contest—for example, number of tickets left, winner of the contest, etc.

The store can modify the panel’s look & feel and positioning in a few different ways.

Customizing the message board panel from the app customizations pages

  1. In BlingRush app portal navigation. Goto Customizations > The page that you would like to edit.
  2. In case you would like to position the panel in a specific area on the page, you can set the Position the message board panel inside the following HTML element field with a selector that points to a wrapper element (for example , a div element). The panel will be rendered inside that element
  3. In case you would like to set a custom CSS class on the panel (require you to add that class to your theme stylesheet files), you can populate the Message board panel style field with the class’s name.
  4. You can also modify the built-in styles of the panel in the Custom Styles section. You can control the overall style of the panel, its header, the styling of each message.
  5. The Messages And Captions section contains all the text elements presented in the panel. You can change the wording or translate the text into your storefront language

Customizing the message board panel by modifying the store’s theme templates

The store can set the position of the panel by editing the store theme template files.

  1. Login to Shopify admin
  2. goto Online Store > Themes
  3. Under the Current Theme section, click on the Customize button
  4. In the theme menu, click Theme actions > Edit Code
  5. Open the relevant template. For example, to edit the product page open the product-template.liquid file
  6. Create in the template file an HTML tag at the place that you would like to render the panel into (or use an existing container)
  7. Add the attribute data-blingrush-messages-container to the tag (for example: <div id=’here_would_the_messageboard’ data-blingrush-messages-container> </div> )