Missing Cart Drawer after Updating

Important information about updating to v5.5 with the Shopify Update Tool

You may find the Cart drawer missing after completing the update process when using the Shopify Auto-Update tool. This only occurs with the new Updated theme and will never affect your Live theme.

If your Updated theme is missing the Cart Drawer from the Overlay section, you can contact our support team and provide us access to your store. We can manually add that Cart Drawer to the updated theme's overlay section.

Contact support team >

Another option is to manually reset the Overlay section by replacing the code with our source code. This will bring back the Cart Drawer. If you are comfortable using the Code Editor in your Shopify Admin, we have two options to fix the missing Cart Drawer.

Option 1 - The easiest method

With this method, you copy a fresh version of the source code and replace the code in your updated theme.

Benefits:

• Simplest method

• Quick

• Requires minimal code editor experience

Drawbacks:

• Overwrites existing Overlay sections for Cookie consent, popup newsletters and promotions.

How to - Video for the easiest method

Here is a video step-by-step for the easy method:

Code used in the video:

Group-overlay.json code

Copy this source code to replace the existing version in your theme:

{
  "type": "aside",
  "name": "Overlay",
  "sections": {
    "cookie": {
      "type": "overlay-cookie",
      "settings": {
        "show_cookies_popup": true,
        "position": "popup-cookies--left"
      }
    },
    "cart-drawer": {
      "type": "cart-drawer",
      "blocks": {
        "cart-message": {
          "type": "cart-message",
          "settings": {
          }
        },
        "title": {
          "type": "title",
          "settings": {
          }
        },
        "free-shipping": {
          "type": "free-shipping",
          "settings": {
            "message": "You are ||amount|| away from free shipping.",
            "free_shipping_gradient": ""
          }
        },
        "order-note": {
          "type": "order-note",
          "disabled": true,
          "settings": {
          }
        },
        "gift-note": {
          "type": "gift-note",
          "settings": {
          }
        },
        "products": {
          "type": "products",
          "settings": {
          }
        },
        "upsell-products": {
          "type": "upsell-products",
          "settings": {
          }
        },
        "checkout-buttons": {
          "type": "checkout-buttons",
          "settings": {
          }
        }
      },
      "block_order": [
        "cart-message",
        "title",
        "free-shipping",
        "products",
        "upsell-products",
        "order-note",
        "gift-note",
        "checkout-buttons"
      ],
      "settings": {
      }
    }
  },
  "order": [
    "cookie",
    "cart-drawer"
  ]
}

Use the above code to replace the existing code of your Updated theme.

Steps covered in the video:

• After opening the code editor, find the file: group-overlay.json

• Select all the code in the code area on the right. Erase all the code.

• Next, paste the new source code from the above code snippet

• Save the changes in the code editor.

Option 2 - Add only the Cart Drawer code

This method is for more advanced users who are familiar with JSON files.

In this step, we'll add the required Cart Drawer code to the group-overlay.json file, preserving the existing Overlay sections.

How to

The following code is only for the Cart Drawer section. Copy this code snippet and then place it in the correct position of the JSON file.

"cart-drawer": {
  "type": "cart-drawer",
  "blocks": {
    "cart-message": {
      "type": "cart-message"
    },
    "title": {
      "type": "title"
    },
    "free-shipping": {
      "type": "free-shipping",
      "settings": {
        "message": "You are ||amount|| away from free shipping.",
        "free_shipping_gradient": ""
      }
    },
    "order-note": {
      "type": "order-note",
      "disabled": true,
      "settings": {
      }
    },
    "gift-note": {
      "type": "gift-note",
      "settings": {
      }
    },
    "products": {
      "type": "products",
      "settings": {
      }
    },
    "upsell-products": {
      "type": "upsell-products",
      "settings": {
      }
    },
    "checkout-buttons": {
      "type": "checkout-buttons"
    }
  },
  "block_order": [
    "cart-message",
    "title",
    "free-shipping",
    "products",
    "upsell-products",
    "order-note",
    "gift-note",
    "checkout-buttons"
  ]
},

In the group-overlay.json file, make a new line right after sections (line 4) and paste in the code:

Use the "Tab" key to format the code if you want to.

Next, make a new line break and add the new section "cart-drawer" to the order in which you want it to appear:

Always check for commas.

Note: A comma is required after "card-drawer"except when it's the last item. If you place it after the "cookie" line, be sure a comma is added, as shown above.

• Save the code editor changes.

Now that the section has been added, you will find it as part of your group overlay sections in the theme editor.