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>
         

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 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

 

 

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

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 -->
         

 

Don't forget save your changes.

 

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