<aside> 💡 This article will outline the 4 steps to integrate Gander on Shopify

</aside>

1. Setup Overlay Mode For Videos

• On your WordPress admin page, click the “Theme File Editor” option under the “Appearance” tab

• Click on “Theme Header” / ”header.php” on the right side of the page
• Paste the following snippet right above the closing head tag. (i.e. </head>)

<?php add_action('wp_head', 'gander_add_script_wp_head'); function gander_add_script_wp_head() { ?>
    <link href="<https://widget.gogander.online/static/css/index.css>" rel="stylesheet" />
    <script src="<https://widget.gogander.online/static/js/index.js>" defer></script>
<?php } ?>

<?php wp_head(); ?>

<aside> 💡 [Optional] If you would like to load videos after all other elements on the page have loaded, paste the following snippet to footer.php instead of following the instructions above.

<?php add_action('wp_footer', 'gander_add_script_wp_footer'); function gander_add_script_wp_footer() { ?>
   <link href="<https://widget.gogander.online/static/css/index.css>" rel="stylesheet" />
   <script src="<https://widget.gogander.online/static/js/index.js>" defer></script>
<?php } ?>

</aside>

• Click the blue “Update File” button to save

  

Once you have saved the Tag, please link videos to pages using Gander dashboard. To do this, please reference the steps in the article here

2. Setup Embedded Mode for Videos

• On your WordPress admin page, click the “Theme File Editor” option under the “Appearance” tab

  

• Click on “functions.php” on the right side of the page

• Paste the below code snippet there

  function add_gander_widget_react() { ?>
     <div class="gander-widget"></div>
  <?php
  }
  add_filter( 'woocommerce_product_meta_start','add_gander_widget_react');
  

• Click the blue “Update File” button to save

  

3. Track Purchase Events

• On your WordPress admin page, click the “Theme File Editor” option under the “Appearance” tab