Remove the Attentive checkout checkbox in Shopify

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 opt in checkbox.

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:

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.
   
4. Locate the checkout.liquid file.
   • • Note: You can enter checkout in the Search field to find the checkout.liquid file.
       
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
• Option B: Revert to an older version

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.
   
4. Highlight the code from <!-- Insert head tag --> to the last </style> tag. See the following image as an example:
   
5. Press Delete on your keyboard.
6. Enter <script in the Find field. It should locate both script tags.
   
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:
   
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.	Click the image to expand it.
   Transactional only	Enter Attentive Transactional in the Find field to locate the beginning of the code.	Click the image to expand it.
   Both	Enter Attentive in the Find field to locate where both pieces of code appear.	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.	Click the image to expand it.
    Transactional only	Highlight <!-- Attentive Transactional - insert HTML in body main__content section --> to the last </div> tag.	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.	Click the image to expand it.

11. Press Delete on your keyboard.
12. Click Save.

Your checkout.liquid file should now resemble the following:

Option B: Revert 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.
   
2. Select a version that does not include the Attentive code.
   
   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:

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.
   

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