Setting Up Localhost for Development
Setting up your local development environment is a crucial step in the development process.
The Customizer allows you to preview your local storefront in real-time, making it easy to test your changes before pushing them to production.
Clone the Repository
Start by cloning the storefront's repository to your local machine.
npm installto install necessary dependencies.
npx shopify hydrogen env pullfor a quick environment setup. This will pull the necessary environment configurations.
Alternatively, you can manually copy and paste the environment variables from Shopify.
Start the Development Server
npm run devto start the development server. Your local storefront will be available at
Adding a Localhost Preview URL to the Customizer
In order to preview your local storefront in Customizer, you will need to add your localhost URL to the Customizer preview URLs.
- Navigate to the Customizer.
- Select the preview URL dropdown (located below the Publish button).
- Click on "Edit preview URLs."
- Add your new URL and click Save.
Learn how to manage preview URLs in the Customizer
Learn how to use Content Environments to preview content changes
Content Management API
Learn how to use the Content Management API to manage content
Section Schema API
Learn how to use the Section Schema API to manage sections