Embedding contest storefront plugin in your Theme templates

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

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

This article will explain how to manually change the Theme template files to embed the widget’s initialization script.

The store is not required to perform this step. However, embedding this script directly in the Theme templates will reduce the widget’s loading time in the pages and increase the usability of the app.

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. In the theme file’s list panel, click on the Add a new snippet link (Snippets folder)
6. Name the new snippet blingrush-contest-page-init
7. Copy and paste the code below into the snippet

{% assign pageType = 'other' %}

{% if product %}
	{% assign pageType = 'product' %}
	{% assign p = product %}

{% elsif order %}
	{% assign pageType = 'order' %}
    {% for li in order.line_items %}
		
		{% if li.product.metafields.blingrush %}
			{% assign p = li.product %}
			{% break %}
		{% endif %}
	{% endfor %}
{% endif %}

{% if p %}
	{% assign blingrushNs = p.metafields.blingrush %}	
{% endif %}

<script id="blingrush-init-script" type="text/javascript">
 
  window.blingrushWidgetInfo = {pageType:'{{pageType}}'};
                            
  {% if p %}
     window.blingrushWidgetInfo.product = {
                                id: {{p.id}},
                                variant: {{p.variants.first.id}}
                               }; 
  	{% if blingrushNs and blingrushNs.iscontest  %}
           window.blingrushWidgetInfo.isContest = true;
           window.blingrushWidgetInfo.contest = {
           productId: {{p.id}},
           variantId:{{p.variants.first.id}},
           inventoryQuantityLeft:{{p.variants.first.inventory_quantity}},
           state: {{blingrushNs.currstate}},
           maxNumberOfParticipants: {{blingrushNs.maxnumparticipants}},
           currNumberOfParticipant: {{blingrushNs.currnumparticipants}},
           winnerDiscountCode : '{{blingrushNs.winnerdiscount}}',
           runnerupsDiscountCode : '{{blingrushNs.runnerupdiscount}}',
           participantDiscountCode : '{{blingrushNs.participantdiscount}}',
           lastDayToCompete : '{{blingrushNs.contestclosedate}}',
           runnerups : '{{blingrushNs.runnerups}}',
           winner : '{{blingrushNs.winner}}'

           
         };
    {% else %}
   		window.blingrushWidgetInfo.isContest = false;
  	{% endif %} 
  
  {% endif %}                              
</script>

8. Click on the Save button
9. Locate and open the theme.liquid file in the theme files panel (Layout folder)
10. Search the head closing tag </head>
11. Copy and paste the following code just before the closing tag

{% include 'blingrush-contest-page-init' %}

12. Click on the Save button