Home » Support Center » Customizing the look and feel of the participant’s list panel

Customizing the look and feel of the participant’s list 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 participant list 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 all of the registered participants and their current state in the contest. It also shows the score of each participant and presents the winner after the competition ends.

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

Customizing the participant’s panel from the app customizations pages

  1. In BlingRush app portal navigation. Goto Customizations > The page that you would like to edit.
  2. Check or uncheck the field Show the participant’s list panel in order to determine if the panel will be presented or hidden on the page
  3. In case you would like to position the panel in a specific area on the page, you can set the Position the participant list 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
  4. 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 Participants list panel style field with the name of the class.
  5. You can also modify the built-in styles of the panel in the Custom Styles section. You can control the panel’s overall style, header, the styling of each participant row, the text’s styling, and the icons in each row.
  6. 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 participant’s panel by modifying the store’s theme templates

The store can gain full control over the presentation of the panel by modifying the theme template file.

  • In order to determine where the panel will be rendered on the page, follow these steps:
    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-participant-list-container to the tag (for example: <div id=’here_would_the_participant_list’ data-blingrush-participant-list-container></div> )
  • To create a custom presentation of the participation panel, follow these steps:
    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. Create a new snippet file and name it blingrush-participant-list-template
    6. Copy and paste the sample code into the file
{% assign renderTemplate = false %}
{% if product and product.metafields.blingrush and product.metafields.blingrush.iscontest %}	
	{% assign renderTemplate = true %}

{% elsif order %}	
    {% for li in order.line_items %}
		
		{% if li.product.metafields.blingrush and li.product.metafields.blingrush.iscontest %}
			{% assign renderTemplate = true %}
			{% break %}
		{% endif %}
	{% endfor %}


{% elsif request.path contains 'apps/blingrush/game/' %}
{% assign renderTemplate = true %}
{% endif %}

{% if renderTemplate %}
<div style="display:none;" data-participant-list-template>
  <h3 data-participant-list-header>{PARTICIPANT_LIST_HEADER}</h3>
  <ul data-participant-list>
    <li data-participant-list-item>
      <label>
        <span class="participant-name">{PARTICIPANT_NAME}</span>
        <div class="participant-info">
          {PARTICIPANT_STATE}<span>{PARTICIPANT_SCORE}</span><span>{PARTICIPANT_MATCH_TIME}</span>
        </div>
      </label>
    </li>
  </ul>
</div>
{% endif %}
  1. Modify the template as you see fit
  2. Click on the Save button
  3. Open the theme.liquid file
  4. Locate the body opening element (<body>)
  5. Copy and paste the following line right after the element

   {% include 'blingrush-participant-list-template' %}

  1. Click on the Save button.