Home » Support Center » Embedding contest storefront plugin in the order thank you page

Embedding contest storefront plugin in the order thank you page

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

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

The thank-you page is a special page that appears after completing the order.

Shopify’s thank-you page has built-in panels. BlingRush automatically adds a panel to the existing panel list. Therefore, on this specific page, the store cannot modify the positioning of the different contest-related panels, and they will all be rendered in the same position.

Since the BlingRush app widget uses Shopify ScriptTag to load, the panel that is added to the existing panel list may take a few seconds to load. The store can manually add it to the list to improve usability.

Follow the below steps to manually add the panel

  1. Login to Shopify admin
  2. Goto Settings > Checkout
  3. Locate the Additional scripts field
  4. Copy and paste the following code into the field
{% comment %}
This script should be added directly in the store admin checkout settings
Settings -> Checkout -> drill down to additional script -> paste the script
{% endcomment %}

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

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

Shopify.Checkout.OrderStatus.addContentBox('<h2>Contest Information</h2>',
'<div data-blingrush-thankyou-container></div>')
{% endif %}
  1. Click on the Save button