ブロック概要
利用可能なすべてのテーマブロックとそのカスタマイズオプションの完全ガイド。
利用可能なブロック
このアプリは、Shopifyテーマ用に3つのアプリブロックと1つのアプリ埋め込みを提供します。アプリ埋め込みは一度だけ使用することを推奨し、その後、表示したいテンプレートにブロックを追加してください。
Breadcrumbs block (App block) — コレクションおよび商品ページ用のパンくずリストナビゲーション
Subcategories block (Text below) (App block) — 画像の下にタイトルがあるサブコレクションのグリッド/カルーセル
Subcategories block (Text overlay) (App block) — 画像上にオーバーレイタイトルがあるサブコレクションのグリッド/カルーセル
Breadcrumbs & Categories (App embed) — グローバルスタイル/スクリプトを読み込みます(推奨)
Breadcrumbs block
product および/または collection テンプレートにこのブロックを追加して、クリック可能なパンくずリストを表示します。レスポンシブ表示と複数の区切りスタイルに対応しています。
レイアウトとタイポグラフィ
Block max width (
page_width) — 最大コンテナ幅(px単位)Font size (
font_size) — パンくずリストのテキストサイズSeparated icon size (
separated_icon_size) — 区切りアイコンのサイズSeparator spacing (
separated_size) — 区切りの周囲の間隔Text alignment (
text_align) — 左/中央/右
パディング
Top and bottom (
padding_block) — 垂直方向のパディングLeft and right (
padding_inline) — 水平方向のパディング
表示オプション
Bold the current item (
bold_current_item_on_breadcrumb) — 最後のパンくずリスト項目を強調表示Hover effect (
hover_effect) — なし / 下線 / 拡大 / 輝き / バウンス / スイングEnable horizontal scroll on mobile (
scroll_on_mobile) — 小さい画面で折り返しではなくスクロールを有効にするHide product name in breadcrumbs (
hidden_product_name_on_breadcrumb) — 商品ページで商品名を非表示にする
カラー
Background (
background_color) — ブロックの背景色Text (
text_color) — テキストの色
高度なカスタマイズ
Breadcrumb divider symbol (
trail_divider_style) — 区切り記号を選択:Chevron Right、Double Arrow、Forward Slash、Pipe、Bullet Point、Angle Bracket、Dash
項目ラベル
パンくずリストに表示されるラベルを設定します(ストアフロントの言語を使用してください)。
Home display type (
home_display_type) — テキスト / Home Icon (Classic) / Home Icon (Outline)Home page (
label_home) — ホーム項目のラベルList collection page (
label_list_collections) — コレクション一覧ページのラベルCatalog page (
label_catalog) — カタログ項目のラベル(非表示にするには---を使用;設定の注意を参照)Custom Catalog link (
custom_catalog_link) — 任意のカスタムURL(デフォルトは/collections/all)
Subcategories block (Text below)
サブコレクションをグリッドまたはカルーセルとして表示します。このレイアウトでは、画像の下にコレクションタイトル(およびオプションで商品数)を表示します。
一般
Block max width (
page_width) — 最大コンテナ幅(px単位)Enable carousel on desktop (
enable_desktop_slider) — デスクトップでスライダー動作を有効にするAutoplay (
autoplay_mode) — 自動スクロール/自動スライドモード(以下参照)Enable the navigation (
slider_enable_navigation) — ナビゲーションの矢印/ドットを表示Vertical spacing (
vertical_spacing) — 見出しとスライダー/グリッド間の間隔Heading (
title) — セクションの見出しテキストImage ratio (
image_ratio) — 画像に合わせる / 正方形 / 縦長 / 横長 / 円形Image fit type (
image_fit_type) — カバー / コンテインImage border radius (
image_border_radius) — 画像比率が円形の場合は適用されませんNumber of columns on desktop (
columns_desktop)Card spacing (
card_spacing_desktop) — カテゴリーカード間のスペースContent layout (
content_layout) — 通常 / オーバーラップ / テキスト下 / テキスト下ボーダーText alignment (
text_alignment) — 左/中央/右Show the product count (
show_product_count)Enable uppercase text (
enable_uppercase_text)Truncate long titles (
truncate_title) — タイトルを5語に制限Reverse layout (Text on top, Image below) (
reverse_image_position)
自動再生(自動スクロール/自動スライド)
Enable carousel on desktop が有効な場合のみ適用されます。
Off (
none)Slow – 50px/s (
slow_scroll_50) — 連続自動スクロールFast – 100px/s (
slow_scroll_100) — 連続自動スクロールEvery 3 seconds (1 item) (
slide_3s) — 1アイテムずつスライドEvery 3 seconds (All visible items) (
slide_3s_page) — 1ページずつスライド
カラー
テキスト (
colors_text)背景 (
colors_background) — コンテンツレイアウトがオーバーラップの場合のみ使用されます
モバイルレイアウト
タブレットの列数 (
columns_tablet) — 2/3/4モバイルの列数 (
columns_mobile) — 1/2タブレットとモバイルでスワイプを有効にする (
swipe_on_mobile)
コレクションタイトルのフォントサイズ
商品数のフォントサイズは、コレクションタイトルのフォントサイズに基づいて自動的に調整されます。
デスクトップ (
font_size_desktop)タブレット (
font_size_tablet)モバイル (
font_size_mobile)
サブカテゴリーブロック(テキストオーバーレイ)
サブコレクションをグリッドまたはカルーセルとして表示し、タイトル(およびオプションで商品数)を画像の上に表示します。
一般
ブロック最大幅 (
page_width) — px単位の最大コンテナ幅デスクトップでカルーセルを有効にする (
enable_desktop_slider) — デスクトップでスライダー動作を有効にします自動再生 (
autoplay_mode) — 自動スクロール/自動スライドモード(下記参照)ナビゲーションを有効にする (
slider_enable_navigation) — ナビゲーション矢印/ドットを表示垂直間隔 (
vertical_spacing) — 見出しとスライダー/グリッド間の間隔見出し (
title) — セクションの見出しテキスト画像比率 (
image_ratio) — 画像に合わせる / 正方形 / 縦長 / 横長 / 円形画像のフィットタイプ (
image_fit_type) — カバー / コンテイン画像の角丸 (
image_border_radius) — 画像比率が円形の場合は適用されませんデスクトップの列数 (
columns_desktop)コンテンツの位置 (
content_position) — 上 / 中央 / 下テキストの配置 (
text_alignment) — 左 / 中央 / 右商品数を表示する (
show_product_count)大文字テキストを有効にする (
enable_uppercase_text)コンテンツレイアウトの方向 (
content_layout_direction) — 一行(横並び) / 積み重ね(縦並び)
自動再生(自動スクロール/自動スライド)
デスクトップでカルーセルを有効にするが有効な場合にのみ適用されます。
オフ (
none)遅い – 50px/s (
slow_scroll_50) — 連続自動スクロール速い – 100px/s (
slow_scroll_100) — 連続自動スクロール3秒ごと(1アイテム) (
slide_3s) — 1アイテムずつスライド3秒ごと(全アイテム) (
slide_3s_page) — 1ページずつスライド
モバイルレイアウト
タブレットの列数 (
columns_tablet) — 2/3/4モバイルの列数 (
columns_mobile) — 1/2タブレットとモバイルでスワイプを有効にする (
swipe_on_mobile)
コレクションタイトルのフォントサイズ
商品数のフォントサイズは、コレクションタイトルのフォントサイズに基づいて自動的に調整されます。
デスクトップ (
font_size_desktop)タブレット (
font_size_tablet)モバイル (
font_size_mobile)
ヘッダーテキストの色
テキストの色 (
colors_text)オーバーレイテキストの色 (
colors_overlay) — 読みやすさのためのオーバーレイ色
アプリ埋め込み
アプリ埋め込みは、ブロックで使用されるグローバルCSS/JS(例:サブカテゴリの自動再生スクリプト、オプションのi18nヘルパー、アプリで設定されたカスタムCSS)を読み込むため推奨されます。
テーマエディタ → アプリ埋め込みで有効にしてください
すべてのブロックが正しく動作するように有効のままにしてください
テーマへのブロック追加
Shopify管理画面にアクセスします
オンラインストア › テーマ に移動します
公開中のテーマで「カスタマイズ」をクリックします
アプリブロックを表示したい場所に追加します
設定をカスタマイズして保存します
ブロック設定
上記のすべての設定は、ブロックを選択したときにShopify Theme editorで構成されます。ほとんどの設定はレスポンシブ対応(デスクトップ/タブレット/モバイル)です。
ベストプラクティス
商品およびコレクションテンプレートにBreadcrumbsを追加する
コレクションページでサブカテゴリーブロックを使用する
ブロックのスタイリングをテーマに合わせる
モバイルデバイスでテストする
公開前にプレビューする