【クリエイターモード】テンプレートCompleteで、トップページのスライドショーを画面の幅いっぱいに表示させることはできますか。

スライドショーのHTMLとCSSを変更することで、「画面の幅いっぱい」（＝画面に対して幅100％）に表示させることができます。

(1)ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ
「HTML」欄内にカーソルをあわせた状態でキーボードのCtrl＋Fキーを押し、 表示される検索欄に

$shop.mainvisual

を入力し、Enterキーを押すと以下のソースが見つかりますので、

    ★<div class="contents">
        <section class="main-visual">
            <{$shop.mainvisual}>
        </section>
	☆
        <{$module.banner}>

★の行を☆の位置に移動してください。

＜移動後＞

        <section class="main-visual">
            <{$shop.mainvisual}>
        </section>
	<div class="contents">
        <{$module.banner}>

(2)ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」内Ctrl＋Fキーを押し、 表示される検索欄に

main-visual

を入力し、Enterキーを押すと以下のCSSが見つかりますので、

.main-visual {
  max-width: 1000px;
  margin: 0 auto 60px;
}

この記述を以下のように変更し保存してください。

＜変更後＞

.main-visual {
  margin: 0 auto 30px;
  padding-top: 110px;
}

• 下の余白はお好きな数に変更してください。（60px→30pxなど）
• スマホ用のCSSは後方（2,000行目付近～）に記述されていますので、必要に応じて変更してください。

＜表示例＞

【応用編】さらにカスタマイズ

「幅いっぱい」に変更し、前後の画像も見せたい（左右に見せたい）場合は以下も対応してください。

■makeshopサポート
スライドショーで左右の画像をチラ見せしたいときの、カスタマイズ方法
https://www.support.makeshop.jp/design/?p=7835

ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ
「CSS」欄の末尾に下記を追記し保存してください。

@media screen and (min-width: 1000px) {
	.bx-wrapper{
		overflow: hidden;
	}
	.main-visual {
		max-width: 100%!important;
		margin:0 auto;
		padding-top: 115px;
	}
	.contents {
		padding: 0 30px 48px!important;
	}
	.bx-viewport{
		overflow: visible !important;
		width: 1000px !important; /* スライド画像の横幅 */
		margin: 0 auto;
	}
	#wrap .bx-prev{
		left: 50% !important;
		margin-left:-516px; /*（スライド画像の横幅÷2）+（矢印画像の横幅÷2）*/
	}
	#wrap .bx-next{
		right: 50% !important;
		margin-right:-516px; /*（スライド画像の横幅÷2）+（矢印画像の横幅÷2） */
	}
}

＜表示例＞