Capitula Shopify Guide

Please follow these 6 instruction steps to set up the Capitula campaign for Shopify website.

STEP 1/6

STEP 2/6

STEP 3/6

STEP 4/6

STEP 5/6

STEP 6/6

Finally

STEP 1/6

STEP 2/6

STEP 3/6

STEP 4/6

STEP 5/6

STEP 6/6

Finally

Please follow these 5 instruction steps to set up the

Capitula campaign for Shopify website

STEP

Please login to your Shopify store and install this XO Insert Code App

https://apps.shopify.com/insert-code-to-header-and-footer

STEP

Once you have installed the XO Insert Code App you will see it when you click on the Apps.

STEP

Click on the app and click on the button “Add new code”, this will show you 3 boxes: header, body, and footer.

Please copy the CDN code below and paste it into the header section.

<script>document.write("<script type='text/javascript' src='https://demo.capitula.co.uk/assets/js/capitula_cdn.js?v=" + Date.now() + "'><\/script>");</script>
<script type="text/javascript">if(typeof jQuery == 'undefined'){document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></'+'script>');}</script>

Great now we have to copy the code to register the CPL if you are using the contact form and email subscription please copy both codes below into the body section, if not then you can skip the one you are not using and click on save button.

Contact us from code

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Select the contact form
  var contactForm = document.querySelector('#ContactForm');
  var emailValue = '';

  if (contactForm) {
    console.log('Contact form found.');

    // Listen for changes to the email input field
    var emailInput = document.querySelector('input[name="contact[email]"]');
    
    if (emailInput) {
      emailInput.addEventListener('input', function(event) {
        emailValue = event.target.value;
        console.log('Captured email:', emailValue);
      });
    } else {
      console.log('Email input field not found.');
    }

    // Prevent default form submission and handle manually
    contactForm.addEventListener('submit', function(event) {
      event.preventDefault(); // Prevent default form submission

      // Capture the form data
      var formData = new FormData(contactForm);

      // Submit the form via AJAX
      fetch(contactForm.action, {
        method: 'POST',
        body: formData,
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      })
      .then(response => response.text())
      .then(responseText => {
        console.log('Form submitted via AJAX.');

        // Store the email in session storage
        if (emailValue) {
          sessionStorage.setItem('submittedEmail', emailValue);
        }

        // Redirect to the custom thank you page
        window.location.href = '/pages/thank-you';
      })
      .catch(error => {
        console.error('Error submitting form:', error);
      });
    });
  } else {
    console.log('Contact form not found.');
  }
});
</script>

Email subscription code

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Select the newsletter subscription form
    var subscriptionForm = document.querySelector('form[action="/contact#ContactFooter"]');
    var emailValue = '';

    if (subscriptionForm) {
      console.log('Subscription form found.');

      // Listen for changes to the email input field
      var emailInput = document.querySelector('input[name="contact[email]"]');
      if (emailInput) {
        emailInput.addEventListener('input', function(event) {
          emailValue = event.target.value;
          console.log('Captured email:', emailValue);
        });
      }

      // Store the email in session storage before submission
      subscriptionForm.addEventListener('submit', function() {
        if (emailValue) {
          sessionStorage.setItem('submittedEmail', emailValue);
        }
      });

      // Use MutationObserver to detect form success and CAPTCHA completion
      const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if (document.querySelector('.newsletter-form__message--success')) {
            console.log('CAPTCHA passed and form successfully submitted.');

            // Redirect to the custom thank-you page after form submission
            setTimeout(function() {
              window.location.href = '/pages/thank-you';
            }, 1000); // Delay the redirect
          }
        });
      });

      // Observe for changes in the DOM to detect CAPTCHA completion
      observer.observe(document.body, { childList: true, subtree: true });
    } else {
      console.log('Subscription form not found.');
    }
  });
</script>

STEP

Click on ‘Settings’ at the bottom left corner to open the website settings page. From the sidebar please click on “Checkout” scroll down to the “Order status page additional scripts” section and paste ALL the following <script code and click ‘Save’.

<script>
document.write("<script type='text/javascript' src='https://demo.capitula.co.uk/assets/js/capitula_cdn.js?v=" + Date.now() + "'><\/script>");
</script>

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
  document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"><\/script>');
}
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Wrap Transaction ID
  var transactionIdElement = document.querySelector(".os-order-number");

  if (transactionIdElement) {
    var newTransactionIdElement = document.createElement("capitula_trans");
    newTransactionIdElement.innerHTML = transactionIdElement.innerHTML;
    transactionIdElement.parentNode.replaceChild(newTransactionIdElement, transactionIdElement);
  }

  // Wrap Total Amount
  var totalAmountElement = document.querySelector(".payment-due__price");

  if (totalAmountElement) {
    // Extract the numeric value using a regular expression
    var totalAmountString = totalAmountElement.innerHTML;
    var totalAmount = parseFloat(totalAmountString.replace(/[^\d.-]/g, ''));

    // Create and update the new element
    var newTotalAmountElement = document.createElement("capitula_pay");
    newTotalAmountElement.innerHTML = totalAmount.toFixed(2); // Format the number to 2 decimal places if needed
    totalAmountElement.parentNode.replaceChild(newTotalAmountElement, totalAmountElement);
  }
});
</script>

STEP

Now close ‘Settings’ and click on Online Store and then click on Pages. We next have to create a custom Thank You Page.

Click on the “Add Page” button Title will be “Thank you” and then click on this icon </>.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var submittedEmail = sessionStorage.getItem('submittedEmail');

    if (submittedEmail) {
      var emailDisplay = document.querySelector('#email-display');
      if (emailDisplay) {
        emailDisplay.innerHTML = `<capitula_email>${submittedEmail}</capitula_email>`;
      }
    } else {
      console.log('No email found in session storage.');
    }
  });
</script> <!-- Thank-you message HTML -->
<div class="thank-you-message">
<h2>Thank you for subscribing!</h2>
<p>We will get in touch with you soon at: <span id="email-display"></span></p>
</div>

Congratulations, you have completed this set-up.

FINALLY, please inform your key contact at Capitula via email to confirm next steps & testing.

2. Ad Campaign Set-up code

Shopify Ad Placements