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.
![](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpreview-urls.a7ca8d72.png&w=3840&q=75)
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 (e.g., http://localhost:8080/
)
- Select Customizer in Pack’s admin.
- Select the preview URL dropdown menu.
- Click on Edit preview URLs.
- Add a new URL and click Save.
![](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fedit-preview-urls.cddd3a6b.png&w=3840&q=75)
Add a Preview URL for Git Branches
To set up preview URLs for Git branches, follow these steps:
- Navigate to Shopify Admin.
- Select Hydrogen under Sales Channels.
- Click on the Hydrogen Storefront you want to edit.
- Click on Storefront settings
- Choose Environments and Variables.
- Create a new Hydrogen environment linked to your Git branch, ensuring it is set to public.
- Follow the steps for editing custom preview URLs to add the new URL for the Git branch.
![](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fadd-git-preview-url.cbf0a71d.png&w=3840&q=75)
Edit the Preview URL for Production
- Navigate to Pack’s Admin.
- Select Settings.
- Select Developer.
- Click on and edit the production URL.
![](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fedit-production-url.14fbd4f4.png&w=3840&q=75)