How to Manually Remove a Shopify Section When the Delete Icon Is Missing

Shopify allows merchants to customize their online stores through sections, which are building blocks of themes. Typically, sections can be added, removed, or rearranged using the Shopify Theme Editor. However, there may be times when the delete icon is missing for a section, leaving you unable to remove it using the editor. This guide will walk you through the process of manually removing a section from your Shopify theme.

---

Step 1: Back Up Your Theme

Before making any changes to your theme code, it's essential to create a backup. Here's how you can do that:

1. Navigate to Online Store > Themes in your Shopify admin.
2. Locate your current theme and click Actions > Duplicate.
3. Work on the duplicated version to ensure you have a fallback option if something goes wrong.

---

Step 2: Identify the Section

You need to identify the section you want to remove.

1. Go to the Theme Editor:
   • Navigate to Online Store > Themes and click Customize.
2. Scroll to the section you wish to remove and note its name or content. The name is usually something like 'featured-products' or 'custom-section'.

If the section doesn’t have a delete icon, you’ll need to find it manually in the code.

---

Step 3: Access the Theme Code

1. Go to Online Store > Themes.
2. Click Actions > Edit Code.

---

Step 4: Locate the Section in the Theme Code

1. In the Templates folder, look for files like:
   • index.json (for the home page)
   • product.json, collection.json, etc., for specific pages.
2. Open the relevant .json file and search for the section name you identified in Step 2.

For example, if the section name is featured-products, you might see code like this:

{
    "type": "featured-products",
    "settings": {
        "title": "Featured Products",
        "product_ids": []
    }
}

Step 5: Remove the Section Code

1. Delete the entire block of code associated with the section. Example:
   {

       "type": "featured-products",
       "settings": {
           "title": "Featured Products",
           "product_ids": []
       }
   }
   

2. Save your changes.

Step 6: Remove the Section's Order from the Order Array

1. In the same JSON file, find the "order" array. This determines the order of sections on the page. For example:

   "order": [
       "header",
       "my-section",
       "footer"
   ]

2. Remove the section's name ("my-section") from the array.
3. Save your changes.

Step 7: Check for Additional References

Sometimes, sections are also referenced in the Layout or Sections folders:

• Check the theme.liquid or section-specific.liquid file in the Layout folder.
• Look for a file named featured-products.liquid in the Sections folder and ensure it’s not being loaded unnecessarily.

---

Step 8: Preview and Test

1. Go back to Online Store > Themes and click Actions > Preview for the theme you edited.
2. Check the page where the section was previously displayed. It should now be removed.

---

Tips and Best Practices

• Use Comments: If you're unsure about deleting a section permanently, you can comment out the code instead of deleting it. For example, in a .liquid file:

  {%- comment -%}
  {% section 'featured-products' %}
  {%- endcomment -%}

• Understand the Code: If you're not confident with code changes, consult a Shopify expert or your theme's documentation.
• Revert Changes if Needed: If something breaks, you can revert to the backup theme.

 

Conclusion

Removing a Shopify section manually may seem daunting at first, but by following the steps above, you can successfully declutter your store and take control of your theme’s layout. Always back up your theme before making changes and take your time to identify and modify the right files.

Need more help? Feel free to comment below or contact us for personalized support!