Home » Support Center » Customizing the look and feel of the link to the contest game

Customizing the look and feel of the link to the contest game

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 contest game page is the page that hosts the game. To compete, the participants need to go to that page and play the game.

The link to the contest game is shown on all the relevant contest-related pages.

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

Customizing the link 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 link to the game page of the contest 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 game link panel inside the following HTML element field with a selector that points to a wrapper element (a div element for example). 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 set the Game link panel style field with the class’s name.
  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 and the link behavior (active, hover, etc).
  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 link 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-game-link-container to the tag (for example: <div id=’here_would_the_contestlink’ data-blingrush-game-link-container> </div> )