Shopify
      Back to home
      1. Knowledge base
      2. Getting Started for Admin
      3. Shopify

      WAIR Shopify App: Product Detail Page CTA Installation

      This article will help guide you through the steps required to install WAIR's CTA onto your Shopify site's product detail page.

      Before Your Begin

      Please ensure you have successfully installed the WAIR Shopify App and have approved the app's charges in Shopify. If you have yet to received your install link, please reach out to the WAIR Support Team at help@getwair.com.

       

      Important: We highly recommend that the person conducting the installation of this CTA has prior experience editing your Shopify theme code and understands HTML, liquid, and CSS.

       

      Step 1: Enable WAIR Scripts via Shopify's App Embed feature

      1. Log into your Shopify Admin Account.
      2. Navigate to Sales Channels > Online Store.
      3. For the theme on which you would like to install WAIR, click the 'Customize' button. You will be taken to the Shopify Theme Customizer for that theme.
        WAIR Scripts Shopify App Embed Feature
      4. In the top left corner, click the App Embeds icon.
      5. Enable the 'WAIR Scripts' toggle.
      6. Click 'Save' in the top right corner.

       

       

      Step 2: Gather the WAIR Product Detail Page CTA HTML snippet from your WAIR Dashboard

      1. Log into your WAIR Dashboard (if you do not have access, please reach out to the WAIR Support Team at help@getwair.com).
      2. Navigate to Settings > Shopper Experience.
      3. While under the CTA tab, click 'View Snippet'
      4. Copy the WAIR product detail page CTA HTML snippet.
      5. Please note that styling customizations for the CTA are also available on this dashboard page.

      WAIR Dashboard PDP CTA Snippet

       

      Step 3: Install the HTML snippet onto your Product Detail Page in Shopify

      1. Log into your Shopify Admin Account.
        Shopify Theme Edit Code
      2. Navigate to Sales Channels > Online Store.
      3. For the theme on which you would like to install WAIR, click the three-dot menu button (next to 'Customize') and click 'Edit Code'.
      4. Locate the proper .liquid file responsible for the build of your product detail page. Please note, this file often changes based on which Shopify theme is in use.
      5. Paste your WAIR product detail page CTA HTML snippet in your desired location within the product detail page code.
        1. We recommended installing the WAIR CTA right above or below your size variant selection area.
        2. You can further customize the WAIR CTA by using the CTA styling customizations available on your WAIR Dashboard, or by adding CSS to style the HTML snippet. For guidance on what CSS to use, please reference this knowledge base article for more details.
      6. Click 'Save' in the top right.

       

      For instructions on how to Preview your installation of the WAIR PDP CTA, click here!