DEV Community

Cover image for Starter template for Shopify email notifications
Kazuki Yonemoto
Kazuki Yonemoto

Posted on β€’ Edited on

6 2

Starter template for Shopify email notifications

Shopify provides you with default email templates that you can customize, so you don't need to make them from scratch.

However, you sometimes would like to edit their content and design. You need to know the liquid template language created by Shopify and written in Ruby in that case.

It's so hard to customize email templates in Liquid without any developmental environment at local that I've created a starter template that you can preview email templates at local.

πŸš€ shopify-email-notification

Features

  • Previewing notification mails at local server
  • Hot reloading of local server
  • Referring to default email templates which Shopify provides
  • Based on Liquid templates
  • Editable notification variables
  • TypeScript support
  • Multi language support (English and Japanese)
  • Built in useful commands

Requirements

How to use

You can directly generate a new repository from this repository.

πŸš€ shopify-email-notification

Please click "Use this template".

Clone your project repository

Clone the repository you generated from shopify-email-notification.

git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
Enter fullscreen mode Exit fullscreen mode

Install packages

Install all dependencies for a project with bellow command.

pnpm install
Enter fullscreen mode Exit fullscreen mode

Create a .env file (Optional)

Create a .env at the root, and then add your shopify admin url. Replace your-shop-name with yours.

ADMIN_URL=https://your-shop-name.myshopify.com/admin/
Enter fullscreen mode Exit fullscreen mode

Start development

Start your project in development mode.

pnpm start
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:4000, and then you can preview notification templates.

You can also open your store admin page with this command instantly.

pnpm admin
Enter fullscreen mode Exit fullscreen mode

I recommend you use the format command because it notifies your syntax errors.

pnpm format
Enter fullscreen mode Exit fullscreen mode

That's all to do before you start your project.

I recommend you check out the command list before you get started.

πŸ“– Useful command list

Thank you!

I hope that shopify-email-notification is helpful for you.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (2)

Collapse
 
kaanthika_1d5f8f3b208a7df profile image
Kaanthika β€’

Great article on customizing Shopify email notifications! For those working with WooCommerce, there's a fantastic tool called [WooCommerce Email Customizer & Designer] that offers a drag-and-drop interface for tailoring email templates to match your brand. It's a game-changer for enhancing customer communication in WooCommerce stores."

Collapse
 
amjith_aviv_7c5426b84a74d profile image
amjith aviv β€’ β€’ Edited

very helpful.
I am a freelance digital marketing specialist in Malappuram. for more details visit my website [(amjithdigital.in/)]

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more