【クリエイターモード】テンプレートCompleteで商品詳細画面にも左メニューを表示させることはできますか。 – makeshop よくある質問

デザインテンプレート【Complete】では
かご落ち（購入までの離脱）の防止と、広いレイアウトで商品を大きく見せる観点から
商品詳細画面には左メニューを表示させないようにデザインされています。

左メニューを表示させる修正の手順の一例は以下ですが、
変更点が多いため、無償サポートの対象外です。

修正が難しい場合は、有償の制作代行サービスのご利用をご検討ください。

◆商品詳細ページに左メニューを表示させた場合のデザインセットをダウンロードする
→　complete-detail-left.cdar

＜テンプレートCompleteの商品詳細ページに左メニューを表示させる修正手順の一例＞

※行番号はテンプレートの初期値です。

ショップデザイン / テンプレート選択・編集
　　　　【クリエイターモード】>【商品詳細】

(1)商品詳細「CSS」
1行目付近～の

.side {
    display: none;
}

と、末尾から数えて7行目付近～の

.side {
    display: block;
}

をどちらも削除

(2)商品詳細「HTML」
594行目付近～の

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

の前方、
592行目付近～の

</div>

を削除

(3)商品詳細「HTML」
初期値では40行目付近～の

<{$module.side}>

の前に

<div class="detail-wrap">

と追記し、後方、
605行目付近～の

<{$module.footer}>

の前に

</div><!-- .detail -->
</div><!-- .detail-wrap -->

と追記

(4)商品詳細「CSS」
の先頭に

.detail-wrap {
        display: flex;
}
.detail{
        width:720px;
}

と追記

(5)商品詳細「HTML」
595行目付近～

<section class="group-review-section">

のclassにclearfixを追加して回り込みを回避

追記後）

<section class="group-review-section clearfix">

(6)全ページ共通「CSS」

ショップデザイン / テンプレート選択・編集
　　　　【クリエイターモード】>【全ページ共通】

855行目付近～

.item-image {
        width: 540px;
        float: left;
}

と1117行目付近～の

.item-detail {
        width: 400px;
        padding-left: 40px;
        float: right;
}

の幅(paddingなどの余白を含む）の合計が720px以下になるように変更

変更後例）

.item-image {
        width: 440px;
        float: left;
}

.item-detail {
        width: 250px;
        padding-left: 30px;
        float: right;
}

(7)全ページ共通「CSS」863行目付近～の

.main-image {
        float: left;
        margin-bottom: 40px;
        width: 540px;
}

の　width: 540px; を、
.item-image と同じ幅に修正

修正後例）

.main-image {
        float: left;
        margin-bottom: 40px;
        width: 440px;
}

(8)全ページ共通「CSS」1093行目付近～の

.group-review-section {
        width: 540px;
        display: inline-block;
}

では幅が狭いので、変更

変更例）

.group-review-section {
        width: 100%;
}

(9)全ページ共通「CSS」
467行目付近～の

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

から　display: inline-block;　を削除

削除後）

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

(10)左メニューよりも右側のコンテナが下がるため
全ページ共通「CSS」
850行目付近～の

.detail {
        padding: 48px 0 60px;
}

を削除

(11)「最近チェックした商品」の間隔などはCSSを調整

例）
全ページ共通「CSS」
475行目付近～

.checked-item-list li {
        width: 140px;
        position: relative;
        margin-right: 32px;
        display: flex;
        flex-direction: column;
}

に　margin-bottom: 20px;　を追記

追記後）

.checked-item-list li {
	width: 140px;
	position: relative;
	margin-right: 32px;
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

(12)スマホ表示用のCSSとして
全ページ共通「CSS」
の末尾の

の前に以下を追記

追記例）

.item-image {
        width: 100%;
}

関連記事