Shopify Theme Customization with Liquid: Design state-of-the-art, dynamic Shopify eCommerce websites using Liquid’s powerful features (Ivan Djordjevic/Packt Publishing)

書籍Shopify Theme Customization with Liquid: Design state-of-the-art, dynamic Shopify eCommerce websites using Liquid’s powerful features(Ivan Djordjevic/Packt Publishing)」の表紙画像

購入価格:3920

評価:

この記事は約4分43秒で読めます

ここまで詳しくShopifyのLiquidについて書かれた本は、現時点では日本には存在しない。

かろうじて「Hello Shopify Themes Shopifyテーマ開発ガイド」という良書が存在するが、本書はそれをもゆうに凌ぐ充実度である。

やはり、HTMLやCSSはじめ、Web業界の最新知識を得るには英語の書籍にあたるしかないことを痛感。本書をじっくり読み込み完全に理解すれば、間違いなく日本におけるShopify開発でイニシアチブをとれるはずだ。

To resolve this problem, we can introduce a hyphen inside our syntax tag as {{- – }} or {%- -%}, which allows us to strip any unwanted whitespace:
Collection info:
{%- if collection -%}
The collection’s name is
{{ collection.title -}} !
{%- endif -%}

日本語訳: この問題を解決するために、シンタックスタグの中に{{- – }}や{%- -%}のようにハイフンを入れることで、不要な空白を除去することができるのです。

How can we easily identify the Liquid code that is slowing down the store?
To help us with this, Shopify has introduced an addon named Shopify Theme Inspector for Chrome, which we can use to retrieve a detailed analysis render profiling and help us narrow down which files are causing the most significant delay. We can find more info on Shopify Theme Inspector for Chrome using the following link: https://chrome.google.com/webstore/detail/shopify-theme-inspector-f/fndnankcflemoafdeboboehphmiijkgp.

日本語訳: ストアの速度を低下させているリキッドコードを簡単に特定するにはどうしたらよいでしょうか。Shopify は、Shopify Theme Inspector for Chrome というアドオンを導入しており、これを利用することで詳細な分析レンダープロファイリングを取得し、最も大きな遅延を引き起こしているファイルを絞り込むことが可能です。Shopify Theme Inspector for Chromeの詳細については、以下のリンクを参照してください。

How can we find which app is being used by a particular store?
While it is not possible to see every type of app that a store is using, we can retrieve the names of most of the apps by using the Shopify App Detector by Fera.ai or Koala Inspector – Inspect Shopify Shops Chrome addons. You can find more info on Shopify App Detector by Fera.ai using the following link: https://chrome.google.com/webstore/detail/shopify-app-detector-by-f/lhfdhjladfcmghahdbcmlceajdlbkale.
You can find more info on Koala Inspector – Inspect Shopify Shops using the following link: https://chrome.google.com/webstore/detail/koala-inspector-inspect-s/hjbfbllnfhppnhjdhhbmjabikmkfekgf.

日本語訳: 特定のストアで使用されているアプリを調べるにはどうしたらよいでしょうか。ストアが使用しているすべての種類のアプリを見ることはできませんが、Shopify App Detector by Fera.ai や Koala Inspector – Inspect Shopify Shops Chrome addons を使用すれば、ほとんどのアプリの名前を取得することができます。Shopify App Detector by Fera.aiの詳細については、以下のリンクから確認できます。

記事カテゴリー: WEB