Learn to use Dotdigital with your Shopify Hydrogen or headless Shopify store.
Shopify Hydrogen is a front-end web development framework you can use to build custom Shopify storefronts.
There are two main parts to this installation:
- Use our integration to connect your store to Dotdigital and sync your customers, subscribers, products, and orders.
See steps 1, 2, and 3 of this article.
- Manually install the scripts to your Shopify Hydrogen store front end.
This is the same for any custom store setup. See step 4 of this article.
Our components support four of our popular front-end tools:
- Site tracking
Track the journey of any contacts who access your store using links in your email campaigns.
- Web behavior tracking
Track visitor activity on your store and then view and use that data within Dotdigital. You can use this data to trigger follow-up campaigns, drive analysis and insights, power product recommendations, and make the most of our abandoned cart functionality.
- Abandoned carts
Use Web behavior tracking to track abandoned carts from known customers and guests – when enabled. Merchants can set up custom automations to send triggered campaigns and personalise the customer journey using logic based on user behaviour and data.
A smart, customisable widget that sits neatly on your website. It lets your visitors communicate in real time with your team, allowing them to ask questions and get answers instantly.
Before you start
Things you need to know:
- These instructions are for Shopify Hydrogen (headless) stores only.
- While connecting your store, do not choose to automatically install any scripts. For Shopify Hydrogen stores all scripts must be manually inserted into your storefront.
1. Connect Shopify backend to Dotdigital
- 1. In Dotdigital, go to Integration hub, then select the Featured tab.
- Select the Shopify tile. This takes you to the Shopify App Store.
- On the Dotdigital Email Marketing Shopify App Store page, select Add app.
- Log in to your Shopify Store. Shopify might ask you to enter your Store URL first.
- On the Installation page, review the information and select Install app.
- The installation wizard now guides you through configuring the connection between your Shopify store and your Dotdigital account.
2. Create your transactional email design
First, you can customise the design of your transactional emails, as well as your Welcome and Abandoned cart campaigns. You can ensure that these emails align with your brand by setting your colour theme, logo and email footer.
You can see a live preview of how your emails will look, using real products from your store.
The following emails are automatically created for you inside your Dotdigital account. They’re ready to go, but you’re free to edit them if you need to make any changes:
- Abandoned cart
- Shipping update
- Shipping confirmation
- Order refunded
- Order cancelled
- New order confirmation
- New account confirmation
To find these emails, go to Automation > Triggered campaign content. The campaigns are stored in a folder with the same name as your Shopify store.
If you do want to make changes to your transactional email templates, check out Shopify variables for transactional email templates.
3. Configure your Chat widget
In the next step, you’re given the option to set up the Dotdigital chat widget. You can choose to do this now, or return to it later.
With Shopify Hydrogen, you can design your widget now, but you must install the scripts manually. To learn how, check out the links at the end of this article.
A live preview shows you what the chat widget will look like to your site visitors.
To learn more about setting up the Chat feature, check out the Chat section of our Help centre.
4. Manually install the code
- In this last step, you must choose to Install code manually.
- Ask your developer to install the code manually using the information on our Dotdigital for Shopify Hydrogen GitHub page and our Help Centre articles.
To learn how, check out these links: