Full Theme Features

Template Structure

All template files have fixed structure consisting of Header top, Navigation, Main Content and Footer structured as below:

Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.

<!doctype html>
<html class="no-js">

Page Head

Page head contains metadata, javascript and css files:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>[TITLE]</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    [META]

    <link rel="stylesheet" href="assets/templates/common-core/lib/bootstrap/css/bootstrap.css" type="text/css" />
    <link rel="StyleSheet" href="assets/templates/common-core/css/core.css" type="text/css" />
    <!--START: page_styles-->[page_styles]<!--END: page_styles-->
    <link rel="StyleSheet" href="assets/templates/[template]/css/[stylesheet]" type="text/css" />
</head>

Header top

Header top contains of logo and top menu bar and it used in all pages. HTML code of header container shown below:

<header>
   <!-- START: HEADER-PANEL-TOP-->
      <!-- TOP BAR CUSTOM PROMOTION-->
   <!-- END: HEADER-PANEL-TOP-->

   <!-- START: HEADER-BOTTOM-->
      <!-- MENU LINKS ITEMS-->
      <!-- SEARCH BOX -->
      <!-- LOGO -->
      <!-- SHOPPING CART -->
      <!-- WISH LIST LINK -->
   <!-- END: HEADER-BOTTOM-->
</header>

Main Navigation

   <nav id="top-categories-menu" class="hide-mobile">
       <a class="logo-fixed" href="/" title="[storename]">
           <img src="assets/images/logo-fixed.png" alt="[storename]" />
       </a>
       <div class="container">
           <ul>
               <!--START: CATEGORIES-->
               <li class="[dropdown_class]">
                   <!--START: CATEGORY_FORMAT-->
                   <a href="view_category.asp?cat=CATID" class="cat">CATEGORYCATEGORY</a></li>
                           <!--END: SUB_CATEGORY_FORMAT-->
                       </ul>
                   </div>
                   <!--END: SUB_CATEGORIEST-->
               </li>
               <!--END: CATEGORIES-->
           </ul>
       </div>
   </nav>

Main Content

Content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below: 

<div id="mainContainer">
   <!-- LEFT BAR -->
   <!-- MIDDLE CONTENT -->
   <!-- RIGHT BAR-->
</div>

Footer

<footer id="footer-wrapper">
   <section id="main-footer">
      <div class="container">
         <div class="row">
            <div class="col-1 wow fadeInUp" data-wow-delay="0.1s">
               <h3>Shop</h3>
               <!-- LINKS ITEMS -->
            </div>
            <div class="col-2 wow fadeInUp" data-wow-delay="0.2s">
               <h3>Information</h3>
               <!-- LINKS ITEMS -->
            </div>
            <div class="col-3 wow fadeInUp" data-wow-delay="0.3s">
               <h3>Customer Service</h3>
               <!-- LINKS ITEMS -->
            </div>
            <div class="col-4 wow fadeInUp" data-wow-delay="0.4s">
               <h3>Stay Connected</h3>
               <!-- SOCIAL ICONS -->
               <!-- FRAME_MAILLIST-->
            </div>
         </div>
      </div>
   </section>
   <section id="bottom-footer" class="wow fadeInUp" data-wow-delay="0.1s">
      <div class="container">
         <div class="copyright">[frame_copyright1]</div>
         <!-- PAYMENT ICONs -->
      </div>
   </section>
</footer>

End Of Page (Stylesheet)

<!--START: FRAME_RSSFEEDS -->
<link rel="alternate" type="application/rss+xml" title="Featured Items (RSS 2.0)" href="[store_url]/rss.asp?type=home" />
<link rel="alternate" type="application/rss+xml" title="Products On Sale (RSS 2.0)" href="[store_url]/rss.asp?type=onsale" />
<link rel="alternate" type="application/rss+xml" title="New Releases (RSS 2.0)" href="[store_url]/rss.asp?type=newreleases" />
<link rel="alternate" type="application/rss+xml" title="Best Sellers (RSS 2.0)" href="[store_url]/rss.asp?type=bestsellers" />
<link rel="alternate" type="application/rss+xml" title="Latest Blog Posts (RSS 2.0)" href="[store_url]/rss.asp?type=blog" />
<!--END: FRAME_RSSFEEDS -->

End Of Page (Javascripts)

<!--page_scripts-->
<script src="assets/templates/common-core/lib/jquery.min.js"></script>
<script src="assets/templates/common-core/lib/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/templates/[template]/js/classie.js"></script>
<script type="text/javascript" src="assets/templates/common-core/js/core.js"></script>
<script type="text/javascript" src="assets/templates/[template]/js/main.js"></script>
<script type="text/javascript" src="assets/templates/[template]/js/wow.min.js"></script>
<script type="text/javascript" src="assets/templates/[template]/js/HaloMegaMenu.js"></script>

Installation

Install Theme

To install BridoV2 Theme, from your Shift4Shop Online Store Manager:

Go to Settings -> Design -> Themes & Styles

You will see all of the various themes that are available for your store. To install a theme, simply click on the "Apply Theme" button.

Access theme files

You need connect to your Shift4Shop store via FTP.

To connect to your store via FTP, you need use WinSCP program or FileZilla program.

Here is WinSCP link: https://sourceforge.net/projects/winscp/files/latest/download?source=files

Here is FileZilla link: https://filezilla-project.org/download.php?show_all=1

How do I connect to my store using FTP?

After login to FTP, go to folders /web/assets/templates

You will see BridoV2-core installed there:

 

Upload Images demo (Not included product images)

At templates folder, back to /web/assets/images

Upload all files and folders in Image Demo folder you have unzipped to images folder on your Shift4Shop store. You can also upload you images to the images folder within the theme folder or any place you want but just make sure the images path is correct when you call them from the code.

 

Store Settings

Store tab

The Store Tab is the default tab that will be selected when first navigating to the page. It will contain the following settings:

Sticky header logo can be updated here
			  <a class="logo-fixed" href="/" title="[storename]">
				<img src="assets/images/logo-fixed.png" alt="[storename]" />
			</a>

Here is full guide of Shift4Shop for reference: https://support.3dcart.com/Knowledgebase/Article/View/205/11/what-can-i-find-in-the-store-settings-section#StoreTab

 

Product Display tab

Here are the default values for BridoV2 theme:

BridoV2 theme doesn't support Product Columns / Related Products option and Product Columns / Up-sell Products option. So you just need to set value for Number of Products

Here is full guide of Shift4Shop for reference: https://support.3dcart.com/Knowledgebase/Article/View/205/11/what-can-i-find-in-the-store-settings-section#ProductDisplayTab

 

Checkout tab

Here are the default values for BridoV2 theme:

Here is full guide of Shift4Shop for reference: https://support.3dcart.com/Knowledgebase/Article/View/205/11/what-can-i-find-in-the-store-settings-section#CheckoutTab

 

Customer tab

Here are the default values for BridoV2 theme:

BridoV2 theme doesn't support Product Columns / My Account option. So you just need to set value for Number of Products

Here is full guide of Shift4Shop for reference: https://support.3dcart.com/Knowledgebase/Article/View/205/11/what-can-i-find-in-the-store-settings-section#CustomerTab

 

General tab

Here are the default values for BridoV2 theme:

Here is full guide of Shift4Shop for reference: https://support.3dcart.com/Knowledgebase/Article/View/205/11/what-can-i-find-in-the-store-settings-section#GeneralTab

 

 

Setting Up Header Content

Most of the content for your web site must use HTML/CSS.

Instead of using the Themes & Style Editor available of Shift4Shop, we recommend using a software to connect to store via FTP as WinSCP or FileZilla and an HTML/CSS editing software as SublimeText or Notepad++ for easier to manage website content.

Therefore, Please make sure that you have installed the software above!

 

TopBar Promotion

Don't forget save your changes to finish!

 

Show The Look Book / Blog Link On The Main Menu

Input the link of the Look Book / Blog page at the Link input in the SEO Title and Meta Tags section

Don't forget click Save green button to save your changes

Setting Up Footer Content

Main Footer Links

Don't forget save your changes to finish!

 

Stay Connected (Social Icons)

Don't forget click Save green button to save your changes

 

Mailing List

How to Enable/Disable Newsletter SignUp Box?

 

Copyright and Payment Method icons

Copyright

 

Payment Method icons

Setting Up HomePage Content

Home Carousel Module

How do I use the Home Page Slider feature? of Shift4Shop: http://support.3dcart.com/knowledgebase/article/View/582/5/how-do-i-use-the-home-page-slider-feature

 

Home Top Banners

Don't forget save your changes to finish!

 

Here is full HTML code of Home Top Banners Content:

<div id="home-top-banners">
          <div class="container">
            <h3 class="module-heading wow fadeInUp" data-wow-delay="0.1s"><span>Collections</span></h3>
             <ul class="row">
                <li class="col-sm-4 col-xs-12 banner-item wow fadeInUp" data-wow-delay="0.1s">
                   <a class="img-wrap" href="#">
                      <img src="/assets/images/banners/home-top-banner-1.jpg" alt="Editor's Pick" />
                      <span>Prom</span>
                   </a>
                   <a class="img-text" href="#"><h4>Lorem De Dorus</h4>>/a>
                </li>
                <li class="col-sm-4 col-xs-12 banner-item wow fadeInUp" data-wow-delay="0.2s">
                   <a class="img-wrap" href="#">
                      <img src="/assets/images/banners/home-top-banner-2.jpg" alt="Shoes" />
                      <span>Bridesmaids</span>
                   </a>
                   <a class="img-text" href="#"><h4>Milancelos A Lanos</h4></a>
                </li>
                <li class="col-sm-4 col-xs-12 banner-item wow fadeInUp" data-wow-delay="0.3s">
                   <a class="img-wrap" href="#">
                      <img src="/assets/images/banners/home-top-banner-3.jpg" alt="Accessories" />
                      <span>Flower</span>>
                   </a>
                   <a class="img-text" href="#"><h4>Lynn Cosmopolis</h4></a>
                </li>
                <li class="col-sm-4 col-xs-12 banner-item wow fadeInUp" data-wow-delay="0.3s">
                   <a class="img-wrap" href="#">
                      <img src="/assets/images/banners/home-top-banner-4.jpg" alt="Accessories" />
                      <span>Accessories</span>
                   </a>
                   <a class="img-text" href="#"><h4>Accessorius</h4></a>
                </li>
                <li class="col-sm-4 col-xs-12 banner-item wow fadeInUp" data-wow-delay="0.3s">
                   <a class="img-wrap" href="#">
                      <img src="/assets/images/banners/home-top-banner-5.jpg" alt="Accessories" />
                      <span>Jewelry</span>
                   </a>
                   <<a class="img-text" href="#"><h4>Nor Loremirus</h4></a>
                </li>
                <li class="col-sm-4 col-xs-12 banner-item wow fadeInUp" data-wow-delay="0.3s">
                   <a class="img-wrap" href="#">
                      <img src="/assets/images/banners/home-top-banner-6.jpg" alt="Accessories" />
                      <span>Groom</span>
                   </a>
                   <a class="img-text" href="#"><h4>Comos De Milano</h4></a>
                </li>
             </div>
          </div>
        <!-- /#home-top-banners -->

 

Home Full-Width-Block

Don't forget save your changes to finish!

 

Here is full HTML code of Full-Width-Block Content:

<div id="fullWidthBlock">
          <img src="/assets/images/banners/fullWidthBlock-bg.jpg" alt="Shop The Collection" data-parallax="{"y": 150, "smoothness": 50}"/>
          <div class="container">
             <div class="custom-content">
                <span>LookBook</span>
                <h2>Cosmopolis</h2>
                <p class="custom-desc">Destibulum laoreet an risus porta quisque cosmoplis de loremous. <br>Vestibulum tortor massa dapibus iaculis scelerisque sit amet sagittis nec metus</p>
                <a href="#" class="btn">Brides</a><a href="#" class="btn">Bridesmaids</a>
             </div>
          </div>
       </div> <!-- /#fullWidthBlock -->

 

Home Featured Products

How to setting up Home Featured Products?

This is Home Specials Module

These values are the same values you have set up in the Store Settings for Home Specials product.

 

Instagram

Home Brands Carousel

Don't forget save your changes to finish!

 

Here is full HTML code of Home Brands Carousel Content:

<div id="homeBrands" class="wow fadeInUp" data-wow-delay="0.1s">
<!-- Start Home Brands Slider -->
      <div id="homeBrands" class="wow fadeInUp" data-wow-delay="0.1s">
        <div class="container">
          <h3 class="module-heading header-specials"><span>As Seen On</span></h3>
           <div class="owl-carousel">
              <div>
                 <a href="#" title="RBQ">><img src="/assets/images/brands/brand-1.jpg" alt="RBQ" /></a>
              </div>
              <div>
                 <a href="#" title="Black Cosmo"><img src="/assets/images/brands/brand-2.jpg" alt="Black Cosmo" /></a>
              </div>
              <div>
                 <a href="#" title="Klorse">><img src="/assets/images/brands/brand-3.jpg" alt="Klorse" /></a>
              </div>
              <div>
                 <a href="#" title="Fermends"><img src="/assets/images/brands/brand-4.jpg" alt="Fermends" /></a>
              </div>
              <div>
                 <a href="#" title="Medou Co"><img src="/assets/images/brands/brand-5.jpg" alt="Medou Co" /></a>
              </div>
              <div>
                 <a href="#" title="RBQ"><img src="/assets/images/brands/brand-1.jpg" alt="RBQ" /></a>
              </div>
              <div>
                 <a href="#" title="Black Cosmo"><img src="/assets/images/brands/brand-2.jpg" alt="Black Cosmo" /></a>
              </div>
              <div>
                 <a href="#" title="Klorse"><img src="/assets/images/brands/brand-3.jpg" alt="Klorse" /></a>
              </div>
              <div>
                 <a href="#" title="Fermends"><img src="/assets/images/brands/brand-4.jpg" alt="Fermends" /></a>
              </div>
              <div>
                 <a href="#" title="Medou Co"><img src="/assets/images/brands/brand-5.jpg" alt="Medou Co" /></a>
              </div>
           </div>
        </div>
      </div>        
      <!-- End Home Brands Slider -->

 

Setting Up Categories

Category Image and Description

  • From your Shift4Shop Online Store Manager:
  • Go to Products -> Categories
  • Create your Category and go to edit it
  • Insert your category image at Category Header area
  • Then insert your category description at Category Footer area

 

Setting Up Shop By Price

  • From your Shift4Shop Online Store Manager:
  • Go to Settings -> General -> Store Settings
  • Then go to Product Display tab -> click Edit Settings bellow Hide Browse by Price checkbox to go to edit Price Groups

  • At here, you can edit the Low Range and High Range of each range you would like to change.

 

How to edit Left Banner and Custom CMS Block on Categories page?

  • From your Shift4Shop Online Store Manager:
  • Go to Content -> Header & Footer
  • Turn-on Global Left Banner and add the content you would like

  • Sample HTML code of Global Left Banner for reference:
<div id="sideLeftBanner">
   <a href="/Accessories_c_78.html"><img alt="" src="/assets/images/banners/category-banner-left-1.jpg" border="0px"></a>
  <a href="/Accessories_c_78.html"><img alt="" src="/assets/images/banners/category-banner-left-2.jpg" border="0px"></a>
</div>
<div id="sideCustomCMS" class="module-wrapper">
   <h4 class="widget-header">Custom CMS Block</h4>
   <div class="side-cms-content">
      <p>Custom CMS block displayed at the left sidebar on the Catalog Page. Put your own content here: text, html, images, media... whatever you like.</p>
      <p>There are many similar sample content placeholders across the store. All editable from admin panel.</p>
   </div>
</div>

Setting Up Megamenu

The first, you need to known the Numerical order of menu items:

  • Connect to your store via FTP with WinSCP
  • Go to folder /web/assets/templates/BridoV2-core/js
  • Go to edit HaloMegaMenu.js file
  • Create the js code as bellow:
menuItem(3).HaloMegaMenu({
    dropAlign: 'fullWidth',     //Dropdown MegaMenu Alignment: left, right, center, fullWidth
    dropWidth: '493px',         //Width of Dropdown MegaMenu (if dropAlign: fullWidth => dropWidth auto set 100%)
    dropType: 'imageRight',     //Type of Dropdown MegaMenu content: imageLeft, imageRight, default
    imageAreaWidth: '40%',       //width of images area
    cateAreaWidth: '60%',       //width of categories area
    cateColumns: 3,             //columns of categories area - max 3 columns - work only with dropAlign: 'fullwidth'
    //contents for images column (HTML supported)
    contents: '<div class="col-left">\
                <a href="#"><img src="assets/images/megamenu/mega-menu-5.jpg"/></a>\
                <a href="#"><img src="assets/images/megamenu/mega-menu-6.jpg"/></a>\
            </div>\
            <div class="col-right">\
                <a href="#"><img src="assets/images/megamenu/mega-menu-7.jpg"/></a>\
            </div>',
    //information at bottom categories
    bottomCate: '<div class="container own-text"><p>Phasellus lorem malesuada ligula pulvinar commodo maecenas. <a href="#">Details</a> <span>*</span></p></div>'
});

Explain the options:

  • menuItem(3).HaloMegaMenu - Enable Megamenu style for menu item number 3
  • dropAlign - Dropdown MegaMenu Alignment: left, right, center, fullWidth
  • dropWidth - Width of Dropdown MegaMenu (if dropAlign: fullWidth => dropWidth auto set 100%)
  • dropType - Type of Dropdown MegaMenu content: imageLeft, imageRight, default
  • imageAreaWidth - Width of images area
  • cateAreaWidth - Width of categories area
  • cateColumns - columns of categories area - max 3 columns
  • contents - Contents for images column (HTML supported)
  • bottomCate - Information at bottom categories
  • customCates - You can add custom links if this menu don't have sub categories
  • disabled - set true if you don't want Enable Megamenu style for this item - Default value is false

 

Sample Options Megamenu Style 1

Fixed-width, customCates

menuItem(1).HaloMegaMenu({
    dropAlign: 'left',          //Dropdown MegaMenu Alignment: left, right, center, fullWidth
    dropWidth: '208px',         //Width of Dropdown MegaMenu (if dropAlign: fullWidth => dropWidth auto set 100%)
    dropType: 'default',        //Type of Dropdown MegaMenu content: imageLeft, imageRight, default
    imageAreaWidth: '0%',        //width of images area
    cateAreaWidth: '100%',      //width of categories area
    cateColumns: 1,             //columns of categories area - max 3 columns - work only with dropAlign: 'fullwidth'
    customCates: '<li><a href="#">Bibendumetos</a>\
                    <ul>\
                        <li><a href="#">Accessorius</a></li>\
                        <li><a href="#">Comodianos</a></li>\
                    </ul>\
                  </li>\
                  <li><a href="#">Consequatod</a>\
                        <ul>\
                            <li><a href="#">Dincidunteros</a></li>\
                            <li><a href="#">Dincidunter</a></li>\
                        </ul>\
                    </li>\
                    <li><a href="#">Dincidunteros</a></li>\
                    <li><a href="#">Loremous Comodous</a>\
                        <ul>\
                            <li><a href="#">Loremoutica</a></li>\
                            <li><a href="#">Loremouticas</a></li>\
                            <li><a href="#">Pellentes Habitantos</a></li>\
                        </ul>\
                    </li>\
                    <li><a href="#">Milancelos A Lanos</a></li>\
                    <li><a href="#">Pellentes Habitanto</a></li>\
                    <li><a href="#">Scelerisque Yurna</a></li>'
});

 

Sample Options Megamenu Style 2

fullWidth, 3-column categories, Right banner images

menuItem(2).HaloMegaMenu({
    dropAlign: 'fullWidth',     //Dropdown MegaMenu Alignment: left, right, center, fullWidth
    dropWidth: '493px',         //Width of Dropdown MegaMenu (if dropAlign: fullWidth => dropWidth auto set 100%)
    dropType: 'imageRight',     //Type of Dropdown MegaMenu content: imageLeft, imageRight, default
    imageAreaWidth: '40%',       //width of images area
    cateAreaWidth: '60%',       //width of categories area
    cateColumns: 3,             //columns of categories area - max 3 columns - work only with dropAlign: 'fullwidth'
    //contents for images column (HTML supported)
    contents: '<div class="four-images">\
                    <a href="#"><img src="assets/images/megamenu/mega-menu-1.jpg"/></a>\
                    <a href="#"><img src="assets/images/megamenu/mega-menu-2.jpg"/></a>\
                    <a href="#"><img src="assets/images/megamenu/mega-menu-3.jpg"/></a>\
                    <a href="#"><img src="assets/images/megamenu/mega-menu-4.jpg"/></a>\
                </div>',
    customCates: ''
});

 

Sample Options Megamenu Style 3

fullWidth alignment, 3-columns categories, Information at bottom categories, Right banner images

menuItem(3).HaloMegaMenu({
    dropAlign: 'fullWidth',     //Dropdown MegaMenu Alignment: left, right, center, fullWidth
    dropWidth: '493px',         //Width of Dropdown MegaMenu (if dropAlign: fullWidth => dropWidth auto set 100%)
    dropType: 'imageRight',     //Type of Dropdown MegaMenu content: imageLeft, imageRight, default
    imageAreaWidth: '40%',       //width of images area
    cateAreaWidth: '60%',       //width of categories area
    cateColumns: 3,             //columns of categories area - max 3 columns - work only with dropAlign: 'fullwidth'
    //contents for images column (HTML supported)
    contents: '<div class="col-left">\
                <a href="#"><img src="assets/images/megamenu/mega-menu-5.jpg"/></a>\
                <a href="#"><img src="assets/images/megamenu/mega-menu-6.jpg"/></a>\
            </div>\
            <div class="col-right">\
                <a href="#"><img src="assets/images/megamenu/mega-menu-7.jpg"/></a>\
            </div>',
    //information at bottom categories
    bottomCate: '<div class="container own-text"><p>Phasellus lorem malesuada ligula pulvinar commodo maecenas. <a href="#">Details</a> <span>*</span></p></div>'
});

 

Sample Options Megamenu Style 4

fullWidth alignment, 3-columns categories, 1 Left banner image

menuItem(4).HaloMegaMenu({
    dropAlign: 'fullWidth',     //Dropdown MegaMenu Alignment: left, right, center, fullWidth
    dropWidth: '493px',         //Width of Dropdown MegaMenu (if dropAlign: fullWidth => dropWidth auto set 100%)
    dropType: 'imageLeft',      //Type of Dropdown MegaMenu content: imageLeft, imageRight, default
    imageAreaWidth: '40%',       //width of images area
    cateAreaWidth: '60%',       //width of categories area
    cateColumns: 3,             //columns of categories area - max 3 columns - work only with dropAlign: 'fullwidth'
    //contents for images column (HTML supported)
    contents: '<a href="#"><img src="assets/images/megamenu/mega-menu-8.jpg"/></a>',
    customCates: ''
});

 

Sample Options Megamenu Style 5

left alignment, 1-columns categories, 1 Right banner image

menuItem(5).HaloMegaMenu({
    dropAlign: 'left',          //Dropdown MegaMenu Alignment: left, right, center, fullWidth
    dropWidth: '493px',         //Width of Dropdown MegaMenu (if dropAlign: fullWidth => dropWidth auto set 100%)
    dropType: 'imageRight',     //Type of Dropdown MegaMenu content: imageLeft, imageRight, default
    imageAreaWidth: '50%',       //width of images area
    cateAreaWidth: '50%',       //width of categories area
    cateColumns: 1,             //columns of categories area - max 3 columns - work only with dropAlign: 'fullwidth'
    //contents for images column (HTML supported)
    contents: '<a href="#"><img src="assets/images/megamenu/mega-menu-9.jpg"/></a>'
});

Enable/Disable QuickView Product

Don't forget save your changes.

 

Knowledgebase

Full Knowlegdebase from Shift4Shop: https://support.3dcart.com/Knowledgebase/List