Overview

Shopify 2.0 Dawn Integration Modules

Trellis' version of the Shopify Dawn theme with integrations to improve development speed & code quality.

TailwindCSS

Utility-first approach to CSS customization to speed up frontend development.

Prettier

Code formatting using Trellis' Prettier config that works with Husky pre-commit hooks to ensure consistent formatting upon every git push.

Speed checks with Lighthouse CI

Review scores with every code change to ensure top performance with every pull request.

Shopify 2.0 Components

Announcement Bar

A computer mouse cursor moves to the top right of the browser screen. There is a click on a right pointing chevron icon on the right side of the announcement bar element. This triggers the announcement message with a white background to slide to the left and reveal another message with a blue background. The mouse then clicks on a left pointing chevron icon on the left side of the blue background message that has appeared with the new message. The click triggers the message with a blue background to slide back to the right, revealing the initial message with a white background.

An extension of the Shopify Dawn theme announcement bar section. Carousel arrows appear when more than one announcement bar block is added. Users are able to toggle through multiple announcement bars.

Instead of having multiple message banners stack vertically and take up space, messages are configured into a carousel and can be navigated with previous and next chevron buttons.

  View Documentation

Countdown

A visual example of the countdown section with a header, paragraph of text, and the countdown represented in days, hours, minutes, and seconds.

A visual example of the countdown block on a product page with an on sale countdown represented in days, hours, minutes, and seconds.

A Shopify 2.0 section and product page block containing countdown functionality that can be used for promotions to increase urgency.

The section can be used on any 2.0 page template for a sitewide event where you want to highlight the expiration. The product page block can be added to all product page templates or separate product templates if desired to add to a select grouping of products for a specific countdown configuration.

  View Documentation

Richtext

A visual example of the richtext section with white header and paragraph copy on top of a background image of a long exposure picture of a city with multiple roads and surrounding buildings.

An extension of the Shopify Dawn theme rich text section that includes extra options for changing the background color, image, image size, overlay color, overlay opacity, and a color picker for the text.

These options will allow you to further customize the RichText section to expand its use cases across your website for conveying information through copy on top of various background configurations.

  View Documentation

Product Detail Page Desktop Carousel

A computer mouse cursor clicks the right pointing chevron icon on top of a large image of yellow gloves to toggle through multiple product images of yellow gloves. The cursor then clicks the left pointing chevron icons to toggle back through the product images. The smaller thumbnail images below the large image are then clicked to toggle through the product images.

An extension of the Shopify Dawn theme product page gallery to give the option of a carousel display on desktop. Carousel arrows only appear when more than one image is added. Users can browse through available images and may also choose which image to view by selecting the thumbnails below the main image.

This allows users to experience a more traditional image gallery functionality when browsing the website on a larger resolution device.

  View Documentation
Starter Theme →