Open Shopify Pages in the Customizer with a Single Click

ByJunaid Ahmed

As a Shopify store owner or developer, you likely spend a lot of time in the Shopify Customizer, tweaking themes and pages to perfection. While Shopify provides a robust interface for editing, navigating to specific pages can be repetitive and time-consuming.

What if I told you there’s a smarter way to navigate to the Shopify Customizer? This guide will introduce you to two efficient methods: a manual approach to understand the basics and an automated solution using the Browser Shortcuts Chrome extension to simplify your workflow.

The Manual Method: Opening Shopify Pages in the Customizer

The Shopify Customizer URL has a specific structure that can be manipulated to open any page directly. Here’s how you can create these links manually.

Understanding the Customizer URL

Shopify’s Customizer URL follows this format:

https://admin.shopify.com/store/{store-name}/themes/{theme-id}/editor

To load a specific page, append the previewPath parameter:

https://admin.shopify.com/store/{store-name}/themes/{theme-id}/editor?previewPath={page-path}
  • store-name: The unique name of your Shopify store (e.g., my-store for my-store.myshopify.com).
  • theme-id: The numeric ID of the theme you’re editing.
  • page-path: The relative path of the page you want to customize (e.g., /products/example-product).

Step-by-Step Guide

1. Identify Your Store Name
Your store name is the subdomain of your Shopify URL, excluding .myshopify.com.
Example: For https://my-store.myshopify.com, the store name is my-store.

2. Find Your Theme ID

  • Navigate to Online Store > Themes in your Shopify admin.
  • Click Customize for the theme you want to edit.
  • Check the browser URL—the theme ID is the numeric value after /themes/.

3. Determine the Page Path
Visit the page in your storefront that you want to customize. Copy the URL path after the domain.

Examples:

  • Homepage: /
  • Product Page: /products/example-product
  • Collection Page: /collections/example-collection
  • Blog Post: /blogs/blog-name/article-title

4. Construct the Customizer URL
Combine the store name, theme ID, and page path using the format: https://admin.shopify.com/store/{store-name}/themes/{theme-id}/editor?previewPath={page-path}.

Examples:

  • Homepage: https://admin.shopify.com/store/my-store/themes/123456789/editor?previewPath=/
  • Product Page: https://admin.shopify.com/store/my-store/themes/123456789/editor?previewPath=/products/example-product

5. Bookmark Your URLs
Save each Customizer URL as a browser bookmark for quick access to frequently edited pages.

Limitations of the Manual Method

While functional, the manual process has several drawbacks:

  • Separate Bookmarks for Each Page: You’ll need individual bookmarks for every page you frequently edit.
  • Theme-Specific URLs: If you switch between draft, development, and live themes, you’ll need separate URLs for each.
  • Time-Consuming: Constructing URLs manually for new pages or themes takes time and is prone to errors.

Automating the Process with Browser Shortcuts

To overcome the limitations of the manual method, you can automate the process with the Browser Shortcuts Chrome extension. This tool allows you to execute JavaScript snippets directly in your browser with a single click, eliminating the need for pre-constructed URLs or bookmarks.

Setting Up Browser Shortcuts

1. Install the Extension
Install Browser Shortcuts from the Chrome Web Store and add it to your browser.

2. Create a New Shortcut:

  • Open the Browser Shortcuts extension options page.
  • Give the shortcut a meaningful name, such as “Open in Customizer”.
  • Select Action Type as JavaScript

3. Add the JavaScript Snippet
Copy and paste the following JavaScript code into the shortcut editor:

const shopName = window.Shopify.shop.replace(".myshopify.com", "");
const themeId = window.Shopify.theme.id;
let previewPath = "";

if (window.location.pathname !== "/") {
  previewPath = encodeURIComponent(window.location.pathname);
}

const customizerUrl = `https://admin.shopify.com/store/${shopName}/themes/${themeId}/editor?previewPath=${previewPath}`;
window.open(customizerUrl, '_blank');

4. Test the Shortcut

  • Open any Shopify page in your browser (e.g., a product or collection page).
  • Right click anywhere on the page, click on the shortcut you just created.
  • The Shopify Customizer will open in a new tab, preloaded with the page you were viewing.

Tip: Organize shortcuts into folders within the extension to keep things tidy if you create multiple shortcuts.

Why Use Browser Shortcuts?

  • Dynamic URL Generation: The JavaScript snippet automatically detects the store name, theme ID, and page path, eliminating the need for manual URL construction.
  • Time-Saving: Open the Customizer for any page with a single click or keyboard shortcut.
  • Cleaner Workflow: No need to manage cluttered bookmarks or update URLs when switching themes.

Your turn

What other Shopify tasks do you think could be automated with this approach? Or perhaps even tasks outside of Shopify? Share your ideas and feedback—we’d love to hear how you streamline your workflows!