【クリエイターモード】テンプレートCompleteの商品詳細ページで、商品説明の位置を変更する方法を教えてください。 – makeshop よくある質問

商品説明の変数タグを記述する位置を変更してください。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「HTML」欄内で

商品説明1

<{$item.description}>

商品説明2

<{$item.description2}>

の位置を変更してください。

＜例＞

商品説明の位置を「下」に変更する場合は、以下の手順で対応してください。

（１）HTMLを編集

「HTML」のソース入力欄内にカーソルを一度置いた状態でキーボードの「Ctrl＋F」キーを押し、表示される検索窓に

<{$item.description}>

をコピー＆ペーストし、Enterキーを押して以下のソースを探してください。

<{if $item.description}>
	<dl class="item-description">
	    <dt>アイテム説明</dt>
	    <dd><{$item.description}></dd>
	</dl>
<{/if}>
<{if $item.description2}>
	<div class="item-description border-top">
	    <{$item.description2}>
	</div>
<{/if}>

このソースを切り取り、切り取ったソースを
後方の

<!--商品グループ・レビュー-->

の前（＝上）の位置に貼りつけて保存してください。

（２）CSSを追加

「CSS」欄に、CSSを追記し保存してください。

.item-description{
  width: 100%;
  clear: both;
}

CSSを追記する場所は管理しやすい場所か、特に決まらない場合は末尾（一番下）に追記してください。

（３）回り込みの回避（floatの解除）

商品説明文が、前方の画像と商品情報欄の間に回り込まないように調整してください。

「HTML」のソース入力欄内にカーソルを一度置いた状態でキーボードの「Ctrl＋F」キーを押し、表示される検索窓に

<div class="detail">

をコピー＆ペーストし、Enterキーを押すと

<div class="detail">

上記のソースが見つかりますので、このソースにclass名：clearfix　を追記し、保存してください。

＜追記後＞

<div class="detail clearfix">

（４）「最近チェックした商品」の位置の調整

「最近チェックした商品」の位置を左揃えにするには

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」欄内にカーソルを一度置いた状態でキーボードの「Ctrl＋F」キーを押し、表示される検索窓に

.checked-contents

をコピー＆ペーストし、Enterキーを押して以下のCSSを探してください。

.checked-contents {
  padding-bottom: 60px;
  display: inline-block;
}

このCSSから、

display: inline-block;

を削除し保存してください。

＜削除後＞

.checked-contents {
  padding-bottom: 60px;
}

関連記事