Website Homepage Banner / Carousel / Website Header

While the website carousel can be used in Bigcommerce there are often formatting issues. Instead an image can be used which is then uploaded to the website template.

In templates go to default.html

https://store-4dsnxp.mybigcommerce.com/admin/designmode.php?ToDo=editFile&File=default.html

https://store-4dsnxp.mybigcommerce.com/admin/designmode.php?ToDo=editFile&File=page.html

Images can be saved in Templates > Images using Cyber Duck

Save image 1200 wide & put through TinyPNG.

Go to  

<!--banner start-->           

<div class="featured">

     <div class="main">

    <div class="inner"> 

    <a href="%%GLOBAL_ShopPath%%/beer-gifts/gabs-hottest-100-mixed-packs/">

  <img src="%%GLOBAL_IMG_PATH%%/GABS2019.png" alt="GABS Hottest 100 Mixed Pack"></a>

</div>

    </div> 

    </div>

<!--banner end-->

Quarantinnies

<!--banner start-->           

<div class="featured">

     <div class="main">

    <div class="inner"> 

    <a href="%%GLOBAL_ShopPath%%/beer/country/australia/">

  <img src="https://cdn10.bigcommerce.com/s-4dsnxp/templates/__custom/images/Local.png" alt="Shop Australian Craft Beer"></a> 

     <a href="%%GLOBAL_ShopPath%%/quarantinnies-isolation-beer-pack/">

  <img src="%%GLOBAL_IMG_PATH%%/Self Isolation 1.png" alt="Quarantinnies Isolation Pack"></a>

</div>

    </div> 

    </div>

<!--banner end-->  

Isolation Advent Calendar

<!--banner start-->           

<div class="featured">

     <div class="main">

    <div class="inner"> 

    <a href="%%GLOBAL_ShopPath%%/beer/country/australia/">

  <img src="https://cdn10.bigcommerce.com/s-4dsnxp/templates/__custom/images/Local.png" alt="Shop Australian Craft Beer"></a> 

     <a href="%%GLOBAL_ShopPath%%/isolation-beer-advent-calendar/">

  <img src="%%GLOBAL_IMG_PATH%%/Isolation Advent Calendar.png" alt="Isolation Advent Calendar"></a>

</div>

    </div> 

    </div>

<!--banner end-->

Valentines Dozen

<!--Valentines Dozen banner start-->           

<div class="featured">

     <div class="main">

    <div class="inner"> 

    <a href="%%GLOBAL_ShopPath%%/valentines-dozen-brews/">

  <img src="https://cdn10.bigcommerce.com/s-4dsnxp/templates/__custom/images/Valentines%20Dozen%20Brews.png" alt="Valentine's Dozen Brews"></a>

</div>

    </div> 

    </div>

<!--Valentines Dozen banner end--> 

<!--Valentines Gifts banner start-->           

<div class="featured">

     <div class="main">

    <div class="inner"> 

    <a href="%%GLOBAL_ShopPath%%/search.php?Search=&tag=valentine-s-day-shipping">

  <img src="https://www.beercartel.com.au/product_images/header_images/Valentines%20Gifts.png" alt="Valentine's Day Gifts"></a>

</div>

    </div> 

    </div>

<!--Valentines Gifts banner end--> 

Tinnie Pack

<!--banner start-->           

<div class="featured">

     <div class="main">

    <div class="inner"> 

    <a href="%%GLOBAL_ShopPath%%/beer-cartel-limited-edition-tinnie-pack-18/">

  <img src="%%GLOBAL_IMG_PATH%%/Limited_Edition_Tinnie_Pack_18.png" alt="Limited Edition Tinnie Pack"></a>

</div>

    </div> 

    </div>

<!--banner end-->

Beer Club

<!--banner start-->           

<div class="featured">

     <div class="main">

    <div class="inner"> 

    <a href="https://beerclub.beercartel.com.au">

  <img src="https://cdn10.bigcommerce.com/s-4dsnxp/templates/__custom/images/Beer%20Club%20Hompage.png" alt="Craft Beer Subscription"></a>

</div>

    </div> 

    </div>

<!--banner end-->   

Advent Calendar

<!--banner start-->           

<div class="featured">

     <div class="main">

    <div class="inner"> 

    <a href="%%GLOBAL_ShopPath%%/beer-advent-calendar">

  <img src="https://cdn10.bigcommerce.com/s-4dsnxp/templates/__custom/images/Beer%20Advent%20Pre%20Order%20Banner.png" alt="Beer Advent Calendar"></a>

</div>

    </div> 

    </div>

<!--banner end-->    

Christmas Gifts

<!--banner start-->           

<div class="featured">

     <div class="main">

    <div class="inner"> 

    <a href="%%GLOBAL_ShopPath%%/christmas-gifts/">

  <img src="https://cdn10.bigcommerce.com/s-4dsnxp/templates/__custom/images/Christmas%20Gifts%202019.png" alt="Christmas Gifts"></a>

</div>

    </div> 

    </div>

<!--banner end--> 

Last Minute Christmas Gifts

<!--banner start-->           

<div class="featured">

     <div class="main">

    <div class="inner"> 

    <a href="%%GLOBAL_ShopPath%%/last-minute-christmas-gifts/">

  <img src="https://cdn10.bigcommerce.com/s-4dsnxp/templates/__custom/images/Last%20Minute%20Christmas%20Gifts.png" alt="Last Minute Christmas Gifts"></a>

</div>

    </div> 

    </div>

<!--banner end--> 

Most Popular Gifts - Normal

<!--most-popular-gift start-->

  <div class="most-popular-gift">

    <div class="main">

      <div class="inner">

<p></p>       

 <h1><img src="%%GLOBAL_IMG_PATH%%/gifts.png" alt="Most Popular Beer Gifts"/> Most Popular Beer Gifts</h1>

        <p>Buying a gift for someone who loves craft beer? <br>

          Here's some inspiration.</p>

        <div class="grid">

          <div class="grid__item one-third"><a href="%%GLOBAL_ShopPath%%/the-hottest-100-aussie-craft-beers-of-2018-mixed-12-pack/"><img src="https://cdn10.bigcommerce.com/s-4dsnxp/products/3678/images/7652/GABS_Hottest_100_Australian_Craft_Beer_12_Pack__00505.1573196933.500.440.png" alt="Hottest 100 Aussie Craft Beers"/></a>

            <h3><a href="%%GLOBAL_ShopPath%%/the-hottest-100-aussie-craft-beers-of-2018-mixed-12-pack/">Hottest 100 <br>

              Aussie Craft Beers</a></h3>

            <a href="%%GLOBAL_ShopPath%%/the-hottest-100-aussie-craft-beers-of-2018-mixed-12-pack/" class="btn">SHOP NOW</a></div>

          <div class="grid__item one-third"><a href="https://beerclub.beercartel.com.au/"><img src="%%GLOBAL_IMG_PATH%%/beer-club-subscription.png" alt="Beer Club Subscription"/></a>

            <h3><a href="https://beerclub.beercartel.com.au/">Beer Club<br>

              Subscription</a></h3>

            <a href="https://beerclub.beercartel.com.au/" class="btn">SHOP NOW</a></div>

          <div class="grid__item one-third"><a href="%%GLOBAL_ShopPath%%/glassware/"><img src="%%GLOBAL_IMG_PATH%%/glassware.png" alt="Beer Glassware"/></a>

            <h3><a href="%%GLOBAL_ShopPath%%/glassware/">Glassware</a></h3>

            <a href="%%GLOBAL_ShopPath%%/glassware/" class="btn">BROWSE BEER GLASSWARE</a></div>

        </div>

        <p class="gift-voucher">Not sure what to buy? Try a Gift Voucher for Craft Beer!<a href="%%GLOBAL_ShopPath%%/giftcertificates.php">GIFT VOUCHERS</a></p>

      </div>

    </div>

  </div>

  <!--most-popular-gift end--> 

Preezie

<!--personal shopper-->           

<div class="prezzie">

     <div class="main">

    <div class="inner"> 

<center><h1>Try our Personal Shopper</h1>

<h4>Unsure of what to get? Put our Personal Shopping Assistant to the test. </h4>

    <script type="text/javascript" src="https://api.preezie.com/preguide.min.js"></script>

<div id="preezie-widget-div-id">&nbsp;</div>

<div>&nbsp;</div>

<p>

<script type="text/javascript">// <![CDATA[

PREEZIE_GUIDE.render([

                {

                    guideKey: 'PRE-cce5a532-a7ae-4d20-09ac-08d746ef2103',

                    version: '1.0.0',

                    renderTo: 'preezie-widget-div-id'

                }

            ]);

// ]]></script></center>

</div>

    </div> 

    </div>

<!--personal shopper--> 

Most Popular Gifts - Christmas

<!--most-popular-gift start-->

<div class="most-popular-gift">

<div class="main">

<div class="inner">

<p></p>

<h1><img src="%%GLOBAL_IMG_PATH%%/gifts.png" alt="Most Popular Beer Gifts"/> Most Popular Beer Gifts</h1>

<p>Buying a gift for someone who loves craft beer? <br>

Here's some inspiration.</p>

<div class="grid">

<div class="grid__item one-third"><a href="%%GLOBAL_ShopPath%%/christmas-craft-beer-box/"><img src="https://cdn10.bigcommerce.com/s-4dsnxp/products/6413/images/7622/Christmas_Dozen_Brews_Beer_Gift_Box_Open_400px__26700.1572560852.1280.1280.png" alt="Christmas Craft Beer Box"/></a>

<h3><a href="%%GLOBAL_ShopPath%%/christmas-craft-beer-box/">Christmas Craft Beer Box <br>

</a></h3>

<a href="%%GLOBAL_ShopPath%%/christmas-craft-beer-box/" class="btn">SHOP NOW</a></div>

<div class="grid__item one-third"><a href="https://beerclub.beercartel.com.au/"><img src="%%GLOBAL_IMG_PATH%%/beer-club-subscription.png" alt="Beer Club Subscription"/></a>

<h3><a href="https://beerclub.beercartel.com.au/">Beer Club<br>

Subscription</a></h3>

<a href="https://beerclub.beercartel.com.au/" class="btn">SHOP NOW</a></div>

<div class="grid__item one-third"><a href="%%GLOBAL_ShopPath%%/glassware/"><img src="%%GLOBAL_IMG_PATH%%/glassware.png" alt="Beer Glassware"/></a>

<h3><a href="%%GLOBAL_ShopPath%%/glassware/">Glassware</a></h3>

<a href="%%GLOBAL_ShopPath%%/glassware/" class="btn">BROWSE BEER GLASSWARE</a></div>

</div>

<p class="gift-voucher">Not sure what to buy? Try a Gift Voucher for Craft Beer!<a href="%%GLOBAL_ShopPath%%/giftcertificates.php">GIFT VOUCHERS</a></p>

</div>

</div>

</div>

<!--most-popular-gift end-->

Open Cyber duck and add any related image into Template > Images 

Update web address (href), image source and alt text above.

-------------------------------------------------------

Steps for updating Homepage Banner / Carousel on Beer Cartel website.

• • Step 1 - In BigCommerce backend click Store Settings > Design > Carousel & Social Media

• Step 2 - Add up to 5 images for the carousal, recommended image size is 1440 X 630 Ensure that all images are the same size as otherwise this will look strange on a mobile device

  • Step 3 -

    • In the Heading text box, enter anything you want to show as heading

    • In the Text text box, enter content to display that in the body

    • In the Button Text box, enter the text you want to show on the button

    • In the Link box enter the URL of the page you want the redirect the user when clicked on the caraousel image

  • Step 4 - On the right hand side setting you can change the swap duration

  • Step 5 - You can click and drag to the images to new positions

Please do not change the text colour as it is automatically controlled by CSS.

Images for use can be found at Dropbox\Beer Cartel\Website\Big Commerce Website\Images\Homepage Banner\Banner Images

You can get images for use from any of the following:

http://www.freepik.com/

http://www.everystockphoto.com/

https://pixabay.com/

http://www.sitebuilderreport.com/stock-up

https://visualhunt.com/

Download the originals to Dropbox\Beer Cartel\Website\Big Commerce Website\Images\Homepage Banner\Originals

Once downloaded then use GIMP to edit.

Open image in Gimp

Use the Rectangle Select Tool - highlight an area and then choose size to 1440 x 630

Move the Rectangle to cover the area of the image you want to use

Once decide click Image > Fit Canvas to Selection

If you need to lighten/darken the image do this via the Colours tab

Export as a JPG - ensure the image size is less than 70kb

Save in Dropbox\Beer Cartel\Website\Big Commerce Website\Images\Homepage Banner\Banner Images

To update images/products in Navigation Bar dropdown (shown on desktop).

For Product information:

in BigCommerce go to Storefront > Themes > on the current theme Click Customize

In far left side bar select the pallete image (Theme Styles) and select MyIntegrator Mega Menu

Update product info. Image URL is the actual product URL - only put the part after beercarte.com.au e.g.  /beer-advent-calendar

For Image:

Need to use Cyberduck WebDav

In Cyberduck open product_images>uploaded_images

Images need to be 600 x 492 PNG.  For Beer dropdown nbeeds to be saved as beer.png for Gifts saved as gifts.png

Once ready to upload into file drag into folder and choose overwrite.