Shopifyの構成ってどうなっているの?

Shopifyの構成ってどうなっているの?

今回は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を導入した人にこの内容のブログは必要あんのか?
とも思うのですがたまに自分が構造がどうなっているのか頻繁にぐぐったりしますので
備忘録を兼ねて書き記すのもだいじでごわすね。


ブログに戻る
  • 【Adobe】アクリルキーホルダーをつくってみた 

    【Adobe】アクリルキーホルダーをつくってみた 

    Adobe Illustrator Photoshop

    アクリルキーホルダーをつくってみた Adobeイラストレータとフォトショップを使った講座動画になっています。自前でアクリルキーホルダーのデータを作れる方にはおすすめの動画です。ぜひこの動画を見てオリジナルのアクリルキーホルダーを作ってみてください!

    【Adobe】アクリルキーホルダーをつくってみた 

    Adobe Illustrator Photoshop

    アクリルキーホルダーをつくってみた Adobeイラストレータとフォトショップを使った講座動画になっています。自前でアクリルキーホルダーのデータを作れる方にはおすすめの動画です。ぜひこの動画を見てオリジナルのアクリルキーホルダーを作ってみてください!

  • スマホで簡単!アクリルフィギュアの台座をデザイン!

    スマホで簡単!アクリルフィギュアの台座をデザイン!

    Photoshop WEBサービス

    台座のデザインをしてみたいけどアドビのイラストレーターやフォトショップを持っていない…それどころかパソコンさえ持っていない…そんなあなたにスマホで簡単にデザインができる方法をお教えします! Photoshop EXで簡単デザイン! スマホ専用アプリであるPhotoshop EXを使って台座のデザインをしていきます。無料で使えてとっても便利!台座のデザインだけではなく、バナー制作や動画のサムネイルのデザインもできます!まぁ出力できる形式はjpgかpng形式だけなんですけど。動画で分かりやすくしてみました!※音が出るのでお気を付けください。 お使いのブラウザはこの動画に対応していません。

    スマホで簡単!アクリルフィギュアの台座をデザイン!

    Photoshop WEBサービス

    台座のデザインをしてみたいけどアドビのイラストレーターやフォトショップを持っていない…それどころかパソコンさえ持っていない…そんなあなたにスマホで簡単にデザインができる方法をお教えします! Photoshop EXで簡単デザイン! スマホ専用アプリであるPhotoshop EXを使って台座のデザインをしていきます。無料で使えてとっても便利!台座のデザインだけではなく、バナー制作や動画のサムネイルのデザインもできます!まぁ出力できる形式はjpgかpng形式だけなんですけど。動画で分かりやすくしてみました!※音が出るのでお気を付けください。 お使いのブラウザはこの動画に対応していません。

  • 【Shopify】DawnのVer.9.0.0対応!スライドショーの画像にリンクをつける!

    【Shopify】DawnのVer.9.0.0対応!スライドショーの画像にリンクをつける!

    Shopify コーディング

    ゴールデンウィーク真っ只中、皆さんはどこへ行かれていますか?このブログを期間中に見ているということは、あなた…ということで、今回はDawnがVer9.0.0の最新バージョンにアップグレードされて、大きく中身が変わりましたので、スライドショーの画像にリンクをつけなおそうと思います。無料のテンプレートをしっかりアップグレードしてくれるShopify流石でございます。一生ついていくから一株ゆずってくれぇ!以前にもブログで紹介しましたが、あのまま新しいテンプレートにコードをコピペするとレイアウトが崩れます。なぜなら、スライドショーが一新されておしゃれになったからです。しかし、相変わらず標準で画像自体にリンクをつけさせてくれません。なんで? スライドショーの画像にリンクをつける!  前回のようにセクションのslideshow.liquidを編集します。以下のコードをスキーマーのblocks内、type: urlの下に分かりやすく設置しましょう。     { "type": "url", "id": "image_link", "label": "Image Link" } そして次にhtmlをコーディングします。以下のコードをいれます。 {% if block.settings.image_link %} <a href="{{ block.settings.image_link }}" class="slideshow__slide grid__item"> {% endif %} {% if block.settings.image_link...

    【Shopify】DawnのVer.9.0.0対応!スライドショーの画像にリンクをつける!

    Shopify コーディング

    ゴールデンウィーク真っ只中、皆さんはどこへ行かれていますか?このブログを期間中に見ているということは、あなた…ということで、今回はDawnがVer9.0.0の最新バージョンにアップグレードされて、大きく中身が変わりましたので、スライドショーの画像にリンクをつけなおそうと思います。無料のテンプレートをしっかりアップグレードしてくれるShopify流石でございます。一生ついていくから一株ゆずってくれぇ!以前にもブログで紹介しましたが、あのまま新しいテンプレートにコードをコピペするとレイアウトが崩れます。なぜなら、スライドショーが一新されておしゃれになったからです。しかし、相変わらず標準で画像自体にリンクをつけさせてくれません。なんで? スライドショーの画像にリンクをつける!  前回のようにセクションのslideshow.liquidを編集します。以下のコードをスキーマーのblocks内、type: urlの下に分かりやすく設置しましょう。     { "type": "url", "id": "image_link", "label": "Image Link" } そして次にhtmlをコーディングします。以下のコードをいれます。 {% if block.settings.image_link %} <a href="{{ block.settings.image_link }}" class="slideshow__slide grid__item"> {% endif %} {% if block.settings.image_link...

  • 身バレ防止!匿名での商品の発送の仕方

    身バレ防止!匿名での商品の発送の仕方

    Vtuber WEBサービス お得情報

    Vtuberやイラストレーターさんは自分のグッズを買ってもらった後どうやって発送していますか?まさか自宅住所がわかるように発送していませんか?自宅がばれたくない!そんなあなたに私の叡智を授けましょう…   クロネコメンバーズで匿名発送! クロネコヤマトでクロネコメンバーズに登録すれば匿名で商品を発送することができます!オプション料として100円(税抜き)かかりますが、身を守るという面では安いくらいです。もうグッズの販売価格に入れ込んでしまっていいんじゃないですか?詳しくはクロネコメンバーズQ&Aへ 匿名発送で身を守ろう! 昨今からVtuberに対しての誹謗中傷や傷害事件、ストーカー被害など多くなってきました。ネットリテラシーが薄まる世の中、自分は大丈夫と思っていてもいきなり身に降りかかってくるかもしれません。自宅がばれて近所で張り込まれる可能性だってあります。あなたのファン層が全員善人とは限りません。防げることは多少お金がかかっても行うべきです!っても100円ですからね。しかもクロネコメンバーズ使い勝手いいしおすすめ。

    身バレ防止!匿名での商品の発送の仕方

    Vtuber WEBサービス お得情報

    Vtuberやイラストレーターさんは自分のグッズを買ってもらった後どうやって発送していますか?まさか自宅住所がわかるように発送していませんか?自宅がばれたくない!そんなあなたに私の叡智を授けましょう…   クロネコメンバーズで匿名発送! クロネコヤマトでクロネコメンバーズに登録すれば匿名で商品を発送することができます!オプション料として100円(税抜き)かかりますが、身を守るという面では安いくらいです。もうグッズの販売価格に入れ込んでしまっていいんじゃないですか?詳しくはクロネコメンバーズQ&Aへ 匿名発送で身を守ろう! 昨今からVtuberに対しての誹謗中傷や傷害事件、ストーカー被害など多くなってきました。ネットリテラシーが薄まる世の中、自分は大丈夫と思っていてもいきなり身に降りかかってくるかもしれません。自宅がばれて近所で張り込まれる可能性だってあります。あなたのファン層が全員善人とは限りません。防げることは多少お金がかかっても行うべきです!っても100円ですからね。しかもクロネコメンバーズ使い勝手いいしおすすめ。

  • 配信がもっとぐっと楽になる!スコラボ

    配信がもっとぐっと楽になる!スコラボ

    Vtuber Vtuber素材 WEBサービス お得情報

    配信のためにパソコンを買った!マイクも買った!ミキサーも奮発して買った!あとは配信用の素材を用意して華やかにしよう…ってうわーーーー!やることが多いーーー!と配信初心者は頭を抱えることが多いんじゃないでしょうか?配信者の方との交流があったので、そこの見えない努力ややらなければいけない作業を目の当たりにしいて、大変だなとしみじみ思っていました。今回はそんな時間を割かれる配信面での素材集めの部分を簡略化してくれる神のようなプラットフォームをご紹介します。 素材を選んで設置するだけで簡単スタート! スコラボでは素材を組み合わせて配信画面をデザインすることができます!どうしても自分で作ったり、フリー素材から用意したりとなるとデザインの偏りやクオリティーの担保が難しくなります。例えば、ポップでパリッとした映えるキャラデザのモデルなのに背景がなんか微妙だったり…そうなると全体のデザインがボヤっとなり引き締まらなくなり、世界観が損なわれる可能性が出ます。ですがこのスコラボ、素材のクオリティが高いのです!配信者を際立たせるデザインなので安心して使いたいデザインを選ぶことができます!一つ一つクリエイターがデザインしたものなのでめちゃくちゃおしゃれです!全部使ってみたくなる素材たちばかりです!   配信画面だけでなくサムネイル作成にも! 配信画面を作らないユーザーにも使えるようにサムネイル作成もスコラボで作れます!う~ん…最強だ…       使用可能な素材は4000種類以上! 何がすごいって利用できる素材の数に圧倒されます!4000種類以上の素材が利用できるので何を使おうが迷ってしまいます…ですがちゃんと行う配信目的に沿ってデザインをソートできるので、迷ってしまう時間が生まれません!選べる素材が多いと配信するのが楽しくなりそうですね!     OBSにリンクをして配信開始! OBS側にスコラボで作成されたリンクを「ブラウザ」ソースに紐づけすれば準備OK!誰でも簡単に配信画面を作成して配信できます。     どれだけ使っても使用料0円!? スコラボは無料です。これだけ使えるなら月額制にしたらいいのに…それぐらい使いやすい神webアプリです。   いかがでしたか?4000種類の素材が無料で使えるスコラボ。とにかく神様のようなこちらのサービス使わない手はないでしょう。Vtuberの人だけではなくYoutuberの人にも使えてとってもGood!僕もこれを機にストリーマーデビューしちゃおうかなって考えてみちゃったりなんかしちゃったりしてちなみにスコラボさんから依頼を受けてこのブログ書いているわけではありませんのでご安心ください!(?)とにかくめちゃくちゃ便利で楽しいサイト「スコラボ」さんのご紹介でした!   スコラボ公式サイト

    配信がもっとぐっと楽になる!スコラボ

    Vtuber Vtuber素材 WEBサービス お得情報

    配信のためにパソコンを買った!マイクも買った!ミキサーも奮発して買った!あとは配信用の素材を用意して華やかにしよう…ってうわーーーー!やることが多いーーー!と配信初心者は頭を抱えることが多いんじゃないでしょうか?配信者の方との交流があったので、そこの見えない努力ややらなければいけない作業を目の当たりにしいて、大変だなとしみじみ思っていました。今回はそんな時間を割かれる配信面での素材集めの部分を簡略化してくれる神のようなプラットフォームをご紹介します。 素材を選んで設置するだけで簡単スタート! スコラボでは素材を組み合わせて配信画面をデザインすることができます!どうしても自分で作ったり、フリー素材から用意したりとなるとデザインの偏りやクオリティーの担保が難しくなります。例えば、ポップでパリッとした映えるキャラデザのモデルなのに背景がなんか微妙だったり…そうなると全体のデザインがボヤっとなり引き締まらなくなり、世界観が損なわれる可能性が出ます。ですがこのスコラボ、素材のクオリティが高いのです!配信者を際立たせるデザインなので安心して使いたいデザインを選ぶことができます!一つ一つクリエイターがデザインしたものなのでめちゃくちゃおしゃれです!全部使ってみたくなる素材たちばかりです!   配信画面だけでなくサムネイル作成にも! 配信画面を作らないユーザーにも使えるようにサムネイル作成もスコラボで作れます!う~ん…最強だ…       使用可能な素材は4000種類以上! 何がすごいって利用できる素材の数に圧倒されます!4000種類以上の素材が利用できるので何を使おうが迷ってしまいます…ですがちゃんと行う配信目的に沿ってデザインをソートできるので、迷ってしまう時間が生まれません!選べる素材が多いと配信するのが楽しくなりそうですね!     OBSにリンクをして配信開始! OBS側にスコラボで作成されたリンクを「ブラウザ」ソースに紐づけすれば準備OK!誰でも簡単に配信画面を作成して配信できます。     どれだけ使っても使用料0円!? スコラボは無料です。これだけ使えるなら月額制にしたらいいのに…それぐらい使いやすい神webアプリです。   いかがでしたか?4000種類の素材が無料で使えるスコラボ。とにかく神様のようなこちらのサービス使わない手はないでしょう。Vtuberの人だけではなくYoutuberの人にも使えてとってもGood!僕もこれを機にストリーマーデビューしちゃおうかなって考えてみちゃったりなんかしちゃったりしてちなみにスコラボさんから依頼を受けてこのブログ書いているわけではありませんのでご安心ください!(?)とにかくめちゃくちゃ便利で楽しいサイト「スコラボ」さんのご紹介でした!   スコラボ公式サイト

  • 【Shopify】自動で新着商品に”NEW”のラベルを付ける!

    【Shopify】自動で新着商品に”NEW”のラベルを付ける!

    Shopify コーディング

    ホグワーツレガシーで15時間プレイしてやっと箒に乗るところまで来ました無能な働き者ルシウス・マルフォイです。ハードモードが思った以上にハードで禁じられた森のクモやカエルに一生ボコられていました(笑)   今回は自動で新規登録した商品や、期間限定の商品に対して”新着”や”SALE”などのラベルを付けたり外したりしてくれるコードを紹介します。       前回のおさらい 設定からカスタムデータでメタフィールドを作成するということをご紹介しました。そして、card-product.liquidの<div class="card__badge {{ settings.badge_position }}">のdiv内に以下のコードをコピペしたら商品情報で設定したラベルが表示されるというものでしたね。 {%- if card_product.metafields.newarrival_product.tag != blank -%} <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{card_product.metafields.newarrival_product.tag }} </span> {%- endif -%}...

    【Shopify】自動で新着商品に”NEW”のラベルを付ける!

    Shopify コーディング

    ホグワーツレガシーで15時間プレイしてやっと箒に乗るところまで来ました無能な働き者ルシウス・マルフォイです。ハードモードが思った以上にハードで禁じられた森のクモやカエルに一生ボコられていました(笑)   今回は自動で新規登録した商品や、期間限定の商品に対して”新着”や”SALE”などのラベルを付けたり外したりしてくれるコードを紹介します。       前回のおさらい 設定からカスタムデータでメタフィールドを作成するということをご紹介しました。そして、card-product.liquidの<div class="card__badge {{ settings.badge_position }}">のdiv内に以下のコードをコピペしたら商品情報で設定したラベルが表示されるというものでしたね。 {%- if card_product.metafields.newarrival_product.tag != blank -%} <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{card_product.metafields.newarrival_product.tag }} </span> {%- endif -%}...

1 6