Manage Preview URLs

Preview URLs let you isolate and view changes in a sandboxed environment, typically corresponding to a specific git branch or set of code changes. This allows for testing and sharing development changes without affecting the live storefront or shop.

Ensure your branch names are not excessively long. This can cause issues with the preview URL and Customizer not loading, as the maximum length of a domain label is 63 characters, per the DNS size limit.

Edit Custom Preview URLs

Custom preview URLs can be added based on how you deploy your storefront or shop (e.g., http://localhost:8080/)

  1. Select Customizer in Pack’s admin.
  2. Select the preview URL dropdown menu.
  3. Click on Edit preview URLs.
  4. Add a new URL and click Save.

Add a Preview URL for Git Branches

To set up preview URLs for Git branches, follow these steps:

  1. Navigate to Shopify Admin.
  2. Select Hydrogen under Sales Channels.
  3. Click on the Hydrogen Storefront you want to edit.
  4. Click on Storefront settings
  5. Choose Environments and Variables.
  6. Create a new Hydrogen environment linked to your Git branch, ensuring it is set to public.
  7. Follow the steps for editing custom preview URLs to add the new URL for the Git branch.

Edit the Preview URL for Production

  1. Navigate to Pack’s Admin.
  2. Select Settings.
  3. Select Developer.
  4. Click on and edit the production URL.

Was this page helpful?