🪐

BASE(ベイス)のHTML編集で商品ページ下部に関連商品を表示する方法

2023/09/22に公開

CSS

ECサイトにおいて商品ページの下に関連商品を表示することによりユーザーが他の商品もクリックし、サイト内に滞在してくれる時間が長くなります。

そんな売上UPにも貢献してくれる関連商品を表示する方法をご紹介します。

いきなりですがコードはこちら

html

{block:HasRelatedItems}
  <div class="relation-item">
    <div class="relation-item__title">関連商品</div>
    <div class="relation-item__items">
    {block:RelatedItems}
      <div class="relation-item__unit">
        <a href="{RelatedItemPageURL}"><img class="relation-item__img" src="{RelatedItemImageURL-640}"></a>
        <div>{RelatedItemTitle} / {RelatedItemPrice}</div>
      </div>
    {/block:RelatedItems}
    </div>
  </div>
{/block:HasRelatedItems}

CSS

.relation-item__title{
  font-size: 24px;
  text-align: center;
  margin-bottom: 24px;
}

.relation-item__items{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.relation-item__img{
  width: 100%;
}

BASE Developersの関連商品のページに表示例が載っていますが、使いやすい様に少しアレンジしました。

注意点はこちら

必ず配置したい関連商品ですが、2点注意点があります。

商品は3つ
3つの商品は選べない（ランダムであり、ユーザーが直近見たものとも限らない）

上記を把握した上で利用しましょう。

いきなりですがコードはこちら

注意点はこちら

Discussion