Skip to content

MrGKanev/shopify-admin-cleaner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Shopify Admin Cleaner

A simple bookmarklet that helps clean up the Shopify admin interface by hiding redundant details. This tool helps you show/print only the information you need.

Before: Shopify admin interface with all details visible (data anonymized) Before: Shopify admin interface with all details visible
(Data anonymized using browser-text-anonymizer)
After: Clean interface with redundant details hidden (data anonymized) After: Clean interface with redundant details hidden
(Data anonymized using browser-text-anonymizer)

Features

  • Toggle functionality - click once to hide, click again to show
  • Hides subdued text elements in the Shopify admin interface
  • Hides Timeline section for cleaner order views
  • Supports new Shopify Polaris Web Components (s- prefix)
  • One-click activation
  • No installation required
  • Works with all modern browsers
  • Zero dependencies

Installation

  1. Visit the tool's webpage
  2. Drag the green "🧹 Hide Details" button to your browser's bookmarks bar
  3. Navigate to your Shopify admin orders page
  4. Click the bookmark to activate the cleaner

How It Works

The bookmarklet injects CSS rules that hide various UI elements in the Shopify admin:

  • Subdued text elements (.Polaris-Text--subdued and new s-text[tone=subdued])
  • Attribute rows and order detail app blocks
  • Timeline section
  • Third-party app blocks (AfterShip, Loox, Judge.me, Klaviyo, Privy)

Click the bookmark once to hide elements, click again to restore them (toggle functionality).

Plugin Compatibility

The cleaner has been tested with the following Shopify plugins:

Note: Plugin compatibility may vary with different versions. If you find a plugin that works well with the cleaner, feel free to submit a pull request to update this list.

Useful Commands

  • Continuously watch for changes in the style.css file, updating the output file whenever changes occur.
npx @tailwindcss/cli -i ./assets/css/styles.css -o ./assets/css/styles.min.css --watch
  • Generate a minified version of the CSS
npx @tailwindcss/cli -i ./assets/css/styles.css -o ./assets/css/styles_min.css --minify

Contributing

We welcome contributions to improve plugin compatibility! If you'd like to add support for a new plugin:

  1. Fork the repository
  2. Test the cleaner with your plugin
  3. Update the Plugin Compatibility section in the README
  4. Submit a pull request with your changes

Please include the following information when adding a new plugin:

  • Plugin name
  • Tested version
  • Any specific considerations or limitations

Compatibility

  • Works with all major browsers (Chrome, Firefox, Safari, Edge)
  • Compatible with latest Shopify admin interface
  • Tested with Shopify's Polaris design system

Author

Created by Gabriel Kanev

License

This project is available under the MIT License. See the LICENSE file for details.

Support

For support, please:

  1. Check the troubleshooting guide
  2. Search existing issues
  3. Create a new issue if needed

Made with ❤️ for the Shopify community

About

A simple bookmarklet that helps clean up the Shopify admin interface by hiding redundant details. This tool helps you show/print only the information you need.

Resources

License

Stars

0 stars

Watchers

1 watching

Forks

Contributors