Complete Shopify Developer Workflow: From Request to Deploy

In the world of Shopify development, managing client requests efficiently while maintaining code integrity is crucial. Today, I'm going to demonstrate a complete development workflow from start to finish.

We will simulate a real-world client request, code the solution locally, create a safe demo environment for the client, and finally integrate the changes into the live theme.

Prerequisites

To follow this tutorial, you need a specific development stack already configured:

• GitHub Integration: Your theme should be connected to a GitHub repository.
• Visual Studio Code: The editor of choice for this workflow.
• Shopify CLI: You must have the CLI installed.

You can verify your CLI installation by running shopify version in your terminal.

Step 1: Initialize Local Development

First, navigate to your theme folder and open Visual Studio Code (code .). We need to sync our local environment with the Shopify store.

Run the following command in your terminal, replacing the URL with your specific store address:

shopify theme dev --store your-store-name.myshopify.com

Follow the authentication prompts. Once running, the CLI will provide a local server address (usually http://127.0.0.1:9292) and ask for your store password. You can find this password in your Shopify Admin under Online Store > Preferences.

Step 2: Analyze the Client Request

The Request: The client wants the ability to underline the heading text on the "Image Banner" section.

Before writing code, always check the existing implementation:

1. Check the Customizer: Does the theme already support this? In our case, the Image Banner block settings do not have an underline option.
2. Inspect DOM Elements: Use Chrome DevTools (Ctrl+Shift+C or Cmd+Shift+C) to inspect the heading.
3. Test CSS: Manually add text-decoration: underline; in the browser inspector to confirm the visual change is what the client wants.

Step 3: Version Control Strategy

Never work directly on the main branch. Create a feature branch to isolate your changes.

git branch underline
git checkout underline

Verify you are on the correct branch by running git branch.

Step 4: Implementation

We will implement this by creating a CSS utility class and controlling it via Liquid schema settings.

1. Add Global CSS

Open your main CSS file (e.g., assets/base.css). At the bottom of the file, add a utility class. It is best practice to add comments for tracking changes.

/* Client Request [Date] - Add underline utility */
.underline {
  text-decoration: underline;
}
/* End Client Request */

2. Locate the Liquid File

We need to find where the Image Banner heading is generated. Copy the existing HTML classes from your browser inspector and search for them in VS Code. In this case, we locate the code in sections/image-banner.liquid.

3. Update Liquid Logic

Find the heading element (often an <h2> or <h1>). We want to conditionally render the .underline class based on a setting.

<h2 class="banner__heading inline-richtext {{ block.settings.heading_size }} {% if block.settings.is_underlined %} underline {% endif %}">
  {{ block.settings.heading }}
</h2>

4. Update the Schema

Now, we must give the client a button to control this. Scroll down to the schema section of the file. Find the block settings for the heading and add a new checkbox input.

{
  "type": "checkbox",
  "id": "is_underlined",
  "label": "Underline title?",
  "default": true
}

Save your files. The Shopify CLI will hot-reload the changes. You can now verify in your local customizer that the checkbox toggles the underline class correctly.

Step 5: Git Workflow and Deployment

Once the feature works locally, commit your changes.

git add .
git commit -m "Add underline capability to image banner"
git push --set-upstream origin underline

Connecting the Branch to Shopify

Instead of merging immediately, we want the client to preview only this feature.

1. Go to Online Store > Themes in Shopify Admin.
2. Click Add theme > Connect from GitHub.
3. Select your repository and choose the underline branch (not main).

This creates a staged theme linked specifically to your feature branch.

Step 6: Client Preview Method

To send the client a demo without asking them to log in to the admin or click "Preview," use the Preview Theme ID parameter.

1. Get the theme_id from the URL when customizing the new branch theme.
2. Construct the URL:

https://your-store.myshopify.com/?preview_theme_id=YOUR_THEME_ID

Send this link to your client. It allows them to interact with the site exactly as it looks with your code changes applied.

Step 7: Merging to Production

If the client requests changes, you simply continue pushing code to the underline branch. Once approved:

1. Go to GitHub.
2. Open a Pull Request comparing underline to main.
3. GitHub will check for conflicts.
4. Confirm the merge.

Because your main live theme is connected to the main GitHub branch, Shopify will automatically pull the changes and update the live site within moments.

This workflow ensures that you never break the live site, clients see progress in real-time, and your code history is clean and manageable.