All template files have fixed structure consisting of Header top
, Navigation
, Main Content
and Footer
structured as below:
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 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/[template]/lib/bootstrap/css/bootstrap.css" type="text/css" /> <link rel="StyleSheet" href="assets/templates/[template]/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" /> <link rel="stylesheet" href="assets/templates/[template]/css/responsive.css" type="text/css" media="screen" /> </head>
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>
<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>
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 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>
<!--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 -->
<!--page_scripts--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="assets/templates/[template]/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/[template]/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/mobilecheck.js"></script> <script type="text/javascript" src="assets/templates/[template]/js/jquery.mCustomScrollbar.min.js"></script> <script type="text/javascript" src="assets/templates/[template]/js/jquery.magnific-popup.min.js"></script> <script type="text/javascript" src="assets/templates/[template]/js/js.cookie.js"></script> <script type="text/javascript" src="assets/templates/[template]/js/wow.min.js"></script> <script type="text/javascript" src="assets/templates/[template]/js/brido.js"></script> <script type="text/javascript" src="assets/templates/[template]/js/HaloMegaMenu.js"></script>
To download Brido 3dcart Theme, please check it out at: Themeforest Downloads
Once the download is complete, unzip the file and you would see the following packages:
You need connect to your 3dcart 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
Upload Brido-core folder you have unzipped to templates folder on your 3dcart store:
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 3dcart store:
To install Brido Theme, from your 3dcart 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.
The Store Tab is the default tab that will be selected when first navigating to the page. It will contain the following settings:
<a class="logo-fixed" href="/" title="[storename]"> <img src="assets/images/logo-fixed.png" alt="[storename]" /> </a>
Here is full guide of 3dcart for reference: https://support.3dcart.com/Knowledgebase/Article/View/205/11/what-can-i-find-in-the-store-settings-section#StoreTab
Here are the default values for Brido theme:
Brido 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 3dcart for reference: https://support.3dcart.com/Knowledgebase/Article/View/205/11/what-can-i-find-in-the-store-settings-section#ProductDisplayTab
Here are the default values for Brido theme:
Here is full guide of 3dcart for reference: https://support.3dcart.com/Knowledgebase/Article/View/205/11/what-can-i-find-in-the-store-settings-section#CheckoutTab
Here are the default values for Brido theme:
Brido 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 3dcart for reference: https://support.3dcart.com/Knowledgebase/Article/View/205/11/what-can-i-find-in-the-store-settings-section#CustomerTab
Here are the default values for Brido theme:
Here is full guide of 3dcart 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 3dcart, 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!
Don't forget save your changes to finish!
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
How do I use the Home Page Slider feature? of 3dcart: http://support.3dcart.com/knowledgebase/article/View/582/5/how-do-i-use-the-home-page-slider-feature
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 -->
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 -->
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.
How to get Instagram userId and accessToken?
Don't forget save your changes to finish!
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 -->
<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>
You just need to upload your images with the correct name of file is size-chart.jpg to folder /web/assets/images/
<section class="lookbook"> <div class="slides owl-carousel"> <div class="slide"> <a href="#"><img src="/assets/images/lookbook/lb_slideshow_1.jpg" class="slide-img" alt="Dor Milance"></a> </div> <div class="slide"> <a href="#"><img src="/assets/images/lookbook/lb_slideshow_2.jpg" class="slide-img" alt="Loremous"></a> </div> <div class="slide"> <a href="#"><img src="/assets/images/lookbook/lb_slideshow_3.jpg" class="slide-img" alt="Cosmo Politanor"></a> </div> </div> <div class="social-icons"> <!-- Go to www.addthis.com/dashboard to customize your tools --> <div class="addthis_inline_share_toolbox"></div> <!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-595b0ea2fb9c5869"></script> </div> <div class="lookbook-bottom"> <a href="New-In_c_11.html" class="btn btn-primary btn-lookbook">Shop LookBook</a> </div> </section> <script> jQuery('.lookbook .owl-carousel').owlCarousel({ items: 1, nav: true, dots: false, slideBy: 1, loop: true, responsiveRefreshRate: 0 }); </script>
You just need to add Short Post (Preview) and Post Content
Sample HTML code of Short Post for reference:
<p>Sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.Sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. [...]</p>
Sample HTML code of Post Content for reference:
<p>Sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.Sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <p>Sed hendrerit metus orci, sit amet porta tellus placerat maximus. Aliquam varius posuere tellus, ut congue est sodales a. Etiam eleifend metus congue turpis laoreet tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus eget lectus suscipit, rutrum risus nec, volutpat purus.</p> <p>Cras tristique sollicitudin diam, a sodales tellus commodo a. Curabitur convallis metus at ante porttitor tincidunt.</p> <p><img src="/assets/images/blogs/Marchesa_wedding_dresses1484620546.jpg" alt=""></p> <p>Sed dictum pharetra leo, vel viverra massa dictum pharetra. Vivamus id interdum urna. Aenean luctus nisi at ante mollis vestibulum. Morbi lobortis dignissim erat, sit amet egestas tellus euismod vel. Etiam non risus dui. Praesent vitae est in sem semper maximus ac sed ex. Etiam laoreet lacinia lacus, vitae lobortis libero vulputate elementum. Donec elementum nisi sit amet lobortis fringilla.</p> <p>Sed dictum pharetra leo, vel viverra massa dictum pharetra. Vivamus id interdum urna. Aenean luctus nisi at ante mollis vestibulum. Morbi lobortis dignissim erat, sit amet egestas tellus euismod vel. Etiam non risus dui. Praesent vitae est in sem semper maximus ac sed ex. Etiam laoreet lacinia lacus, vitae lobortis libero vulputate elementum. Donec elementum nisi sit amet lobortis fringilla.</p> <p>Nam tempus turpis at metus scelerisque placerat nulla deumantos solicitud felis. Pellentesque diam dolor, elementum etos lobortis des mollis ut risus. Sedcus faucibus an sullamcorper mattis drostique des commodo pharetras loremos.Donec pretium egestas sapien et mollis.</p> <h4>Sample Unordered List</h4> <ul> <li>Comodous in tempor ullamcorper miaculis.</li> <li>Pellentesque vitae neque mollis urna mattis laoreet.</li> <li>Divamus sit amet purus justo.</li> <li>Proin molestie egestas orci ac suscipit risus posuere loremous.</li> </ul> <h4>Sample Ordered List</h4> <ol> <li>Comodous in tempor ullamcorper miaculis.</li> <li>Pellentesque vitae neque mollis urna mattis laoreet.</li> <li>Divamus sit amet purus justo.</li> <li>Proin molestie egestas orci ac suscipit risus posuere loremous.</li> </ol> <h4>Sample Paragraph Text</h4> <p>Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est.</p> <p>Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elit. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis denimes loremous. Suspendisse vestibulum lectus in lectus volutpat danos dapibus purus pulvinar. Vestibulum sit amet auctor ipsum.</p>
Don't forget save your changes.
Don't forget save your changes.
Don't forget save your changes.
Don't forget save your changes.
Full Knowlegdebase from 3dcart: https://support.3dcart.com/Knowledgebase/List