Add Junip to your tracking page

Junip is a smart, smooth way to grow your reviews. If you've installed Junip on your shop, here's how to enable it on your tracking page.

This integration requires tracking pages that are built through the Shopify Theme Editor. For help migrating from the legacy tracking page, check out your App Block - Online Store 2.0 Themes help article.
Add the Junip Snippet.
  1. Open the Shopify code editor for the theme you'd like you use. You can find this in the 'Actions' drop down.
  2. On the left, you'll find all of your theme files. Under 'Sections' select 'Add a new section'.
  3. Call it wonderment-junip in the field that appears and hit 'create section'.
  4. In the file you just created, replace all of the default code with the following and hit save:
{{ 'wonderment-sections.css' | asset_url | stylesheet_tag }}

<script type="text/javascript">
  document.addEventListener('wonderment:shipments_loaded', function(event) {
    console.log('Shipments loaded event fired with shipments: ', event.shipments);
    
  const conditionalElements = document.querySelectorAll(`[data-status-condition*="${event.shipments[0].statusDetails.substatus}"]`);
  conditionalElements.forEach(element => {
    element.style.display = "block";
  });
}, false);
</script>

<div>
{% for block in section.blocks %}
  <div class="wonderment-headline page-width-wonderment" style="display: none" data-status-condition="delivered">
    {% case block.type %}
      {% when 'reviewPrompt' %}
        <h3>{{ block.settings.review_prompt_block_heading}}</h3>
        <p>{{ block.settings.review_prompt_block_message | newline_to_br }}</p>
    {% when 'reviewEmbed' %}
      <div>{{ block.settings.junip_embed_snippet }}</div>
    {% endcase %}
  </div>
{% endfor %}
</div>


{% schema %}
  {
	"name": "Wonderment Junip",
	"settings": [],
	"blocks": [{
			"type": "reviewPrompt",
			"name": "Review Prompt",
			"settings": [{
					"type": "header",
					"content": "Conditional"
				},
				{
					"type": "text",
					"id": "review_prompt_block_heading",
					"label": "Heading",
					"default": "Leave a Review!"
				},
				{
					"type": "textarea",
					"id": "review_prompt_block_message",
					"label": "Heading",
					"default": "Your reviews help us know if we got it right and keep getting better. We'd love to hear about your experience!"
				}
			]
		},
		{
			"type": "reviewEmbed",
			"name": "Review Button",
			"settings": [{
				"type": "html",
				"id": "junip_embed_snippet",
				"label": "Junip Embed Snippet"
			}]
		}
	],
	"presets": [{
		"name": "Wonderment Junip",
		"category": "Custom"
	}]
}
{% endschema %}

{% stylesheet %}
  
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Add Junip to your Tracking Page

When editing the tracking template in the Shopify Theme Editor, click 'Add Section' select 'Wonderment Junip' and add your Junip embed snippet in the field on the right of that section's settings. Be sure to save and you're good to go!

If you'd like to learn more about how Wonderment and Junip can help drive more quality reviews, check out triggering Junip review requests with Wonderment fulfilment events.

How did we do?

Trigger Review Requests with Junip

Contact