Shopify CLI Status

A Waybar module for monitoring Shopify theme and app development sessions in real-time.

Features

• Dual Session Support: Monitors both shopify theme dev and shopify app dev sessions

• Real-time Updates: Shows active development sessions with store information

• Customizable Display: Configurable text, icons, and tooltips

• Smart Links: Optional admin and editor links in tooltips

• Session Duration: Optional runtime tracking

• Intelligent Caching: Efficient caching system for performance

Screenshots

1 theme + 1 app

2 themes + 1 app

2 themes

1 theme

1 app

No sessions

Active Sessions

[Shopify: 1 theme + 1 app]

Single Session

[Shopify: my-store]

[Shopify: 1 theme]

No Sessions

[Shopify: theme/app not running]

Installation

Prerequisites

• Waybar (for the status bar)
• Shopify CLI v3+
• jq (for JSON parsing)

Quick Setup

1. Clone and install:

   git clone https://github.com/uwagz/shopify-cli-status.git
   cd shopify-cli-status
   ./install.sh

2. Add the module configuration shown by the installer to your Waybar config

3. Restart Waybar and enjoy!

💡 Safety First: The installer automatically backs up your existing Waybar config and stylesheet before making any changes.

Configuration

The module is highly configurable through a configuration file located at ~/.config/shopify-cli-status/config.

CSS Styling

The install.sh script automatically adds the following CSS styles to your Waybar stylesheet:

#custom-shopify-cli-status.active { color: #00cc66; }
#custom-shopify-cli-status.idle   { color: #eee; }
#custom-shopify-cli-status.error  { color: #ffaa33; }

Note: If no Waybar stylesheet exists, the installer will show you these styles to add manually.

Available Options

Option	Default	Description
LABEL_TEXT	"Shopify"	Text shown in the status bar
SHOW_FULL_URL	false	Show full store URL vs short name
INCLUDE_LINKS	false	Include admin/editor links in tooltip
INCLUDE_SESSION_DURATION	false	Show session runtime

| SHOW_WHEN_IDLE | true | Show module when no sessions running | | BEFORE | " [" | Text before the main content | | AFTER | "] " | Text after the main content | | DEBUG | false | Enable debug output | | CACHE_DIR | "/tmp/shopify-cli-status" | Cache directory location |

Icon Options

You can customize the icons shown in the status bar by setting these variables in your config file:

Variable	Default	Description	Example Icon
ICON_ACTIVE	●	Active session icon	✓
ICON_IDLE	●	Idle/no session icon	ℹ

Example usage in your config:

ICON_ACTIVE="✓"
ICON_IDLE="ℹ"

Example Configuration

# ~/.config/shopify-cli-status/config

# Display options
LABEL_TEXT="Shopify Dev"
SHOW_FULL_URL=false
INCLUDE_LINKS=true
INCLUDE_SESSION_DURATION=true

SHOW_WHEN_IDLE=true

# Text formatting
BEFORE=" ["
AFTER="] "

# Debug mode
DEBUG=false

# Cache settings
CACHE_DIR="/tmp/shopify-cli-status"

Usage

Basic Usage

The script automatically detects running Shopify development sessions:

# Start a theme development session
shopify theme dev

# Start an app development session  
shopify app dev

# The Waybar module will automatically show:
# [🟢 Shopify CLI: 1 theme + 1 app]

Tooltip Information

Hover over the module to see detailed information:

Type: theme
Store: my-store.myshopify.com
Name: Development Theme
ID: 123456789
Role: development

Type: app
Store: my-store.myshopify.com
Name: My App
ID: SHOPIFY_API_KEY
Role: development

Links (when enabled)

Links:
  https://my-store.myshopify.com
  https://my-store.myshopify.com/admin/themes/123456789
  https://my-store.myshopify.com/admin/themes/123456789/editor

How It Works

1. Process Detection: Uses pgrep to find running shopify theme dev and shopify app dev processes
2. Data Extraction: Calls shopify theme info or shopify app info to get session details
3. Caching: Stores JSON responses in cache files for performance
4. Display Logic: Formats data based on configuration options
5. Real-time Updates: Waybar refreshes the module every 2 seconds

Development

Project Structure

shopify-cli-status/
├── shopify-cli-status.sh    # Main script
├── config.jsonc         # Waybar configuration example
├── styles.css           # CSS styling example
├── config               # Sample configuration file
├── install.sh           # Installation and setup script
└── README.md            # This file

Debug Mode

Enable debug output to troubleshoot issues:

# Edit config file
echo 'DEBUG=true' >> ~/.config/shopify-cli-status/config

# Run with debug output
./shopify-cli-status.sh 2>&1

Troubleshooting

Common Issues

Module shows "Shopify CLI/jq missing"

• Install Shopify CLI: npm install -g @shopify/cli
• Install jq: brew install jq (macOS) or sudo apt install jq (Ubuntu)

No sessions detected

• Ensure shopify theme dev or shopify app dev is running
• Check that processes are visible to pgrep

Cache issues

• Clear cache: rm -rf /tmp/shopify-cli-status
• Restart development sessions

Configuration not loading

• Verify config file exists: ls ~/.config/shopify-cli-status/config
• Check file permissions: chmod 644 ~/.config/shopify-cli-status/config

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Setup

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes
4. Test thoroughly
5. Commit your changes: git commit -am 'Add feature'
6. Push to the branch: git push origin feature-name
7. Submit a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions:

1. Check the troubleshooting section
2. Search existing issues
3. Create a new issue with detailed information

---