無料！カラーミーショップ｜組み合わせ購入パターンに見出しを付ける

組み合わせ購入パターン(商品レコメンド)を設置しても、ただ商品写真を並べるだけでは押しが足りません。リストの上に、商品名を自動で出力させた購買意欲を高める見出しを設置するカスタマイズをご紹介します。

無料で実装

このコンテンツでは、作業の流れをお教えします。ご自身で実装なさる分には無料で設置できます。

※ サイト制作の知識が無い方は自身の責任・判断で作業をして下さい。

組み合わせ購入パターンとは
完成イメージ
実装手順
有料作業のご案内

組み合わせ購入パターンとは

カラーミーショップの無見合わせ購入パターン機能をご存じですか？個々の商品に合わせてお客様に「一緒に買って欲しい」「オススメしたい」と思う品を最大3品を表示する事ができる便利な機能です。お店で分析したデータを基に、この商品を好まれるお客様の傾向を反映させ、ついでに買って頂き売り上げアップを狙います。

カラーミーショップ公式マニュアル「組み合わせパターン」

完成イメージ

ピーベリーという商品のページの組み合わせパターン用の見出しの例です。自動で出力されるため、何も入力する必要がありません。組み合わせパターンを1品も登録していない場合は表示されません。

テンプレートにより多少異なりますが元々は商品名は出力されません。

実装手順

管理画面 → デザイン → お使いのテンプレートの「テンプレートの編集」

「商品詳細」テンプレートを使用します。

HTMLの編集

編集する箇所の目安を探します。テンプレートによって書き方が異なりますので、共通の下記のコードを探して下さい。検索するのがオススメです

 <{section name=num loop=$together_product}>

その少し上に下記の様な見出し部分があるはずです。

<h3 class="p-product__ttl">
RECOMMENDED ITEM
</h3>

下記の様に書き換えて保存して下さい。

    <h3 class="fukidashi">
      「<{$product_name}>」をご覧のお客様におすすめ
    </h3>

CSSの編集

吹き出しのデザインにするには、CSSファイルに下記のコードを追記します。

/*吹き出しデザイン*/
h3.fukidashi {
  color:#432106;
  position: relative;
  padding: 0.6em;
  border: 2px solid #2c7258;
  font-size: 21px;
  font-weight: normal;
  letter-spacing: 0.2em;
  border-radius: 6px;
  display: inline-block;
}

h3.fukidashi:before,
h3.fukidashi:after {
  position: absolute;
  top: 100%;
  left: 30px;
  height: 0;
  width: 0;
  border: solid transparent;
  content: "";
}

h3.fukidashi:before {
  margin-left: -11px;
  border-color: transparent;
  border-top-color: #2c7258;
  border-width: 11px;
}

h3.fukidashi:after {
  margin-left: -9px;
  border-color: transparent;
  border-top-color: white;
  border-width: 9px;
}