Wedding Magento Theme

The Documentation


1. Installation Instruction

After download the package, please proceed with the following steps:

Step 1: Disable Cache

Go to the System -> Cache Management -> Select All -> in the [Action] choose Disable -> Submit.

Step 2: Please unzipped the archive and you will see two folders: Step1, Step2.

Step 3: Index Management.

If you change your information such as products, categories, urls, etc on your online store, you must re-index contents so that changes will be shown on the front-end.

Go to the System -> Index Management , To rebuild indexes Select All -> Reindex Data -> Submit.

Step 4: Upload content of Theme directory to your Magento root directory.

- First you copy all the folders in Step1 to the Magento root folder.

- Then you copy all the folders in Step2 to the Magento root folder.

This will not over write the existing Magento folders of files, only the new contents will added.

Step 5: Enable Cache.

Go to the System -> Cache Management -> Select All -> in the [Action] choose Enable -> Submit.

Step 6: Active Wedding magento theme.

After installing theme as these above steps, you need to activate it.

Go to the System -> Configuration -> General -> Design. Fill in all fields as Image below and then click "Save Config":

And you can also change the settings for Wedding Header.

2. Demo theme settings

After you are done with the steps on "Installation Instruction". If you do not want to perform many steps to make a new theme. you can install our demo theme to simplify the process.

If you want to set up quickly the pages, static blocks as demo of our theme, you perform the following steps:

Step 7: Import static blocks and pages

Go to the System -> Configuration -> Glacetheme -> Glacetheme-Settings Panel.

Go to the "Theme Installation" section where “Import Static Blocks”, “Import CMS Pages” and "Import Demo Content" are provided with this theme.

Step 8: Setting Default Pages

Go to the System -> Configuration -> General -> Web

Go the "Default Pages" section. On the "CMS Home Page" field, choose "Homepage" and click "Save config" button.

Layout and Block position for Home Page

Show Layout Full: click here

Layout and Block position for Category Page

Show Layout Full: click here

Layout and Block position for Product Page

Show Layout Full: click here

Layout and Block position for Blog Page

Show Layout Full: click here

Go to the CMS -> Static Blocks. Click on the button "Add New Block" to create new block as bellow

1. Block-1 (ID = "glacetheme_homepagesliders_5")

Click here to view image

Set up static blocks in backend:

<div id="banner-slider-demo-5" class="owl-carousel owl-theme owl-middle-narrow owl-banner-carousel">
    <div class="item" style="background:url({{media url="wysiwyg/glacetheme/homepage/slider/05/01_bg.png"}}) center center no-repeat; background-size:100% 100%;">
        <div class="container" style="position:relative">
            <img src="{{media url="wysiwyg/glacetheme/homepage/slider/05/01.png"}}" alt="" />
        </div>
    </div>
    <div class="item" style="background:url({{media url="wysiwyg/glacetheme/homepage/slider/05/02_bg.png"}}) center center no-repeat; background-size:100% 100%;">
        <div class="container" style="position:relative">
            <img src="{{media url="wysiwyg/glacetheme/homepage/slider/05/02.png"}}" alt="" />
        </div>
    </div>
</div>
<script type="text/javascript">
    Glacetheme_1102(function($){
        $("#banner-slider-demo-5").owlCarousel({autoPlay:true,lazyLoad:true,stopOnHover: true,pagination: true, autoPlay: true,navigation: false,navigationText:["<i class='icon-chevron-left'></i>","<i class='icon-chevron-right'></i>"],slideSpeed : 500,paginationSpeed : 500,singleItem:true,transitionStyle : "fade"});
    });
</script>

<div class="wellcome-site default_fix">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div style="background-image: url({{media url="wysiwyg/wellcome_box1.png"}});" class="im1 parallax skrollable skrollable-after" data-bottom="left:20%" data-center="left:0" data-image="wysiwyg/wellcome_box1.png"><div class="im_arrows"></div></div>
                <div style="background-image: url({{media url="wysiwyg/wellcome_box2.png"}});" class="im2 parallax skrollable skrollable-after" data-bottom="right:20%" data-center="right:0" data-image="wysiwyg/wellcome_box2.png"><div class="im_arrows"></div></div>

                <div class="married_txt skrollable skrollable-after" data-bottom="opacity:0" data-center="opacity:1">
                    <img src="{{media url="wysiwyg/icon_center_wellcome.png"}}" alt="" />
                    <h3>Welcome to Bella dia</h3>
                    <p>gifts to the first customer of the day</p>
                    <a href="#rsvp" class="btn go">Shopping now</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="new-products">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h2 class="filter-title"><span>Our</span> Products</strong></h2>
                <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget diam elementum, laoreet odio gravida, consectetur turpis. Donec dignissim pretium tortor in porttitor. Mauris nunc metus, varius sit amet ultricies vitae, sagittis et augue. Nulla non suscipit nisi, in vehicula leo. </p>
                <div id="new_product" class="owl-top-narrow hide-addtolinks">
                    {{block type="easyfilterproduct/newproduct_home_list" name="new_list" product_count="12" template="easyfilterproduct/list.phtml"}}
                </div>
                <script type="text/javascript">
                    Glacetheme_1102(function($){
                        $("#new_product .filter-products .owl-carousel").owlCarousel({lazyLoad: true,    itemsCustom: [ [0, 1], [320, 1], [480, 1], [768, 2], [992, 3], [1280, 4] ],    responsiveRefreshRate: 50,    slideSpeed: 200,    paginationSpeed: 500,    scrollPerPage: false,    stopOnHover: true,    rewindNav: true,    rewindSpeed: 600,    pagination: true,    navigation: false,    autoPlay: false,    navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]});
                    });
                </script>
            </div>
        </div>
    </div>
</div>
<div class="our-service">
    <div class="container">
        <h2 class="filter-title"><span>Our</span> Service</h2>
            <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget diam elementum, laoreet odio gravida, consectetur turpis. Donec dignissim pretium tortor in porttitor. Mauris nunc metus, varius sit amet ultricies vitae, sagittis et augue. Nulla non suscipit nisi, in vehicula leo. </p>
        <div class="body-service">
            <div class="column-left">
                <div class="main-column-left">
                    <ul>
                    <li class="item1">
                    <h3>Mauris ornare</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus auctor ultrices quam, ac consectetur dui hendrerit non...</p>
                    </li>
                    <li class="item2">
                    <h3>Etiam et ligula erat. </h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus auctor ultrices quam, ac consectetur dui hendrerit non...</p>
                    </li>
                    <li class="item3">
                    <h3>Nulla molestie</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus auctor ultrices quam, ac consectetur dui hendrerit non...</p>
                    </li>
                    <li class="item4">
                    <h3> Ut sem eros</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus auctor ultrices quam, ac consectetur dui hendrerit non...</p>
                    </li>
                    </ul>
                </div>
            </div>

            <div class="column-right">
                <div class="main-column-right"><img src="{{media url="wysiwyg/service_right.png"}}" alt="" /></div>
            </div>
        </div>
    </div>
</div>

<div class="contact-us">
    <div class="container">
        <div class="form-contact-homepage">
            <h2><span>Contact</span> Us</h2>
            <p class="subtitle">Any further questions please send us a message in the comments box below or contact us at <span>415 183 1239</span></p>
         {{block type="core/template" name="contactForm" form_action="/contacts/index/post" template="contacts/form.phtml"}}
        </div>
    </div>
</div>

<div class="our-blog">
    <div class="block_top">
        <div class="container">
            <h2 class="filter-title"><span>Wedding</span> Events</h2>
                <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget diam elementum, laoreet odio gravida, consectetur turpis. Donec dignissim pretium tortor in porttitor. Mauris nunc metus, varius sit amet ultricies vitae, sagittis et augue. Nulla non suscipit nisi, in vehicula leo. </p>
        </div>
    </div>
    <div class="block_bottom">
        <div class="container">
            <div id="latest_news" class="owl-top-narrow">
                {{block type="blog/last" name="latest_news" template="blog/recentposts_home.phtml"}}
            </div>
        </div>
    </div>
</div>    
<script type="text/javascript">
Glacetheme_1102(function($){
    $("#latest_news .owl-carousel").owlCarousel({
        lazyLoad: true,
        itemsCustom: [ [0, 1], [320, 1], [480, 1], [640, 2], [768, 2], [992, 2], [1200, 2] ],
        responsiveRefreshRate: 50,
        slideSpeed: 200,
        paginationSpeed: 500,
        scrollPerPage: false,
        stopOnHover: true,
        rewindNav: true,
        rewindSpeed: 600,
        pagination: false,
        navigation: true,
        autoPlay: true,
        navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
    });
});
</script>

<div id="our-gallery" class="our-gallery">
    <h2 class="filter-title"><span>Our</span> Gallery</h2>
    <div class="inner_bg">
        <div class="owl-top-narrow">
            <div id="container_block" class="owl-carousel owl-theme sg">
                    <div class="item sg-item">
                        <a href="{{media url="wysiwyg/wedding1.jpg"}}" title="Here's a Longer Caption"><img src="{{media url="wysiwyg/wedding1.jpg"}}" alt="" /></a>
                    </div>
                    <div class="item sg-item">
                        <a href="{{media url="wysiwyg/wedding2.jpg"}}"><img src="{{media url="wysiwyg/wedding2.jpg"}}" alt="" /></a>
                    </div>
                    <div class="item sg-item">
                        <a href="{{media url="wysiwyg/wedding3.jpg"}}"><img src="{{media url="wysiwyg/wedding3.jpg"}}" alt="" /></a>
                    </div>
                    <div class="item sg-item">
                        <a href="{{media url="wysiwyg/wedding4.jpg"}}"><img src="{{media url="wysiwyg/wedding4.jpg"}}" alt="" /></a>
                    </div>
                    <div class="item sg-item">
                        <a href="{{media url="wysiwyg/wedding5.jpg"}}" title="Another Caption"><img src="{{media url="wysiwyg/wedding5.jpg"}}" alt="" /></a>
                    </div>
                    <div class="item sg-item">
                        <a href="{{media url="wysiwyg/wedding6.jpg"}}"><img src="{{media url="wysiwyg/wedding6.jpg"}}" alt="" /></a>
                    </div>
                    <div class="item sg-item">
                        <a href="{{media url="wysiwyg/wedding7.jpg"}}"><img src="{{media url="wysiwyg/wedding7.jpg"}}" alt="" /></a>
                    </div>
                    <div class="item sg-item">
                        <a href="{{media url="wysiwyg/wedding8.jpg"}}"><img src="{{media url="wysiwyg/wedding8.jpg"}}" alt="" /></a>
                    </div>
                    <div class="item sg-item">
                        <a href="{{media url="wysiwyg/wedding9.jpg"}}"><img src="{{media url="wysiwyg/wedding9.jpg"}}" alt="" /></a>
                    </div>
                    <div class="item sg-item">
                        <a href="{{media url="wysiwyg/wedding10.jpg"}}"><img src="{{media url="wysiwyg/wedding10.jpg"}}" alt="" /></a>
                    </div>
                
                <script type="text/javascript">
                Glacetheme_1102(function($){
                    $("#container_block").owlCarousel({
                        lazyLoad: true,
                        itemsCustom: [ [0, 1], [320, 1], [480, 2], [640, 3], [768, 3], [992, 3], [1200, 3] ],
                        responsiveRefreshRate: 50,
                        slideSpeed: 200,
                        paginationSpeed: 500,
                        scrollPerPage: false,
                        stopOnHover: true,
                        rewindNav: true,
                        rewindSpeed: 600,
                        pagination: true,
                        navigation: false,
                        autoPlay: true,
                        navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
                    });
                });
                </script>
            </div>
        </div>
    </div>
</div>

<div id="brand_logo">
    <div class="container">
        <h2>OUR FAVORITE BRANDS</h2>  
        <div class="owl-top-narrow">
            <div id="brands-slider-demo-5" class="owl-carousel owl-theme">
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand1.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand2.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand3.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand4.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand5.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand6.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand7.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand8.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand1.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand2.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand3.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand4.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand5.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand6.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand7.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand8.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand1.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand2.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand3.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand4.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand5.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand6.png"}}" alt="" /></p></div>
                <div class="item" style="padding-top:10px;"><p><img class="lazyOwl" src="{{media url="wysiwyg/brand7.png"}}" alt="" /></p><p><img class="lazyOwl" src="{{media url="wysiwyg/brand8.png"}}" alt="" /></p></div>
            </div>
            <script type="text/javascript">
            Glacetheme_1102(function($){
                $("#brands-slider-demo-5").owlCarousel({
                    lazyLoad: true,
                    itemsCustom: [ [0, 1], [320, 1], [480, 2], [640, 3], [768, 4], [992, 4], [1200, 4] ],
                    responsiveRefreshRate: 50,
                    slideSpeed: 200,
                    paginationSpeed: 500,
                    scrollPerPage: false,
                    stopOnHover: true,
                    rewindNav: true,
                    rewindSpeed: 600,
                    pagination: false,
                    navigation: true,
                    autoPlay: true,
                    navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
                });
            });
            </script>
        </div>
    </div>    
</div>

2. Block-2 (ID = "glacetheme_footer_links")

Set up static blocks in backend:

<div class="block">
    <div class="block-content">
        <img id="logo_footer" src="{{media url="wysiwyg/logo-footer.png"}}" alt="" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique at sapien eu mattis. 
		Integer tristique volutpat nisl, sagittis luctus lorem dignissim et. 
		Donec volutpat, nibh sed convallis facilisis, erat tortor suscipit nunc, sed malesuada enim massa ac massa.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique at sapien eu mattis. 
		Integer tristique volutpat nisl, sagittis luctus lorem dignissim et. sed malesuada enim massa ac massa.</p>
    </div>
</div>

3. Block-3 (ID = "glacetheme_footer_contact_information")

Set up static blocks in backend:

<div class="block">
    <div class="block-title">Follow Us</div>
    <div class="block-content">
        <ul class="contact-info">
            <li class="facebook"><a href="#">facebook</a></li>
            <li class="tiwtter"><a href="#">tiwtter</a></li>
            <li class="google-flus"><a href="#">google flus</a></li>
            <li class="linkedin"><a href="#">linkedin</a></li>
        </ul>
    </div>
    <div class="block-title">Meet Bella Dia</div>
    <div class="block-content">
        <ul class="menu">
            <li><a href="#">About Bella Dia</a></li>
            <li><a href="#">Explore our Ecosystem</a></li>
            <li><a href="#">Careers</a></li>
        </ul>
    </div>
    <div class="block-title">Need help?</div>
    <div class="block-content">
        <ul class="menu">
            <li><a href="#">Help Center</a></li>
            <li><a href="#">Bella Dia Market Terms</a></li>
            <li><a href="#">Author Terms</a></li>
            <li><a href="#">Bella Dia Market Licenses</a></li>
            <li><a href="#">Contact Bella Dia</a></li>
        </ul>
    </div>
</div>

4. Block-4 (ID = "glacetheme_footer_features")

Set up static blocks in backend:

<div class="block">
    <div class="block-title">A little about us:</div>
    <div class="block-content">
    <p>Nam at arcu at arcu condimentum eleifend eget id enim. Nulla facilisi. 
	Proin vel nulla magna. Duis vel nibh elementum, eleifend nibh in, dapibus lorem. 
	Praesent fermentum nibh ac nulla aliquam, quis rhoncus libero dignissim. 
	Donec metus tellus, iaculis accumsan semper sed, scelerisque in nibh. </p></br>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper libero, at viverra felis. </p>
    </div>
</div>

5. Block-5 (ID = "glacetheme_footer_bottom_custom_block")

Set up static blocks in backend:

<img src="{{media url="wysiwyg/cmsideas/footer/payments.png"}}" alt="" style="max-width: 100%;" />

6. Block-6 (ID = "glacetheme_left_side_category")

Set up static blocks in backend:

<h2 class="sidebar-title" style="margin-bottom:10px">Featured Products</h2>
<div class="sidebar-easyfilterproduct custom-block">
{{block type="easyfilterproduct/featured_home_list" name="featured_sidebar" product_count="13" template="easyfilterproduct/sidebar_list.phtml"}}
</div>

7. Block-7 (ID = "baner_for_sub_page")

Set up static blocks in backend:

<div class="banner-image">
            <img src="{{media url="wysiwyg/glacetheme/Banner_rings.jpg"}}" alt="" />
        </div>

1. Setting Homepage Slider

Go to the Configuration -> System -> Click the "Easy Homepage Slider" tab from the left-hand menu. Then you fill out all the necessary information as below:

2. Category

Please go to the Catalog -> Manage Categories.

2.1. Banner for the Categories

You choose a category and enter data into the following field:

In the General information tab:

<div class="banner-image">
            <img src="{{media url="wysiwyg/glacetheme/Banner_rings.jpg"}}" alt="" />
</div>

2.2. Megamenu configuration

Navigation Menu

To configure Megamenu of Wedding theme. You need to select top-level categories that will be displayed on the navigation menu.

In the Menu tab: You can set the Menu type, Sub Category Menu Columns, and display Custom block (top, left, right, bottom) .

Display in front-end