今回はShopifyがどういう構造で作られているかご説明します。
構造が分かれば自分でカスタマイズするときに、どこをコーディングすればいいか迷わずに済むので覚えておきましょう。
Shopifyはレイアウト、テンプレート、セクション、スニペット、設定、アセット、ロケールというもので成り立っています。
図にしたらこんな感じでできています。
ワードプレスを弄ったことがある人ならピンとくると思います。
レイアウト
レイアウトはメインのところですね！
ここにGoogleフォントやFontawesomeのリンクとかいれたり
自作したセクションやスニペットをrenderで呼び出して固定したりもできます。
sectionはShopifyのセクションを呼び出すコードです。
それぞれ呼び出すのに必要なコードですね。
{% section 'header' %}
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{% section 'side_menu' %}
<div id="main_content">
{{ content_for_layout }}
</div>
</main>
{{ content_for_layout }}
{% section 'footer' %}
テンプレート
テンプレートはJSONが入っていて…ここよく分かっていません。
弄る際はJSONとShopifyの構造を理解してからにしましょう。
じゃないとバグり散らかしてひどい目にあいます。
{
"sections": {
"main": {
"type": "main-article",
"blocks": {
"featured_image": {
"type": "featured_image",
"settings": {
"image_height": "adapt"
}
},
セクション
Shopifyはそれぞれのパーツが組み合わさってできています。
結構細かく作られているのでなにがどんな役割をしている要素なのか分かりやすく
クラス指定がされています。
そしてそれをschemaで書かれていてカスタマイズで簡単にいじれるように制御されています。
HTMLとかJavascriptで書かれているので構造を理解しやすいと思います。
{%- when 'featured_image'-%}
{%- if article.image -%}
<div class="article-template__hero-container" {{ block.shopify_attributes }}>
<div class="article-template__hero-{{ block.settings.image_height }} media"
itemprop="image"
{% if block.settings.image_height == 'adapt' and article.image %} style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"{% endif %}
>
<img srcset="{% if article.image.width >= 350 %}{{ article.image | image_url: width: 350 }} 350w,{% endif %}
{% if article.image.width >= 750 %}{{ article.image | image_url: width: 750 }} 750w,{% endif %}
{% if article.image.width >= 1100 %}{{ article.image | image_url: width: 1100 }} 1100w,{% endif %}
{% if article.image.width >= 1500 %}{{ article.image | image_url: width: 1500 }} 1500w,{% endif %}
{% if article.image.width >= 2200 %}{{ article.image | image_url: width: 2200 }} 2200w,{% endif %}
{% if article.image.width >= 3000 %}{{ article.image | image_url: width: 3000 }} 3000w,{% endif %}
{{ article.image | image_url }} {{ article.image.width }}w"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
src="{{ article.image | image_url: width: 1100 }}"
loading="lazy"
width="{{ article.image.width }}"
height="{{ article.image.height }}"
alt="{{ article.image.alt | escape }}">
</div>
</div>
{%- endif -%}
スニペット
スニペットはセクションをさらに細かいパーツで作られたものです。
ブログや商品とかで使われるページネーションやアイコンなんかがコーディングされています。
設定
問い合わせフォームとかカスタマイズとかの内部のところ
怖くて弄ってません。
つよつよコーダーはここもいじってしまうんでしょうね。
アセット
CSSやJavascriptを置いてあるとこ。
テーマのCSSを弄ってカスタマイズしてもいいですけど、基本は新規でCSSを作った方が管理しやすいです。
その場合メインのCSSが上にきて新たにつくったCSSが聞かない場合があります。
適宜調整してください。
めんどくさい場合は以下のように記述すれば上書きされます。
p{color: #ddd!important}
ロケール
なんかシステム全体を翻訳してくれてるヤツっぽい。
いかがでしたか？
全体的にふわっとした説明で分かりましたでしょうか？（笑）
もっと詳しく教えてくれという方はググってください(笑)
Shopifyを深く知れるサイト
基本的にコーディングをする場合はバックアップをとった方がいいですよ！
以前とらずに間違ってファイルを消してしまって粉塵爆発をするところでした。
バックアップまじ大事！
ぶっちゃけShopifyを導入した人にこの内容のブログは必要あんのか？
とも思うのですがたまに自分が構造がどうなっているのか頻繁にぐぐったりしますので
備忘録を兼ねて書き記すのもだいじでごわすね。
