Before our Shopify integration update (which occurred on October 6, 2021), your Shopify Plus site had to be modified with custom code in order to enable the marketing and/or transactional opt-in checkboxes. The following images show the opt-in checkbox using the Attentive code:

marketing_vs_trans.png

With our integration update, you no longer need to modify your site code to add the Attentive checkout checkbox. The Shopify built-in checkbox makes it easier to enable the SMS opt-in option at checkout. Then, you can integrate seamlessly with Attentive to enable transactional or marketing SMS messages.

We recommend that you remove the Attentive code from your Shopify Plus account if you would like to use the Shopify built-in checkbox. Complete the steps outlined in this article and demonstrated in the following video:

On this page

Complete the following steps to remove the code:

  1. Locate the checkout.liquid file
  2. Remove the code
  3. Confirm the code is removed

Step 1. Locate the checkout.liquid file

Complete the following steps to locate your checkout.liquid file:

  1. From your Shopify site, go to Settings > Checkout.
  2. Click Customize checkout in the Style section. The Site Builder appears.
  3. Click the menu icon (three horizontal dots) in the top-left corner and select Edit code.
    edit_code.png
  4. Locate the checkout.liquid file.
      • Note: You can enter checkout in the Search field to find the checkout.liquid file.
        checkout_search.png
  5. Click the checkout.liquid file to open it.

Step 2. Remove the code

After you locate the checkout.liquid file, complete one of the following options to remove the code:

Option A: Find and delete code

Complete the following steps to find and delete Attentive’s code from your site:

  1. Place your cursor in the checkout.liquid file.
  2. To find the code, press Command+F (Mac) or Control+F (Windows) on your keyboard.
  3. Enter head tag in the Find field to locate the beginning of the style tag.
    head_tag_search.png
  4. Highlight the code from <!-- Insert head tag --> to the last </style> tag. See the following image as an example:
    head_tag.png
  5. Press Delete on your keyboard.
  6. Enter <script in the Find field. It should locate both script tags.
    locate_script.png
  7. Highlight the code from <script to the last </script> tag. Note that there should be two <script> tags. See the following image as an example:
    remove_script.png
  8. Press Delete on your keyboard.
  9. Complete the following step, depending on whether you’ve installed the transactional, marketing, or both checkboxes:
    Checkbox Step Example image
    Marketing only Enter Attentive Marketing in the Find field to locate the beginning of the code. marketing_gist.png
    Click the image to expand it.
    Transactional only Enter Attentive Transactional in the Find field to locate the beginning of the code. transactional_gist.png
    Click the image to expand it.
    Both Enter Attentive in the Find field to locate where both pieces of code appear. locate_both.png
    Click the image to expand it.
  10. Complete the following step, depending on whether you’ve installed the transactional, marketing, or both checkboxes:
    Checkbox Step Example image
    Marketing only Highlight <!-- Attentive Marketing - insert HTML in body main__content section --> to the last </div> tag. marketing_gist_remove.png
    Click the image to expand it.
    Transactional only Highlight <!-- Attentive Transactional - insert HTML in body main__content section --> to the last </div> tag. trans_gist_remove.png
    Click the image to expand it.
    Both

    Highlight the code starting with <!-- to the last </div> tag.

    Make sure to include both the Attentive Marketing and Attentive Transactional pieces of code. The example image shows both pieces of code highlighted.

    remove_both.png
    Click the image to expand it.
  11. Press Delete on your keyboard.
  12. Click Save.

Your checkout.liquid file should now resemble the following:

end_result_delete.png

Option B: Revert to an older version

Important! Please be aware that reverting to an older version could potentially remove any other code that was added to your checkout.liquid file. Consult your team to ensure that you’re not removing any additional code before reverting to an older version.


Complete the following steps to revert to an older version to remove Attentive’s code from your site:

  1. Click Older versions next to the checkout.liquid file name, as shown in the following image.
    older_versions.png
  2. Select a version that does not include the Attentive code.
    original.png
    Note: If you only customized the checkout.liquid file once (with the Attentive code), we recommend that you use the Original version.
  3. Click Save.

Your checkout.liquid file should now resemble the following:

end_result_version.png

Step 3. Confirm the code is removed

Now that you’ve completed the previous steps, confirm that the customized code for the Attentive checkout checkbox is removed:

  1. Place your cursor in the checkout.liquid file.
  2. To find the code, press Command+F (Mac) or Control+F (Windows) on your keyboard.
  3. Enter Attentive in the Find field. It should return no results.
    no_results.png

Now that you’ve removed the Attentive checkout checkbox, you can follow the steps to set up transactional and marketing subscriber collection and messages.