基本操作・設定

基本操作・設定

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

  • 更新日：

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

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

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

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

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

シンプルモードの絞り込み・並び替え設定とストア表示プレビュー

上級者モードを開く

StoreCRM管理画面の「設定」→「お気に入り設定」→「お気に入り一覧ページ」を開き、「上級者モード（Liquid）」を選択します。

上級者モードを編集できるのは、ストアのデフォルト言語を選択しているときです。

お気に入り一覧ページの上級者モードにあるページのLiquid、アイテムテンプレート、カスタムCSSの3つの入力欄

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_title = storecrm_item_titles[index] %}
    {{ item_title }}
  {% endfor %}
{% endif %}

カスタムCSS

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

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

StoreCRMからLiquidへ渡される値

上級者モードでは、StoreCRMが同期した表示用の値と、一覧の制御に使う値を利用できます。

表示に使う同期値

変数内容
storecrm_item_titles[index]商品名です。バリエーション単位では、バリエーション名を含む場合があります。
storecrm_item_urls[index]商品ページのURLです。バリエーション単位では、対象バリエーションを指定したURLになります。
storecrm_item_thumbnail_urls[index]商品画像のURLです。
storecrm_item_availables[index]購入可能な場合は'true'、購入できない場合は'false'です。
storecrm_item_product_ids[index]Shopifyの商品IDです。

商品名、URL、画像、在庫状態は、StoreCRM同期値を使う現在の実装を基本とします。

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

{% assign item_title = storecrm_item_titles[index] | default: product.title %}
{% assign item_url = storecrm_item_urls[index] | default: product.url %}
{% assign item_thumbnail = storecrm_item_thumbnail_urls[index] %}
{% assign item_available = storecrm_item_availables[index] %}

defaultの右側にあるproduct.titleやproduct.urlは、同期値が空だった場合の予備です。

通常はStoreCRM同期値が使われるため、この予備を省略しても構いません。

ただし、同期直後や一部のデータが空だった場合にも表示を保ちたいときは、予備を残しておくと安全です。

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

変数内容主な用途
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件を超えるお気に入りを表示する

現在の上級者モードでは、StoreCRM同期値を使ったまま20件を超えるお気に入りを表示できます。

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

初期表示とプレビューでは最大5ページ分、合計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から受け取った商品名、URL、画像、在庫状態を1件ずつ組み合わせて表示します。商品画像や商品名を囲むHTMLは、並べ替えたりクラス名を追加したりできます。

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

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

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

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

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

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

商品名、URL、画像、在庫状態にはStoreCRM同期値を使用し、画像と同じ価格や商品種別を表示するために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">
  <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] %}
    {% assign product_id = storecrm_item_product_ids[index] %}
    {% assign variant_id = storecrm_item_variant_ids[index] %}
    {% assign item_title = storecrm_item_titles[index] | default: product.title %}
    {% assign item_url = storecrm_item_urls[index] | default: product.url | default: '#' %}
    {% assign item_thumbnail = storecrm_item_thumbnail_urls[index] %}
    {% assign item_available = storecrm_item_availables[index] %}
    {% assign item_category = product.type | default: product.vendor %}
    {% assign display_variant = product.selected_or_first_available_variant | default: product.variants.first %}

    {% if mode == 'variant' and variant_id != blank and product != blank %}
      {% for variant in product.variants %}
        {% assign candidate_id = variant.id | append: '' %}
        {% if candidate_id == variant_id %}
          {% assign display_variant = variant %}
          {% break %}
        {% endif %}
      {% endfor %}
    {% endif %}

    {% assign cart_variant_id = variant_id | default: 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 }}">
        {% if item_thumbnail != blank %}
          <img src="{{ item_thumbnail }}" alt="{{ item_title | escape }}" loading="lazy">
        {% endif %}
      </a>

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

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

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

        {% if display_variant != blank %}
          <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 == 'true' and cart_variant_id != blank %}
            <a
              class="manual-favorite-item__cart"
              href="{{ item_url }}"
              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 }}">商品ページへ</a>

          <a
            class="manual-favorite-item__remove"
            href="{{ item_url }}"
            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列のカードとして並べ、商品画像、商品名、価格、在庫状態、カートボタンを表示します。

商品を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つの操作ボタンをまとめて表示します。

商品情報と操作ボタンを横一列にまとめた日本のECサイト向けお気に入り一覧

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

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

次のコードを「カスタム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を大きく変更するときは、変更前の内容を控えたうえで、プレビューと実際のストアの両方で表示と操作を確認してください。

アプリを利用するための基本設定

効果的に利用するための推奨設定

機能や目的別

検索

TOP
jaJapanese
en_USEnglish jaJapanese