Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications.
This article lists the steps for implementing Dynamic Yield on your Shopify Hydrogen 2 store.
Step 1: Sync your product catalog with Dynamic Yield
By syncing your product catalog, you enable product recommendations, social proof, affinity personalization, and more. To sync your catalog:
- Install the Dynamic Yield v2 Shopify app on your store.
- Next, in the app configuration, enter your section ID:
- Enable syncing the product catalog with Dynamic Yield, and follow these instructions.
Step 2: Generate API keys
Create a server-side API key with an ACL of Experience API. You’ll use this API key throughout your implementation.
Contact us if you don’t see the option to create API keys in your account.
Step 3: Report events
Report any meaningful actions that users perform on your site or app. Implementing Purchase and Add to Cart events is mandatory, but we recommended implementing additional events, such as signup and login. Learn more about reporting events.
Step 4: Make a Choose call on every page
Generally, on every page of your store, you'll trigger an API call called Choose, which has 2 functionalities: The first is reporting a pageview to Dynamic Yield, and the second is serving as the container of the content request for campaigns that run on this page. Because you’re only in the implementation phase and have yet to create a campaign, it will be executed without a campaign request. Later, when you create campaigns, the call should include the selector attribute.
Learn more about Choose API calls.
Step 5: Track engagement with variations
As part of running server-side campaigns on the store, you'll need to track clicks on the content and recommendations that are served.
Learn more about reporting user engagement implementation.
Post-implementation
When you've completed these steps, you can start creating campaigns. Each campaign has a selector that you'll use in your Choose calls. The responses to these calls will include the content that the user should receive, whether the content that's targeted to the audience that the user belongs to, or the list of products that should appear in the recommendation widget. This is an ongoing process: Creating the campaign, adding it to Choose calls, and connecting the response to your application's front end or back end.
Learn more about creating Server-Side Recommendation Campaigns and Custom Campaigns.
Live Demo
You can view a live demo of a Hydrogen 2 store that includes a full Dynamic Yield implementation here. You can view the repository of the store here.