お気に入り一覧ページのLiquidによるカスタマイズ方法と、カスタマイズ例3選

StoreCRMの「上級者モード（Liquid）」では、お気に入り一覧ページの構造、商品・バリエーションの表示内容、見た目を編集できます。

このページでは、3つの入力欄の役割、StoreCRMから渡される値、20件を超えるお気に入りの表示方法、コピーして使えるカスタマイズ例を説明します。

App Embedが必要な機能を確認する

商品ページに配置するお気に入り・メール再入荷・LINE再入荷の各アプリブロックは、ブロック自身が共通JavaScriptを読み込むため、App Embedがオフでも動作します。

App Embed［StoreCRMの共通機能］は、お気に入り一覧、商品ブロックがないページ、従来のお客様アカウント、全ページ共通ウィジェットなどで必要です。StoreCRMの設定画面で公開テーマの状態を確認し、必要な場合だけ［テーマで有効にする］からオンにして保存し、［再確認］を選びます。

シンプルモードを使う場合

このページの中心は上級者モード（Liquid）ですが、コードを編集せずに一覧を調整したい場合は［一覧画面］タブのシンプルモードを利用します。［標準表示：絞り込み・並び替えを表示する］をオンにすると、商品単位・バリエーション単位のどちらでも並び順の操作を表示できます。

設定画面の右側にはストア上の表示を想定したプレビューが表示されます。表示位置と文言を確認して保存してください。LiquidやCSSを編集する場合は、この後の上級者モードへ進みます。

お気に入り一覧のLiquidを設定して保存する

3つの入力欄の役割

画面には「ページのliquidファイル」「アイテムテンプレート」「カスタムCSS」の3つの入力欄が表示されます。

入力欄	役割	主に編集する内容
ページのliquidファイル	お気に入り一覧ページ全体の枠です。	見出し、商品がないときの案内、アイテムの差し込み位置、「もっと見る」ボタンを編集します。
アイテムテンプレート	一覧内の1件ずつの表示を組み立てる枠です。	商品画像、商品名、在庫表示、カート追加ボタン、お気に入り解除ボタンを編集します。
カスタムCSS	ページとアイテムの見た目を整える枠です。	色、余白、文字サイズ、列数、スマートフォン表示を編集します。

「アイテムテンプレート」は、商品単位用とバリエーション単位用の2種類が保存されています。

画面には、現在選択している「お気に入りの単位」に対応するテンプレートだけが表示されます。

たとえば、お気に入りの単位が「商品」のときは商品単位用、「バリエーション」のときはバリエーション単位用のテンプレートを編集します。

ページのliquidファイル

ページ全体を囲むテンプレートです。

次の3つはStoreCRMが表示処理に使用するため、削除しないでください。

• {{ custom_css }}：カスタムCSSを差し込む位置
• {{ favorite_items }}：アイテムテンプレートの表示結果を差し込む位置
• data-storecrm-items：StoreCRMがアイテムの表示領域を識別するための属性

{{ favorite_items }}を置いた要素に、data-storecrm-itemsも付けます。

アイテムテンプレート

StoreCRMから渡される配列を、同じindexで参照して1件ずつ表示します。

アイテムテンプレートは自動では繰り返されないため、テンプレート内に次のループが必要です。

{% if storecrm_item_count and storecrm_item_count > 0 %}
  {% for index in (0..storecrm_item_last_index) %}
    {% assign item_handle = storecrm_item_handles[index] %}
    {% assign product = all_products[item_handle] %}
    {% if product == blank or product == nil %}{% continue %}{% endif %}
    {{ product.title | escape }}
  {% endfor %}
{% endif %}

カスタムCSS

ページのliquidファイルとアイテムテンプレートに付けたクラス名を指定し、見た目を調整します。

<style>タグは付けず、CSSだけを入力します。

StoreCRMからLiquidへ渡される値

上級者モードでは、StoreCRMから受け取る商品ハンドル・バリエーションIDを使ってShopifyの商品・バリエーションを参照します。表示情報はShopify Liquidオブジェクトを優先します。

商品情報の参照元

参照値	内容
product.title / product.url	商品名と商品URLです。商品単位の表示に使います。
product.featured_image	商品画像です。画像がない場合は表示用の代替画像を指定できます。
product.available	商品単位の購入可否です。true / false の真偽値として判定します。
variant.title / variant.url / variant.available	対象バリエーションをIDで特定した場合の名称・URL・購入可否です。
storecrm_item_handles[index] / storecrm_item_variant_ids[index]	Shopifyオブジェクトの参照に使う商品ハンドル・対象バリエーションIDです。

商品名・URL・画像・購入可否・価格は、参照できたShopifyの商品または対象バリエーションから取得します。商品が見つからない行や、バリエーション単位で対象IDが見つからない行は表示しません。

同じindexを使うことで、同じアイテムの値を正しく組み合わせられます。

{% assign item_handle = storecrm_item_handles[index] %}
{% assign product = all_products[item_handle] %}
{% if product != blank and product != nil %}
  {% assign item_title = product.title %}
  {% assign item_url = product.url %}
  {% assign item_thumbnail = product.featured_image %}
  {% assign item_available = product.available %}
{% endif %}

Shopifyの商品オブジェクト product は、all_products[item_handle] で取得します。バリエーション単位では、指定IDと一致するバリエーションを商品内から特定します。

storecrm_item_titlesなどの同期値配列は互換用に残っていますが、Shopifyオブジェクトを取得できない商品の表示補完には使用しないでください。

対象バリエーションが見つからない場合は、別のバリエーションへ置き換えて表示・カート追加しないでください。

一覧の制御と操作に使う値

変数	内容	主な用途
storecrm_favorite_total_count	お気に入りの総数	お気に入りが1件もない状態を判定します。
storecrm_item_count	今回読み込まれたアイテム数	今回のページにアイテムがあるかを判定します。
storecrm_item_handles[index]	商品ハンドル	カート追加処理に商品を渡します。
storecrm_item_variant_ids[index]	バリエーションID	カート追加と、バリエーション単位のお気に入り解除に使います。
storecrm_item_last_index	今回読み込まれた配列の最後の番号	0からこの値までループします。
storecrm_has_next_page	次のページがあるか	「もっと見る」ボタンの有無を決めます。
storecrm_next_cursor	次のページを取得するためのカーソル	「もっと見る」ボタンに設定します。値を加工せず、そのまま使用します。
mode	お気に入りの単位	productまたはvariantを判定します。

20件を超えるお気に入りを表示する

上級者モードでは、Shopifyの商品情報を使いながら20件を超えるお気に入りを追加表示できます。

データは1回につき最大20件ずつ取得され、StoreCRMが同じ一覧へ追加します。

初回は1ページだけ読み込みます。「もっと見る」を1回クリックすると、次の1ページを追加します。プレビューで使えるデータは最大100件ですが、最初から100件を自動的に読み込むわけではありません。取得に失敗した場合も表示済みの商品は残り、同じボタンから再試行できます。

{% if storecrm_has_next_page and storecrm_next_cursor != blank %}
  <button
    type="button"
    class="manual-favorites__more storecrm_customlist_load_more"
    data-storecrm-next-cursor="{{ storecrm_next_cursor }}"
    style="display:none;"
  >
    もっと見る
  </button>
{% endif %}

storecrm_next_cursorは次のデータを特定するための値なので、分割や変換は行わないでください。

以前から使用している旧形式の単一テンプレートには、20件までの制限があります。

旧形式を使っている場合は、現在の「ページのliquidファイル」「アイテムテンプレート」「カスタムCSS」に分かれた形式へ移行してください。

デフォルトコードを変更するときの考え方

上級者モードのデフォルトコードは、そのまま保存してもお気に入り一覧として動作します。

すべてのコードを理解してから編集する必要はありません。変更したい内容に合わせて、次の入力欄を編集します。

• 文字だけを変える場合：「ページのliquidファイル」または「アイテムテンプレート」に書かれている見出しやボタン名を変更します。
• 色、余白、列数を変える場合：「カスタムCSS」を変更します。
• 商品画像や商品名の位置を変える場合：「アイテムテンプレート」のHTMLを変更します。

ページのliquidファイルで残す部分

次の3つは、StoreCRMがお気に入りを表示するために使用します。

• {{ custom_css }}：「カスタムCSS」に入力した内容を読み込みます。
• {{ favorite_items }}：お気に入りの商品を表示します。
• data-storecrm-items：商品を表示する場所をStoreCRMへ伝えます。

{{ favorite_items }}は、data-storecrm-itemsを付けた要素の中に置きます。この2つを別々の場所へ移動しないでください。

「もっと見る」の部分は、21件目以降のお気に入りを読み込むためのコードです。20件を超えて表示する場合は、そのまま残します。

アイテムテンプレートで残す部分

デフォルトコードは、StoreCRMから受け取ったハンドル・IDでShopify商品を参照し、対象商品の情報を表示します。商品画像や商品名を囲むHTMLは、並べ替えたりクラス名を追加したりできます。

カート追加ボタンのdata-cart-から始まる属性と、お気に入り解除ボタンのdata-product-id、data-variant-idは残します。これらを削除すると、ボタンを押しても対象の商品を判別できません。

商品単位用とバリエーション単位用のテンプレートは別々に保存されます。両方の単位を利用する場合は、それぞれのテンプレートを確認してください。

カスタムCSSで変更できる部分

カスタムCSSでは、商品の列数、画像の大きさ、文字色、余白、スマートフォンでの並び方を変更できます。商品情報やボタンの動作を変えない場合は、カスタムCSSだけを編集します。

お気に入り一覧画面のテンプレート例3選

以下の3例では、最初に共通の「ページのliquidファイル」と「アイテムテンプレート」を設定し、例ごとに「カスタムCSS」を切り替えます。

以下の例は、商品名・URL・画像・購入可否・価格・商品種別をShopifyオブジェクトから参照します。対象が見つからない行は、同期値で置き換えずに省略します。

各画像の上部にあるストア名、メニュー、通貨、検索などはShopifyテーマ側の表示であり、以下のコードには含まれません。

3例で共通するページのliquidファイル

次のコードを「ページのliquidファイル」へ貼り付けます。

{% assign locale_code = request.locale.iso_code | default: locale | default: 'ja' %}
{% if locale_code == 'ja' %}
  {% assign list_title = 'お気に入り' %}
  {% assign list_title_suffix = '一覧' %}
  {% assign item_unit_text = 'アイテム' %}
  {% assign item_count_text = '件' %}
  {% assign empty_text = '現在お気に入り中の商品はありません' %}
  {% assign more_text = 'もっと見る' %}
{% else %}
  {% assign list_title = 'Favorites' %}
  {% assign list_title_suffix = '' %}
  {% assign item_unit_text = 'items' %}
  {% assign item_count_text = 'items' %}
  {% assign empty_text = 'There are currently no favorite items.' %}
  {% assign more_text = 'Load more' %}
{% endif %}

{{ custom_css }}

<section class="manual-favorites storecrm_favoritelist storecrm_customlist" data-storecrm-render-mode="advanced">
  <header class="manual-favorites__header">
    <h1 class="manual-favorites__title">
      {{ list_title }}<span class="manual-favorites__title-suffix">{{ list_title_suffix }}</span>
    </h1>
    <p class="manual-favorites__count">
      <span>{{ storecrm_favorite_total_count }}</span>
      <span class="manual-favorites__unit manual-favorites__unit--items">{{ item_unit_text }}</span>
      <span class="manual-favorites__unit manual-favorites__unit--count">{{ item_count_text }}</span>
    </p>
  </header>

  <nav class="manual-favorites__breadcrumb" aria-label="パンくずリスト">
    <a href="/">Home</a>
    <span aria-hidden="true">/</span>
    <span>{{ list_title }}</span>
  </nav>

  {% if storecrm_favorite_total_count == 0 %}
    <p class="manual-favorites__empty">{{ empty_text }}</p>
  {% endif %}

  <div class="manual-favorites__items" data-storecrm-items>
    {{ favorite_items }}
  </div>

  {% if storecrm_has_next_page and storecrm_next_cursor != blank %}
    <button
      type="button"
      class="manual-favorites__more storecrm_customlist_load_more"
      data-storecrm-next-cursor="{{ storecrm_next_cursor }}"
      style="display:none;"
    >
      {{ more_text }}
    </button>
  {% endif %}
</section>

3例で共通するアイテムテンプレート

次に、以下のコードを「アイテムテンプレート」へ貼り付けます。

このコードはmodeでお気に入りの単位を判定するため、商品単位用とバリエーション単位用のどちらにも使用できます。

{% if storecrm_item_count and storecrm_item_count > 0 %}
  {% for index in (0..storecrm_item_last_index) %}
    {% assign item_handle = storecrm_item_handles[index] %}
    {% assign product = all_products[item_handle] %}
    {% if product == blank or product == nil %}{% continue %}{% endif %}
    {% assign product_id = product.id %}
    {% assign variant_id = storecrm_item_variant_ids[index] | append: '' %}
    {% assign display_variant = product.selected_or_first_available_variant | default: product.variants.first %}
    {% if mode == 'variant' %}
      {% assign display_variant = nil %}
      {% for variant in product.variants %}
        {% assign candidate_id = variant.id | append: '' %}
        {% if candidate_id == variant_id %}
          {% assign display_variant = variant %}
          {% break %}
        {% endif %}
      {% endfor %}
      {% if display_variant == blank or display_variant == nil %}{% continue %}{% endif %}
    {% endif %}
    {% assign item_title = product.title %}
    {% assign item_url = product.url %}
    {% assign item_available = product.available %}
    {% assign item_image = product.featured_image %}
    {% if mode == 'variant' %}
      {% assign item_title = product.title | append: ' / ' | append: display_variant.title %}
      {% assign item_url = display_variant.url %}
      {% assign item_available = display_variant.available %}
      {% assign item_image = display_variant.featured_image | default: product.featured_image %}
    {% endif %}
    {% assign item_thumbnail = '' %}
    {% if item_image %}{% assign item_thumbnail = item_image | img_url: '400x400' %}{% endif %}
    {% assign item_category = product.type | default: product.vendor %}
    {% assign cart_variant_id = display_variant.id %}
    {% assign row_id = product_id %}
    {% if mode == 'variant' and variant_id != blank %}
      {% assign row_id = variant_id %}
    {% endif %}

    <article class="manual-favorite-item storecrm_customlist_id-{{ row_id }}">
      <a class="manual-favorite-item__image" href="{{ item_url | escape }}">
        {% if item_thumbnail != blank %}
          <img src="{{ item_thumbnail }}" alt="{{ item_title | escape }}" loading="lazy" decoding="async">
        {% endif %}
      </a>

      <div class="manual-favorite-item__body">
        {% if item_category != blank %}
          <p class="manual-favorite-item__category">{{ item_category | escape }}</p>
        {% endif %}

        <h2 class="manual-favorite-item__name">
          <a href="{{ item_url | escape }}">{{ item_title | escape }}</a>
        </h2>

        {% if item_available %}
          <p class="manual-favorite-item__status is-available">在庫あり</p>
        {% else %}
          <p class="manual-favorite-item__status is-unavailable">在庫なし</p>
        {% endif %}

        {% if display_variant != blank and display_variant != nil %}
          <p class="manual-favorite-item__price">
            <span class="manual-favorite-item__price-current">{{ display_variant.price | money }}</span>
            <span class="manual-favorite-item__price-tax">税込</span>
            {% if display_variant.compare_at_price and display_variant.compare_at_price > display_variant.price %}
              <span class="manual-favorite-item__price-before">{{ display_variant.compare_at_price | money }}</span>
            {% endif %}
          </p>
        {% endif %}

        <div class="manual-favorite-item__actions">
          {% if item_available and cart_variant_id != blank %}
            <a
              class="manual-favorite-item__cart"
              href="{{ item_url | escape }}"
              data-cart-variant-id="{{ cart_variant_id }}"
              data-cart-product-id="{{ product_id }}"
              data-cart-product-handle="{{ item_handle }}"
            >
              カートに入れる
            </a>
          {% endif %}

          <a class="manual-favorite-item__view" href="{{ item_url | escape }}">商品ページへ</a>

          <a
            class="manual-favorite-item__remove"
            href="{{ item_url | escape }}"
            data-product-id="{{ product_id }}"
            {% if mode == 'variant' and variant_id != blank %}
              data-variant-id="{{ variant_id }}"
            {% endif %}
          >
            <span class="manual-favorite-item__heart" aria-hidden="true">♥</span>
            <span class="manual-favorite-item__remove-label">お気に入り解除</span>
          </a>
        </div>
      </div>
    </article>
  {% endfor %}
{% endif %}

シンプルなブロック型のデザイン

商品を3列のカードとして並べ、商品画像、商品名、価格、在庫状態、カートボタンを表示します。

次のコードを「カスタムCSS」へ貼り付けます。

.manual-favorites {
  max-width: 1200px;
  margin: 32px auto 80px;
  padding: 0 20px;
  color: #222;
}
.manual-favorites__header {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
}
.manual-favorites__title {
  margin: 0;
  font-size: 32px;
}
.manual-favorites__title-suffix {
  display: none;
}
.manual-favorites__count {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 700;
}
.manual-favorites__unit--count {
  display: none;
}
.manual-favorites__breadcrumb {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  color: #777;
  font-size: 13px;
}
.manual-favorites__breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.manual-favorites__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 20px;
}
.manual-favorite-item {
  position: relative;
  border: 1px solid #ececec;
  background: #fff;
}
.manual-favorite-item__image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f6f6f6;
}
.manual-favorite-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.manual-favorite-item__body {
  padding: 14px;
}
.manual-favorite-item__category {
  display: none;
}
.manual-favorite-item__name {
  margin: 0 0 12px;
  font-size: 16px;
}
.manual-favorite-item__name a {
  color: inherit;
  text-decoration: none;
}
.manual-favorite-item__status {
  display: inline-flex;
  margin: 0 0 12px;
  padding: 5px 8px;
  border: 1px solid #ddd;
  font-size: 12px;
}
.manual-favorite-item__status.is-unavailable {
  border-color: #e9b4b4;
  color: #b00020;
  background: #fff7f7;
}
.manual-favorite-item__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 14px;
}
.manual-favorite-item__price-current {
  font-size: 16px;
  font-weight: 700;
}
.manual-favorite-item__price-tax,
.manual-favorite-item__price-before {
  color: #777;
  font-size: 11px;
}
.manual-favorite-item__price-before {
  text-decoration: line-through;
}
.manual-favorite-item__actions {
  display: grid;
  gap: 10px;
}
.manual-favorite-item__cart {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #111;
  color: #fff;
  background: #111;
  text-decoration: none;
}
.manual-favorite-item__view {
  display: none;
}
.manual-favorite-item__remove {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #dc2f3b;
  text-decoration: none;
}
.manual-favorite-item__heart {
  font-size: 24px;
  line-height: 1;
}
.manual-favorite-item__remove-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.manual-favorites__more {
  display: flex;
  justify-content: center;
  min-width: 180px;
  margin: 32px auto 0;
  padding: 12px 20px;
}
@media (max-width: 749px) {
  .manual-favorites__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
  }
  .manual-favorite-item__body {
    padding: 10px;
  }
}

シンプルなリスト型のデザイン

商品画像を小さくし、商品名と価格、操作ボタンを横一列に配置します。

次のコードを「カスタムCSS」へ貼り付けます。

.manual-favorites {
  max-width: 900px;
  margin: 32px auto 80px;
  padding: 0 20px;
  color: #222;
}
.manual-favorites__header {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
}
.manual-favorites__title {
  margin: 0;
  font-size: 32px;
}
.manual-favorites__title-suffix {
  display: none;
}
.manual-favorites__count {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 700;
}
.manual-favorites__unit--count {
  display: none;
}
.manual-favorites__breadcrumb {
  display: flex;
  gap: 12px;
  margin-bottom: 26px;
  color: #777;
  font-size: 13px;
}
.manual-favorites__breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.manual-favorites__items {
  border-top: 1px solid #ddd;
}
.manual-favorite-item {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 24px;
  min-height: 165px;
  padding: 14px 0;
  border-bottom: 1px solid #ddd;
}
.manual-favorite-item__image {
  display: block;
  align-self: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f5;
}
.manual-favorite-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.manual-favorite-item__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  grid-template-rows: 1fr auto;
  column-gap: 24px;
}
.manual-favorite-item__category,
.manual-favorite-item__status {
  display: none;
}
.manual-favorite-item__name {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 8px;
  font-size: 15px;
}
.manual-favorite-item__name a {
  color: inherit;
  text-decoration: none;
}
.manual-favorite-item__price {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.manual-favorite-item__price-current {
  font-size: 15px;
  font-weight: 700;
}
.manual-favorite-item__price-tax,
.manual-favorite-item__price-before {
  color: #777;
  font-size: 11px;
}
.manual-favorite-item__price-before {
  text-decoration: line-through;
}
.manual-favorite-item__actions {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.manual-favorite-item__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #111;
  color: #fff;
  background: #111;
  text-decoration: none;
}
.manual-favorite-item__view {
  display: none;
}
.manual-favorite-item__remove {
  position: absolute;
  top: 14px;
  right: 8px;
  color: #dc2f3b;
  text-decoration: none;
}
.manual-favorite-item__heart {
  font-size: 24px;
  line-height: 1;
}
.manual-favorite-item__remove-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.manual-favorites__more {
  display: flex;
  justify-content: center;
  min-width: 180px;
  margin: 32px auto 0;
  padding: 12px 20px;
}
@media (max-width: 749px) {
  .manual-favorite-item {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
  }
  .manual-favorite-item__image {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .manual-favorite-item__body {
    display: contents;
  }
  .manual-favorite-item__name {
    grid-column: 2;
    grid-row: 1;
  }
  .manual-favorite-item__price {
    grid-column: 2;
    grid-row: 2;
  }
  .manual-favorite-item__actions {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: stretch;
    margin-top: 12px;
  }
  .manual-favorite-item__cart {
    width: 100%;
  }
}

日本のECサイトによくあるお気に入り一覧画面

商品情報を枠で囲み、在庫状態と価格、3つの操作ボタンをまとめて表示します。

画像内の「全て削除」は旧コードで表示していた項目です。

現在の上級者モードには一括解除の処理がないため、以下のコードには含めていません。

次のコードを「カスタムCSS」へ貼り付けます。

.manual-favorites {
  max-width: 920px;
  margin: 32px auto 80px;
  padding: 0 20px;
  color: #2f2f2f;
}
.manual-favorites__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ddd;
}
.manual-favorites__title {
  margin: 0;
  font-size: 24px;
}
.manual-favorites__count {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.manual-favorites__unit--items,
.manual-favorites__breadcrumb {
  display: none;
}
.manual-favorites__items {
  display: grid;
  gap: 12px;
}
.manual-favorite-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  border: 1px solid #ddd;
  background: #fff;
}
.manual-favorite-item__image {
  display: block;
  align-self: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f6f6f6;
}
.manual-favorite-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.manual-favorite-item__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  grid-template-rows: repeat(4, auto);
  column-gap: 16px;
  align-content: center;
}
.manual-favorite-item__category {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 6px;
  color: #777;
  font-size: 12px;
  text-transform: uppercase;
}
.manual-favorite-item__name {
  grid-column: 1;
  grid-row: 2;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.6;
}
.manual-favorite-item__name a {
  color: inherit;
  text-decoration: none;
}
.manual-favorite-item__status {
  grid-column: 1;
  grid-row: 3;
  align-self: flex-start;
  justify-self: start;
  margin: 0 0 8px;
  padding: 5px 9px;
  border: 1px solid #ddd;
  color: #555;
  font-size: 12px;
}
.manual-favorite-item__status.is-unavailable {
  border-color: #e9b4b4;
  color: #b00020;
  background: #fff7f7;
}
.manual-favorite-item__price {
  grid-column: 1;
  grid-row: 4;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.manual-favorite-item__price-current {
  font-size: 19px;
  font-weight: 800;
}
.manual-favorite-item__price-tax,
.manual-favorite-item__price-before {
  color: #777;
  font-size: 11px;
}
.manual-favorite-item__price-before {
  text-decoration: line-through;
}
.manual-favorite-item__actions {
  grid-column: 2;
  grid-row: 1 / 5;
  align-self: center;
  display: grid;
  gap: 8px;
}
.manual-favorite-item__cart,
.manual-favorite-item__view,
.manual-favorite-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  text-decoration: none;
}
.manual-favorite-item__cart {
  border: 1px solid #111;
  color: #fff;
  background: #111;
}
.manual-favorite-item__view {
  border: 1px solid #333;
  color: #222;
  background: #fff;
}
.manual-favorite-item__remove {
  border: 1px solid #ddd;
  color: #777;
  background: #fff;
}
.manual-favorite-item__heart {
  display: none;
}
.manual-favorites__more {
  display: flex;
  justify-content: center;
  min-width: 180px;
  margin: 32px auto 0;
  padding: 12px 20px;
  border: 1px solid #2f2f2f;
  color: #2f2f2f;
  background: #fff;
}
@media (max-width: 749px) {
  .manual-favorite-item {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }
  .manual-favorite-item__image {
    grid-column: 1;
    grid-row: 1 / 5;
  }
  .manual-favorite-item__body {
    display: contents;
  }
  .manual-favorite-item__category,
  .manual-favorite-item__name,
  .manual-favorite-item__status,
  .manual-favorite-item__price {
    grid-column: 2;
  }
  .manual-favorite-item__actions {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 10px;
  }
}

プレビュー、保存、デフォルトに戻す

プレビュー

「プレビュー」を押すと、入力中のLiquidとCSSを保存前に確認できます。

プレビューは保存操作ではないため、確認後に問題がなければ「保存」を押してください。

プレビューには最大100件の商品を使用できますが、公開ページでは0件、1件、21件以上の状態も確認することをおすすめします。

デフォルトに戻す

「デフォルトに戻す」を押すと、ページのliquidファイル、商品単位用のアイテムテンプレート、バリエーション単位用のアイテムテンプレート、カスタムCSSのすべてがデフォルトの内容に置き換わります。

画面に表示されていない単位のアイテムテンプレートも対象です。

ボタンを押しただけでは保存されないため、内容を確認してから「保存」を押します。

元のカスタマイズを残したい場合は、デフォルトに戻す前にページのLiquid、商品単位用とバリエーション単位用の各アイテムテンプレート、CSSをテキストファイルなどへコピーしてください。

使用できないコードと注意点

• スクリプトタグは使用できません。
• onclickなど、HTMLタグへ直接記述するイベントハンドラーは使用できません。
• スクリプトを実行する形式のURLは使用できません。
• {{ custom_css }}、{{ favorite_items }}、data-storecrm-itemsは削除しないでください。
• お気に入り解除やカート追加に使うdata-属性は、目的を確認せず削除しないでください。

LiquidやCSSを大きく変更するときは、変更前の内容を控えたうえで、プレビューと実際のストアの両方で表示と操作を確認してください。