Back to Overview

Posted on 2024-08-29

An editorial image of the Shopify logo, and a text that reads 'LiftKit and Shopify' on a field of green

How to Install LiftKit Tabs on Your Shopify Site

LiftKit Tabs is a powerful tool designed to boost your conversion rates and sales by dynamically changing your website's browser tab titles. This tool displays a sequence of titles when users navigate away from your tab, encouraging them to return to your site.

For instance, the sequence might look like:

Step 1: Obtain Your LiftKit Tabs Script

First, ensure you have your unique LiftKit Tabs script snippet. This is usually provided by LiftKit after signing up and creating an account. If you don’t have it, you can find it in your LiftKit dashboard.

<script src="https://www.useliftkit.com/script.js" data-liftkit-id="0123456789"></script>

Step 2: Log in to Your Shopify Admin Panel

  1. Access Your Shopify Admin Panel: Open your web browser and log in to your Shopify store’s admin panel.
  2. Navigate to Online Store: On the left-hand sidebar, locate and click on "Online Store." This will expand a menu with several options.

Step 3: Add the LiftKit Script to Your Theme

  1. Edit Your Theme: In the "Online Store" section, click on "Themes." Find the theme you are using and click on the "Actions" button next to it. From the dropdown menu, select "Edit code."

  2. Locate the <head> Section: In the theme editor, you will see a list of theme files on the left side. Look for the "layout" folder and click on it to expand. Then, find and click on theme.liquid. This file contains the HTML structure for your Shopify theme, including the <head> section.

  3. Insert the LiftKit Script: Within the theme.liquid file, locate the <head> tag. This is usually near the top of the file. Copy your LiftKit Tabs script snippet and paste it directly before the closing </head> tag.

<head>
    <!-- Other head content -->
    <script src="https://www.useliftkit.com/script.js" data-liftkit-id="0123456789"></script>
</head>
  1. Save Your Changes: After you have inserted the script, click the "Save" button at the top right of the theme editor.

Step 4: Customize Your LiftKit Tabs Settings

  1. Access Your LiftKit Dashboard: Go back to your LiftKit account dashboard to customize your tab sequences. You can create different sequences for various routes on your website, such as the homepage, product pages, or checkout pages. You can also set up date-specific campaigns.

  2. Configure Your Sequences: Input the desired tab titles and sequences.

  3. Save Your Settings: After configuring your sequences, make sure to save your settings in the LiftKit dashboard. The script you added to your Shopify site will automatically use these configurations.

Step 5: Test Your Installation

  1. Verify Script Loading: Open your Shopify site in a web browser and right-click to open the “Inspect” tool (or use Ctrl+Shift+I on Windows/Linux or Cmd+Option+I on Mac). Go to the "Network" tab and reload the page to see if the LiftKit script loads correctly.

  2. Test Tab Behavior: Navigate away from the Shopify site tab and watch how the tab title changes according to your configured sequence. If everything is working correctly, you should see the tab titles change as per your settings in the LiftKit dashboard.

Conclusion

You’ve successfully installed LiftKit Tabs on your Shopify site! By dynamically changing the tab titles, you can increase user engagement and boost your conversion rates. Regularly check your LiftKit dashboard to analyze performance and update sequences as needed to keep your campaigns effective.