デザインテンプレート【Complete】では
かご落ち（購入までの離脱）の防止と、広いレイアウトで商品を大きく見せる観点から
商品詳細画面には左メニューを表示させないようにデザインされています。
左メニューを表示させる修正の手順の一例は以下ですが、変更点が多いため、無償サポートの対象外です。
修正が難しい場合は、有償の制作代行サービスのご利用をご検討ください。
＜テンプレートCompleteの商品詳細ページに左メニューを表示させる修正手順の一例＞
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
（１）「CSS」
CSS入力欄内に一度カーソルを置いた状態でキーボードのCtrlとFキーを同時に押し、表示される検索窓に
side
と入力（コピー＆ペースト）しキーボードのEnterキーを押して以下の記述を見つけてください。
.side {
display: none;
}と、
.side {
display: block;
}上記２か所をどちらも削除
（２）商品詳細 「HTML」で以下の記述を見つけてください。
<!--商品グループ・レビュー-->
この記述の前方の
</div>
を削除
（３）商品詳細 「HTML」で以下の記述を見つけてください。
<{$module.side}>この記述の前に
<div class="detail-wrap">
と追記し、 後方の
<{$module.footer}>の前に
</div><!-- .detail --> </div><!-- .detail-wrap -->
と追記
（４）商品詳細 「CSS」の先頭に
.detail-wrap {
display: flex;
}
.detail{
width:720px;
}と追記
（５）商品詳細 「HTML」で以下の記述を見つけてください。
<section class="group-review-section">
この記述のclassにclearfixを追加して回り込みを回避してください
追記後）
<section class="group-review-section clearfix">
（６）ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」
CSS入力欄内に一度カーソルを置いた状態でキーボードのCtrlとFキーを同時に押し、表示される検索窓に
.item-image
と入力（コピー＆ペースト）しキーボードのEnterキーを押して以下の記述を見つけてください。
.item-image {
width: 540px;
float: left;
}この記述と、後方にある以下の記述
.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;
}
（７）全ページ共通「CSS」で以下の記述を見つけてください。
.main-image {
float: left;
margin-bottom: 40px;
width: 540px;
}の width: 540px; を、.item-image と同じ幅に修正してください。
修正後例）
.main-image {
float: left;
margin-bottom: 40px;
width: 440px;
}
（８）全ページ共通「CSS」で以下の記述を見つけてください。
.group-review-section {
width: 540px;
display: inline-block;
}この幅を広くなるように変更してください。
変更例）
.group-review-section {
width: 100%;
}
（９）全ページ共通「CSS」で以下の記述を見つけてください。
.checked-contents {
padding-bottom: 60px;
display: inline-block;
}この記述から display: inline-block; を削除してください。
削除後）
.checked-contents {
padding-bottom: 60px;
}
（10）左メニューよりも右側のコンテナが下がるため全ページ共通「CSS」の以下の記述を検索し
.detail {
padding: 48px 0 60px;
}この記述を削除してください。
（11）「最近チェックした商品」の間隔などはCSSを調整してください。
例）
全ページ共通「CSS」
.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」のスマホ用のCSSの閉じかっこである
}
の前に以下を追記してください。
追記例）
.item-image {
width: 100%;
}