Tax-exempt Checkout: Add App Blocks to the Shopify Online Store 2.0 Cart Page

How to add App Blocks to the Cart page of a Shopify Online Store theme that doesn't have them.

Installation of the DIY Tax Exempt Checkout app requires that the store's theme for the Cart page be compatible with Shopify's Online Store 2.0 theme architecture. Although some themes are compatible with Shopify's Online Store 2.0 theme architecture, they lack sections that allow for the addition of app blocks, which are instrumental to the placement and formatting of the widget that the DIY Tax Exempt Checkout app renders on the Cart page.

This document explains how to add app blocks to the Cart page of a Shopify Online Store 2.0 theme.

Step 1: Create a Working Copy of the Theme

Use the Shopify ADMIN menu to navigate to Online Store > Themes. Locate the theme you want to modify and click the "..." button.  Choose "Duplicate" from the list of options.

Step 2: Edit the Duplicate Theme Code

Locate the newly duplicated theme, click the "..." button, and select Edit Code from the list of options.

Step 3: Identify the Name of the Section File

Using the left-hand navigation menu, expand the folder for Templates. Locate and select the  cart.json file.

Look for the section file name that contains the content of the Cart page. In the following example, the section file name is "cart-template" and it is identified in the "main" section.

Step 4: Add App Blocks to the Section File

Using the left-hand navigation menu, expand the folder for Sections. Locate and select the  section file identified in the previous step. (Your section file name may be different.)

Search for the portion of the file that begins with "schema":

Add the following code below "settings":

"blocks": [
  {
    "type": "@app"
  }
]

When you're done, the result should resemble the following:

If your file doesn't contain a "schema" section, manually add it to the bottom of the file so that the result resembles the following:

Step 5: Render the App Block

Copy and paste the following code to the section file where you want the app block containing the Tax Exempt widget to display:

 

{% for block in section.blocks %}
  {% case block.type %}
    {% when '@app' %}
      {% render block %}
  {% endcase %}
{% endfor %} 

 

Normally, this will be directly below the Cart subtotal and above the Update Cart and Checkout buttons.

If your section file contains snippets, you may need to add the rendering code to the snippet file(s) to get the desired result.

After pasting the code, click the Format liquid button located at the top right of the page to format the newly added code. Save the changes and then use the option in the top left corner of the page to exit the theme editor.

Step 6: Add the Tax Exempt Checkout app to the Cart Page

Use the Shopify Admin menu to navigate to Online Store > Themes. Click the Customize button for the copy of the them you are editing.

Navigate to the preview of the Cart page. 

Using the navigation menu on the left side, click on the + Add block button in the Cart page section.

Select Apps and then click on the entry for the Tax Exempt Checkout app.

Afterward, the app will appear in the Cart section of the Cart template.

Preview the Cart page to verify that the tax-exempt widget appears where you want it to. If it doesn't, repeat Step 5 to cut and paste the code to a different position. Afterward, repeat this step to add the app block back to the page. Repeat these steps as needed until the app block is positioned where you want to see it.