Silhouette Responsive Magento Theme

For Magento 1.6.x.x, 1.7.x.x, 1.8.x.x


Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us at support@quirkyfoxlabs.com

Step 1: extract and copy

Step 2: activate Silhouette on your site

Step 3: clear your cache and logout/login

Step 4: add CMS pages

Step 5: add static blocks

Step 6: select theme preset

This template comes with 3 graphic presets that you can use for your Magento site. 

Preset 1 (Green/Pink/Sand)

Preset 2 (Red/Black/White)

Preset 3 (Glass 7)

 

Selecting a preset

To select a preset:

 

Further Customization

For further customization, you can edit the CSS files (a blank custom.css is provided to put your modifications all in the same place) located in the following folder:

Images used in the template are found here:

 

The template package comes with several static blocks that you can use in your Magento site. For each one of them, inside the "Content/static_blocks" folder, you will find a PNG file (showing its setup) and/or a TXT file (containing the text to be copied in the Magento static block content) to make it like you see it in our demo (please note: the template package does not include the Magento e-commerce configuration, like categories, products, currencies, languages, etc.).

Homepage

Notes on homepage static blocks:

 

Category page

Notes on category page static blocks:

 

Product page

Notes on product page static blocks:

MegaMe Menu is an advanced Magento menu which cames with out-of-the-box responsive and mobile layout. It features custom static blocks position inside of the menu itself, which can be used to display different content depending on the shown category.

MegaMe Menu setup

{{widget type="quirkyfoxlabs_megame/menu" menu_orientation="horizontal" subcat_grouped="grouped_visible" subcat_style="fullw" subcat_style_full_target="#cont_header_content" mobile_enable="yes" mobile_fixed_bar="#cont_header_topbar" mobile_nav_label_prev="<i class=&quot;qfoxicon-left-open&quot;></i> <span>Previous</span>" mobile_nav_label_close="<i class=&quot;qfoxicon-cancel&quot;></i>"}}

Additional menu elements

You can add various top-level menu elements using static blocks with custom content. Use the following static blocks identifiers:

Internal static blocks positions

MegaMe Menu offers internal static block positions that can be used to display custom static blocks depending on the shown top-category.

Dynamic Products Slides is a special feature that allows you to create beautiful slides from any products grid listing.

The slides can be adjusted in columns, autoplay, navigation's position and behaviour. Dynamic Products Slides automatically adjusts its layout depending on the device the page is displayed on: on tablets/smartphones, the number of columns is automatically set to display the highest number of products that fits the display.

To add Dynamic Products Slides capabilities to a grid of products (such as the "Catalog New Products List Widget"):

<div class="qfoxbl_product_grid" data-cols="4" data-slide="true" data-arrow="grouped" data-autoplay="true" style="margin-bottom:0;">
[WIDGET_HERE]
</div>

The following attributes are required:

This template includes capabilties to feature a beautiful slideshow in any Magento CMS page.

To configure the slideshow you just need to customize the following example html and add it to the page where you want the slideshow to appear:

	<div id="qfoxbl_homeslide">
		<div class="slide_cont">
		<ul>
		<li>
		<a href="#">
		    <img src="{{media url="wysiwyg/home/banner.png"}}" style="display:block;" />
		    <div class="info">
		        <div class="title">Responsive layout</div>
		        <div class="description">Lorem ipsum dolor sit amet</div>
		        <div class="description">consectetur adipisicing elit</div>
		        <div class="description">lorem ipsum</div>
		    </div>
		</a>
		</li>
		<li>
		<a href="#">
		    <img src="{{media url="wysiwyg/home/banner01.png"}}" style="display:block;" />
		    <div class="info right">
		        <div class="title">Responsive layout</div>
		        <div class="description">Lorem ipsum dolor sit amet</div>
		        <div class="description">consectetur adipisicing elit</div>
		        <div class="description">lorem ipsum</div>
		        <div class="button">Buy now</div>
		    </div>
		</a>
		</li>
		</ul>
		</div>
		<a class="slide_arrow prev disable" href="#"></a> <a class="slide_arrow next" href="#"></a>
	</div>

The slideshow automatically adapts its height depending on the image shown.

The template package comes with CMS pages that you can use in your Magento site. For each CMS page, inside the "content/pages" folder, you will find a PNG file (showing its setup) and/or a TXT file (containing the text to be copied in the Magento static block content) to make it like you see it in our demo.

This template supports the following CMS pages: