※2021年，。記事で解説されているセクションの基本的な仕組みは変わっておりませんが,最新情報は(中文)。
クライアントがストアのカスタマイズを望んでいるなら,そのためのクリエイティブな手段を提供することが大切です。Shopify。
ストアのお客さまは直感的な操作性を期待しているので,必要なセクション(またはブロック)がストアの適切な場所に配置してあることがコンバージョンに大きく影響します。
あなたがShopifyテーマをゼロから作成,またはクライアントのために調整をしているなら,状況に応じて異なるタイプのセクションが必要になるでしょう。。
今回の記事では,クライアントがストアをカスタマイズできるように,さまざまなタイプのテーマセクションを作成する方法を解説していきます。啊哈，2つの機能的なブロックの使用例を確認して,そのポテンシャルを活用する方法も見ていきます。
?
セクション。テーマのテンプレートに(ヘッダーやフッター同様に)静的★★★★★★テーマエディターによってテーマのホームページに動的★★★★★
Shopifyテーマに静的セクションを作成する
静的セクションは,その名のとおり固定されたコンポーネントで,テーマエディターによってカスタマイズが可能です。。! {% include 'my-snippet-file' %}★★★★{% section 'header' %}を使用することで,セクションは液体。
。配送情報などを追記できるので,配送期間がシーズンによって異なるマーチャントにとってこうした機能はとくに有用です。
，CSS、JavaScript。スキーマタグには,テーマエディターがコンテンツを読み取る方法を定義するJSON? ? ?CSSとJavaScriptはセクション固有のスタイリングやファンクションのために使用できますが,デフォルトではテーマのメインのスタイルシートからスタイルをセクションに引き継ぎます。
セクションにコンテンツを追加するには,超文本标记语言と液体。液体。スキーマ設定★★★★★★★★★★★★★開発者向けドキュメント★★★★★★★
【翻译】text.liquid。。超文本标记语言の液体。この例ではプレーンな文本ボックスとrichtext。ほかの有効な入力タイプには,image_picker、广播、video_url、字体………。
スキーマの設定において,id对，对液体【翻译】类型【中文翻译】标签【翻译】默认的。
，{%节“文本”%}をcart.liquid。。
テーマエディターに移動してカートページに行くと,このセクションがカートページのメインコンテンツの下,フッターの上に表示されているのが確認できます。整整齐齐，整整齐齐。
★★★★★★★★★★★★★★クライアントのストアに最適なものを選ぶために,さまざまなスタイルとセクションのタイプを試行してみることをお勧めします。
英文:中文:中文:カスタムランディングページのテンプレートを作成するために液体这是我的梦想
哇!哇!哇
。このドラッグ&ドロップ機能により,動的セクションを作成すればストアをパーソナライズする多様なオプションが手に入ります。動画,商品,画像ギャラリーなどのために移動可能なセクションを作成できるわけです。
。プリセットは,テーマエディター【中文翻译】名字と类别? ? ? ? ?
。テーマエディターの「セクションを追加」をクリックしても、プリセットはベースファイルに含まれていませんが、マニュアルで追加するのは簡単です。
行动号召(Call To Action)。液体タグで名字()，url、文本。
★★★★★模式。中文:Shopify。。
。
動的セクションは出力タイプに応じてインデックスページ内を移動でき,これでクライアントはホームページの見た目を自由にコントロールできるようになりました。
?
。。ブロックがセクションと異なるのは,要素がセクション内を移動できる点です。
ブロックにはさまざまなタイプがあり,これらはセクションに追加することが可能で,ブロックの位置は移動できます。。ブロックになり得るのは,画的像,動画,カスタムテキスト,または以下に示す入力設定タイプオプションなどです。
これでクライアントは,特定のレイアウトに縛られることなく要素をセクションで動かすことができます。。。
ブロックは動的セクションでも静的セクションでも使用でき,特定の領域でもっとも効果的なブロックタイプは何かを考慮することが重要になります。。。
ブロックは反復利用が可能なため,ユーザーインターフェイスの落とし穴を避けるために適切な条件下で制限を設けることが大切になります。。たくさんの動画ブロックを追加できるセクションはたしかに魅力的ですが,サイト読み込みの時間に影響をもたらすうえ,ページが雑然とします。★★★★★★★★1。。
動的セクションにブロックを追加する
★★★★CTA。【翻译】ポッドキャスト? ?电子书。
以下のサンプルでは,出力したい要素である”セクション全体の見出し”と,ブロックとなる”リンクとリンクテキストの変数”が確認できます。
セクションで見たように,ブロック設定はテーマファイルに追加され,スキーマタグ内で定義されています。ブロックを使用する場合,この設定(または液体【中文译文{{block.settings.id}}【中文】:ID。
。
さらに重要なのは,コンテナがfor循环★★★★★★★★★★★……section.blocks。中文:ブロックはテーマエディターで正確にレンダリングされることになります。
我的意思是，我的意思是模式エリアでは,個々の設定とブロックの値を定義するためにJSON。中文:。
。★★★★3.> > > > > > > > > > > > >出力のタイプに合わせてブロックの制限や上限の指定をおこない,ページが乱雑にならないようにしましょう。
这是我最喜欢的预设。预设。上の例では2つのCTAボタンが表示されることになりますが,上限を3.。> >， > >1。
。
静的セクションにブロックを追加する
ブロックにさまざまなオプションを追加すると,网络。。
こうした柔軟性の高いアプローチは,たとえばフッターなどの静的セクションをカスタマイズしたいときに,とくに役立ちます。あなたのクライアントは,動画,テキスト,画像などを同じセクションの中に追加でき,これらの要素の順番を変更できます。ブロックを使用しない場合,クライアントが同じような変更をしようと思うとコードをいじる必要がありました。。
コントロールフロータグの“案例/当”。たとえば,フッターにカスタムテキストやSNSアイコン,またはニュースレター登録フォームなどのオプションをもたせたい場合,こうしたブロックオプションのコードは次のようになります。
上記でわかるとおり,テーマエディターで正確にレンダリングされるようにするため,液体ロジックタグでブロックを再度ラップしていますが,同時にコンテンツをフッターファイルの外から取得しています。ニュースレター登録やSNS。。
コントロールフロータグを使ってレイアウトの条件を指定すると,ブロックが追加されたときの表示を正確に定義することも可能です。★★★★★★★6。
。クライアントがフッターに複数バージョンのSNSアイコンを追加してしまうと,ストアのお客さまにとっては混乱の原因となるので,この特定ブロックを1。マーチャントはSNSブロックをセクションのどこに置くか調整することができますが,1。我的意思是，我的意思是，我的意思是，我的意思是。
。
我的意思是theme.liquid。
クリエイティビティを解放する
。。プリセットを使用することで,固定されていたセクションを解放してページ内で動かすことが可能になり,マーチャントはあなたが示した方向性に従いながら,思い描くストアを自由に実現できます。
Shopify
マーケティング,カスタマイズ,またはWebデザインや開発など提供するサービスに関係なく,Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で,収益分配の機会が得られ,ビジネスを成長させる豊富なツールにアクセスできます。!
よくある質問
?
?
?
ブロックにはさまざまなタイプがあり,ブロックになり得るのは,画的像,動画,カスタムテキストなどです。クライアントは,特定のレイアウトに縛られることなく要素をセクションで動かすことができます。
