Category: BigCommerce

This guide will walk you through the process of adding our custom JavaScript code to your BigCommerce store’s theme. The code detects if the user is in the app, then if the user is logged in, and if so, it sends the user email to Klaviyo to consolidate the Web and Mobile App profiles.

The Code Snippet

The code we’ll be implementing is:

	if (navigator.userAgent.toLowerCase().indexOf('canvas') !== -1) {
      {{#if customer}}
      	nativeFunctions.klaviyoSetEmail('{{customer.email}}');
      {{else}}
      	nativeFunctions.klaviyoSetEmail('');
      {{/if}}
    }

Step 1: Check if Your Theme Has Been Duplicated

Before making any changes to your theme, you need to determine if you're working with a duplicated theme:

1. Log in to your BigCommerce admin panel
2. Navigate to Storefront → My Themes
3. Click the "Advanced" dropdown next to your current theme
   • If you see the "Edit Theme Files" option, your theme has already been duplicated
   • If you don't see this option, or it's grayed out, you need to duplicate your theme first

Step 2: Duplicate Your Theme (If Needed)

If your theme hasn't been duplicated yet, follow these steps:

1. Navigate to Storefront → My Themes
2. In the "Current Theme" section, click on the dropdown menu (three dots) next to your active theme
3. Select "Make a Copy"
4. In the pop-up dialog, enter a name for your duplicate theme (e.g., "My Store Custom Theme")
5. Click "Copy Theme"
6. Wait for the duplication process to complete (this may take several minutes)

Important: Duplicating your theme creates a backup of your current design. This allows you to revert to the original version if needed and prevents theme updates from overwriting your customizations.

Step 3: Apply the Duplicated Theme (If You Created a New Copy)

If you just created a duplicate theme:

1. Find your newly created theme in the "Available Themes" section
2. Click "Apply" to make it your active theme
3. Review your storefront to ensure everything looks correct

Step 4: Add the Code Snippet to Your Theme

Now that you're working with a duplicated theme, you can safely add the custom code:

1. Navigate to Storefront → My Themes
2. Click the "Advanced" dropdown next to your active theme
3. Select "Edit Theme Files"
4. In the theme editor, locate the base.html file
   • Navigate to templates/layout/base.html
5. Add the code snippet before the footer content
   • Look for the footer section in the base.html file
   • This is typically indicated by comments like or code that includes {{> components/common/footer}}
   • Place the code snippet right before this section
6. Save your changes
   • Click the "Save" button in the top right corner
   • You'll see a confirmation message when the save is successful

Next Steps

After successful implementation, upon logging in to an account while in the app, you should be able to see the email being added to the Klaviyo profile, and subsequently getting merged with the existing web profile.

‍