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 on the pages and increase the usability of the app.

Steps to add our code to older themes (prior to 2.0 themes):

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 }}',
             gameID : '{{ blingrushNs.gameid }}',
             directCheckout : '{{ blingrushNs.directcheckout }}',
           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

Steps to add our code to 2.0-supported themes:

1. Login to Shopify admin
2. goto Online Store > Themes
3. Under the Current Theme section, click on the Customize button
4. From the templates drop-down at the top of the page perform the below steps for the Product, Cart, and Customer order templates
5. Select any section on the page and click on the ‘Add Block’ button
6. In the popup blocks menu find BlingRush app blocks and select the ‘General Extension’ block
7. Save your changes