2023.11.07[Tue]

ShopifyのデフォルトテーマDawnのバージョン12.0.0がリリースされました。

    目次

    こんにちは。
    ディレクターの田辺です。

    Dawn 12.0.0が、2023年11月1日にリリースされました。
    Dawn 11.0.0がリリースされたのが7月下旬ですから、3ヶ月程度での新バージョンのリリースです。

    3ヶ月で新バージョンは随分早いサイクルでのリリースに感じますが、8.0.0から11.0.0まで毎月新バージョンがリリースされていましたので、11.0.0は、随分息が長いな、と感じ始めていたところではありました。

    さて、Dawn 12.0.0のDawn 11.0.0からの変更点は、下記のリンクから確認できます。
    https://github.com/Shopify/dawn/releases

    個人的に気になった点を詳しく見てみようと思います。

    [Image_tag] Update to remove lazy loading and let it automatically decide the best loading strategy

    Liquidにおいて、image_tagフィルタから、画像の遅延読み込み(lazy)するかどうかの設定が削除され、fetchpriority を活用し、画像読み込みのプライオリティをブラウザに判断させるように変更したようです。
    浅学のため、fetchpriorityなる仕様が実装されていることを知りませんでした。
    Shopifyの、こういった技術の取り込みが早い点には、本当に感心させされます。

    [Image with text] Add color scheme picker for section wrapper

    「テキスト付き画像」セクションの「外側」の配色が設定できるようになりました。
    いまいち活用するシーンは思いつきませんが、自由度が増えるのは良いことですね。

    [Product form] Fix Add to Cart error on page load/slower connections

    回線速度が遅い場合などに、商品詳細ページのロードが完了する前に、「カートに入れる」を行うと、エラーが出ていたようですが、それを解消する変更が入ったようです。
    多くのストアで、モバイルでのサイト閲覧が大多数でしょうし、モバイルでの閲覧は移動中であったりすると回線速度が遅くなることもよくありますので、こういったスロー回線への対応はありがたいですね。

    主要なページの配色設定を、ページ内のセクションで直感的に変更できるようになった。

    • [Collection template] Product grid color scheme picker
    • [Cart] Add color picker on cart page and in general cart settings
    • [Product] Add color scheme picker

    商品一覧ページの商品グリッドの配色、カートの各セクションの配色、商品詳細ページの商品情報の配色、を変更するためのスキーマが追加されました。
    これまでのテーマ設定の色設定で調整していましたが、個別に変更できるようになり、直感的かつデザイン変更の自由度が高まりました。

    まとめ

    11.0.0から12.0.0へのアップデートでは、大きな変更・破壊的な変更というのはないように思います。
    バグフィックス、リファクタリング、スキーマの追加がメインのようなので、11.0.0をお使いの方は気軽にバージンアップしても良さそうです。

    Share

    Shopify Dawnテーマで画像バナーの表示をスマホとPCで分ける方法video.js 8.6.0 をReact + TypeScriptで実装する