Industria Social · Liquid and HTML email

Shopify components and HTML email templates for Original Penguin

Custom Shopify store components and rebuilt email templates for marketing campaigns.

Role
Lead Web Developer · Industria Social
Agency employment period
2021–2025
Technologies
Shopify · Liquid · HTML · CSS · JavaScript · HTML legacy

By Case published:

Current Original Penguin Mexico homepage with navigation and a campaign banner

Current version of the Original Penguin website. Reference screenshot; the site may have changed since my work.

View sourceCapture:

At Industria Social, I developed custom components for Original Penguin using Liquid, HTML, CSS and JavaScript. I also rebuilt the old marketing campaign templates with new legacy HTML email templates.

Requirement

The work included adding custom components to the Shopify store and replacing the old marketing email templates.

Implementation

I built the store components with Liquid, HTML, CSS and JavaScript. For the emails, I rebuilt the templates using legacy HTML for email, separately from the store component implementation.

The project had two separate implementations: Shopify store components and HTML templates for email campaigns.

  1. Liquid and HTML generation

    Liquid integrates the components with Shopify content and generates their HTML markup. I developed custom components within that environment, with CSS for presentation and JavaScript for interface behaviors.

  2. Components within the store

    Component development combines the Liquid template with the browser layers: HTML, CSS and JavaScript. The implementation belongs to the store interface and uses Shopify’s context.

  3. Rebuilt email templates

    For the campaigns, I rebuilt the old templates using legacy HTML for email. The emails have their own markup and presentation: they are displayed in an email client, while the Liquid components are displayed on the website.

Current Original Penguin polo collection with filters, sorting and product cards

Current website version. Current Original Penguin polo collection with filters, sorting and product cards.

View sourceCapture:
Current Original Penguin polo product page with photographs, color and size selectors and purchase information

Current website version. Current Original Penguin polo product page with photographs, color and size selectors and purchase information.

View sourceCapture:

Work delivered

Store components and campaign templates.

  1. Liquid components

    I created custom components with Liquid, HTML, CSS and JavaScript.

  2. Rebuilt templates

    I replaced the old templates with new marketing campaign templates.

  3. Legacy HTML for email

    I developed the email HTML markup as a separate implementation from the web components.

Delivered functionality

Custom components and rebuilt templates.

Custom components

The store had custom components developed in Liquid.

New campaign templates

The previous templates were rebuilt as new HTML email templates.

The work described dates from my time at Industria Social (2021–2025). The current public website is a reference and may include later changes.

Applied skills

  • Shopify development
  • Liquid
  • Custom web components
  • HTML email development
  • CSS
  • JavaScript

References