Hero guide for Pre-order Shopify theme

Hero is part of the Navigation section

Comparison of Navigation with and without a Hero

Hero is an optional aspect of the theme exclusive hero-to-menu navigation system.

Hero image guidelines

Please note that virtually all images are over-optimized for performance, except the hero!

You can enable over-optimization for the hero image, disabled by default because it adds a few milliseconds to the LCP (largest contentful paint), which is an important metric for SEO (search engine optimization).

You can use any image filetype (from optimized .webp to animated .gif)

Whatever image you use, be sure to consider a good balance of quality and performance.

Comparison of the same 2688x1536 image with various formats/qualities (ordered by file size)

  • .png high quality - 7.5mb

    Hero image .png high quality - 7.5mb

  • .gif high quality - 2.6mb

    Hero image .gif high quality - 2.6mb

  • .jpg high quality - 1.2mb

    Hero image .jpg high quality - 1.2mb

  • .png low quality - 961kb

    Hero image .png low quality - 961kb

  • .gif low quality - 939kb

    Hero image .gif low quality - 939kb

  • .webp high quality - 586kb

    Hero image winner, .webp high quality - 586kb

  • .jpg low quality - 467kb

    Hero image .jpg low quality - 467kb

  • .webp low quality - 180kb

    Hero image .webp low quality - 180kb

Medium quality .webp image format is a good balance of quality and performance!

Links