How to convert the Shopify Liquid Cart Page template to a Shopify Online Store 2.0 Cart Page to enable it for use with the DIY Tax Exempt Checkout app.
Consider using a qualified Shopify theme developer to make these changes. If you're not a Shopify theme developer, follow these instructions at your own risk. Take precautions to protect and preserve your existing, published theme.
Shopify sunset support for what it now calls "Vintage" themes in favor of "Online Store 2.0" themes in November, 2022. Even so, many Shopify stores still utilize Vintage themes. Since then, most new app development has been done exclusively for Online Store 2.0 themes. If you are a Shopify merchant interested in implementing one of the next-generation apps, you will need to convert selective pages from the Vintage Liquid theme templates to the JSON theme templates required in the Online Store 2.0 architecture. This document provides instructions on how to convert the Cart page to the Online Store 2.0 architecture so that the DIY Tax Exempt Checkout app can be utilized.
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 Sections and Remove Section References
Using the left-hand navigation menu, expand the folder for Templates (if needed).
Locate and select the entry for cart.liquid.
To start converting your Liquid template into a JSON template, you must remove any {% section %} reference tags. Section files can't contain references to other section files. Note their names and locations and then remove them so that you can move the rest of the code to a section file.
Step 4: Copy the Liquid Cart Template Code to a Section File
After removing the {% section %} reference tags, copy the content of the file to your clipboard.
Using the left-hand navigation menu, select Sections and then click on "+ Add a new section".
In the dialog box, select "liquid". Name the file "main-cart" (main-cart.liquid).
Replace the default contents of the new file with the content copied to your clipboard.
Save the changes.
Step 5: Replace the Liquid Template with the JSON Template
Use the left-hand navigation menu to locate Templates > cart.liquid.
Use the control elements (trashcan icon) to delete it.
Beneath the Templates folder, click "+ Add a new template".
Use the dropdown menu to select "cart" and accept the default option for JSON. Click Done.
Add the following code to the cart.json file...
{
"name": "Cart",
"sections": {
"main": {
"type": "main-cart"
}
},
"order": [
"main"
]
}
...and then save it.
Step 6: Add Sections to the JSON Template
If the original cart.liquid template file contained section tags to additional sections, then you can add them to the cart.json file, and then define their order. For example, if the cart.liquid template contained the following section tag...
{% section 'example-section-file' %}
... and you want the content in the cart.json file, you could modify the file as follows:
{
"name": "Cart",
"sections": {
"main": {
"type": "main-cart"
},
"example": {
"type": "example-section-file" }
},
"order": [
"main",
"example"
]
}
Step 7: Add App Blocks to the New Section File
Using the left-hand navigation menu, return to the Section folder, and click on the new main-cart.liquid file. Search for the section that begins with "schema":
If you can't locate the "schema" section, follow the instructions at the end of this step.
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 8: Render the App Blocks
Copy and paste the following code to the main-cart.liquid file (Sections folder) 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. Below is an example of the code after it was placed below the subtotal <div> in the Debut theme. Your experience may differ if you are not working with a copy of the Debut theme.
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 9: 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.
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 isn't, repeat Step 8 to cut and paste the code to a different position. Afterward, repeat this step (Step 9) to add the app block back to the page. Repeat the steps as needed until the app block is positioned where you want to see it.
Step 10: Apply Custom CSS if Required
The tax-exempt widget may span the entire width of the Cart page. If so, navigate to Settings > Custom CSS. Add the following code:
.en-tx--container { display: flex;}
Related resources:
YouTube Video: How to use JSON Templates with Shopify Themes
Shopify Community: Migrating templates to Online Store 2.0