The Element themes always display the carousel at the full width of the area provided. You can make a minor modification to the element theme carousel include file to limit the area that the carousel is in.
1. Go to Merchandising > Custom Templates > Includes > Copy ShopSite Template, and make a copy of the "Element-Carousel.sst" include file.
2. Re-copy your copy and name it the exact same name as the original. Now you can delete your first copy and you should have an include file you can edit called "Element-Carousel.sst".
3. Edit the include file. At the very beginning, before any code, add
<div class="container">. At the very end, after all the code, add
</div>. Then save changes and publish (Utilities > Publish > Regenerate....you can also preview your home page first as well under Pages > Preview if you want to check it before publishing).
The Element-Carousel.sst include file should look like this when you are done:
- Code: Select all
<div class="container">
[-- IF STORE.SlideHomePage EQ PAGE.RecordNumber --][-- VAR.SlideCount "0" --][-- FOR VAR.I 1 8 --][-- IF STORE.SlideDisabled[VAR.I] --][-- ELSE_IF STORE.SlideImage[VAR.I] --][-- VAR.SlideCount INC --][-- END_IF --][-- END_FOR --]
[-- IF VAR.SlideCount GE "1" --]<div id="carouselHome" class="carousel slide [-- STORE.SlidePager --]" data-ride="[-- IF VAR.SlideCount "1" --]false[-- ELSE_IF STORE.SlideAutoStart? "on" --]carousel[-- ELSE --]false[-- END_IF --]" data-interval="[-- STORE.SlideFrequency --]">
<div class="carousel-inner">
[-- VAR.ICount 0 --][-- FOR VAR.I 1 8 --][-- IF STORE.SlideDisabled[VAR.I] --][-- ELSE_IF STORE.SlideImage[VAR.I] --]
<div class="carousel-item[-- IF VAR.ICount 0 --] active[-- END_IF --][-- VAR.ICount INC --] slide[-- STORE.SlideTextAlignment[VAR.I] --]" style="color: #[-- Store.SlideDescColor[VAR.I] --]">
[-- IF STORE.SlideURL?[VAR.I] NE no_link --]<a href="[-- IF STORE.SlideURL?[VAR.I] store_page --][-- STORE.SlidePageURL[VAR.I] --][-- ELSE --][-- STORE.SlideURL[VAR.I] --][-- END_IF --]" title="[-- STORE.SlideTitleText[VAR.I] --]"><img src=[-- STORE.SlideImage[VAR.I] --]></a>[-- ELSE --]<span><img src=[-- STORE.SlideImage[VAR.I] --]></span>[-- END_IF --]
<div class="carousel-caption d-block">
[-- IF STORE.SlideTitleText[VAR.I] --][-- IF STORE.SlideURL?[VAR.I] NE no_link --]<a class="h3" href="[-- IF STORE.SlideURL?[VAR.I] store_page --][-- STORE.SlidePageURL[VAR.I] --][-- ELSE --][-- STORE.SlideURL[VAR.I] --][-- END_IF --]" title="[-- STORE.SlideTitleText[VAR.I] --]" style="color: #[-- Store.SlideTitleColor[VAR.I] --]">[-- STORE.SlideTitleText[VAR.I] --]</a>[-- ELSE --]<h3 style="color: #[-- Store.SlideTitleColor[VAR.I] --]">[-- STORE.SlideTitleText[VAR.I] --]</h3>[-- END_IF --][-- END_IF --]
[-- IF STORE.SlideDescText[VAR.I] --]<p class="d-none d-md-block" style="color: #[-- Store.SlideDescColor[VAR.I] --]">[-- STORE.SlideDescText[VAR.I] --]</p>[-- END_IF --]
[-- IF STORE.SlideButtonText[VAR.I] --]<div class="d-none d-md-block"><a href="[-- IF STORE.SlideURL?[VAR.I] store_page --][-- STORE.SlidePageURL[VAR.I] --][-- ELSE --][-- STORE.SlideURL[VAR.I] --][-- END_IF --]" title="[-- STORE.SlideButtonText[VAR.I] --]" class="btn btn-primary" style="background:#[-- STORE.SlideButtonBkgrdColor[VAR.I] --];border-color:#[-- STORE.SlideButtonBkgrdColor[VAR.I] --];color:#[-- STORE.SlideButtonColor[VAR.I] --]">[-- STORE.SlideButtonText[VAR.I] --]</a></div>[-- END_IF --]
</div>
</div>
[-- END_IF --][-- END_FOR --]
</div>
[-- IF VAR.SlideCount GT "1" --][-- IF STORE.SlidePager NE no-pager --] <ol class="carousel-indicators container[-- VAR.HeaderFluid --]">
[-- VAR.ICount 0 --][-- FOR VAR.I 1 8 --][-- IF STORE.SlideDisabled[VAR.I] --][-- ELSE_IF STORE.SlideImage[VAR.I] --]<li data-target="#carouselHome" data-slide-to="[-- VAR.ICount --]"[-- IF VAR.ICount 0 --] class="active"[-- END_IF --]>[-- VAR.ICount INC --][-- IF STORE.SlideLinkText[VAR.I] --][-- STORE.SlideLinkText[VAR.I] --][-- ELSE --][-- VAR.ICount --][-- END_IF --]</li>[-- END_IF --][-- END_FOR --]
</ol>[-- END_IF --][-- END_IF --]
[-- IF VAR.SlideCount GT "1" --] <a class="carousel-control-prev" href="#carouselHome" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselHome" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>[-- END_IF --]
</div>
[-- END_IF --][-- END_IF --]
[-- IF VAR.DisplayBannerGraphicNormal "yes" --][-- IF PAGE.Graphic --][-- IF PAGE.DisplayGraphic --]<div id="page-graphic" class="text-center mb-2 img-fluid-div">[-- PAGE.Graphic ONLY_ALT_TAG --]</div>[-- END_IF --][-- END_IF --][-- END_IF --]
</div>