Overview

You can create a carousel or a slideshow using Bootstrap. These can be done by adding classes in addition to the current class you already have. 


Make sure you have ecommerce enabled on your back office and if you did not get this module please contact our team at 320-230-2282


Here is an example: 


Procedure

Here are the steps on how to make a carousel

  1. Log in to your back office

  2. Click on Admin -> Alter Layout
  3. Scroll down to the Advanced Category and we are going to alter the Catalog Top Html textbox.

  4. Most text box will have a code like this:


    <div class="full-page-header">
  <div class="full-page-header-content">
    <div class="header1">Sample</div>
    <div class="header2"> Buy 6 Bottles of WINE 750ml or 1.5L Mix and Match Save 10% Except Wines already on Sale </div>
  </div>
</div>

  5. Now lets add <div id="eshop-control" class="slideshow carousel slide" data-ride="carousel"> before the <div class="full-page-header"> and add </div> to the end of the last </div>.
    This will tell the eshop that inside of this <div> we are creating a slideshow. 


  6. In the  <div class="full-page-header"> add "carousel-inner" class in without the quotes.

    <div class="full-page-header carousel-inner">

  7. Let us add the "carousel-item" in the <div class="full-page-header-content"> to indicate that this <div> is one of the slide that you want to show up in the slideshow. Since this is the first slide show let us add "active" to indicate this is the first slide that will show up initially the page loads.


    <div class="full-page-header-content carousel-item active">

  8. You can now copy the "full-page-header-content" and the codes within it to create more slides. 
    Here is an example code that you can use to create a slideshow with 4 slides in it. 
    Note that there is no "active in the other <div class="full-page-header-content carousel-item"> cause there is only 1 active slide at the same time. 

    <div id="eshop-control" class="slideshow carousel slide" data-ride="carousel">
  <div class="full-page-header carousel-inner">
    <div class="full-page-header-content carousel-item active">
      <div class="header1">Sample</div>
      <div class="header2">Buy 6 Bottles of WINE 750ml or 1.5L Mix and Match Save 10% Except Wines already on Sale</div>
    </div>
    <div class="full-page-header-content carousel-item">
      <div class="header1">Sample 2</div>
      <div class="header2">We Demo the Best Liquor</div>
    </div>
    <div class="full-page-header-content carousel-item">
      <div class="header1">Sample 3</div>
      <div class="header2">We Demo the Best Liquor</div>
    </div>
    <div class="full-page-header-content carousel-item">
      <div class="header1">Sample 4</div>
      <div class="header2">We Demo the Best Liquor</div>
    </div>
  </div>
</div>


  9. You can also add controls in the carousel and you can follow the bootstrap documentation on how to do that. 
    https://getbootstrap.com/docs/4.0/components/carousel/

References