Welcome Guest! Login
0 items Join Now

Affinity: Recreate the Demo

Your Guide to Using the Affinity Theme for Magento


You can recreate a number of different elements found on the front page of the Affinity demo by modifying some basic extension settings. Depending on which extension you wish to recreate on the page, you may only need to add and adjust the settings of a single module.

The Affinity theme handles most of the visual details for you.

All of the settings that need to be adjusted to match the demo can be found in the relevant sections under System -> Configuration -> RT RokMage Modules. Any options not mentioned below can be left at default settings.


The ModalHeader module adds in some extra functionality to the header section of a Magento store. It connects the "Log In" link to a modal login form, and adds a text-resizer. It also adds a modal shopping cart viewer and styling to the search form and breadcrumbs.


Option Setting
Enable Modal Header Yes
Enable Custom Form Elements Yes
Enable Custom Breadcrumbs Yes
Disable Modal Log In No

IE6 Transparency Fix

Add Classes to Fix

.logo img, .rokmage-cart-box-L img, .smallFont, .largeFont, ul#magemenu-top li ul, ul#magemenu-top .bg-top, ul#magemenu-top .bg-top-curves, .cms-index-index #slider_welcome, a.backward, a.forward, .block-title, button.button span, button.button span span, .rating-box, .rating-box .rating, .tabs a, div.scrollable-container, .rok-breadcrumbs, .rok-breadcrumbs ul li.first a, .block-title strong span, .block, .block-content, .mageside-menu-heading, h1, h2, h3, .clearfloat, .col-main, .bg-container-end, .col-main-end, .thumbswrapper, .thumbsbutton, .thumbsbutton a, .clearfloat, .mageside-menu-toggle-button, .mageside-menu-toggle-container li a

Modal Window Animation Settings

overlayopacity: 0.2,overlayinspeed: 300,modalpreposition: {"top":"43%"},modalpauseb4entry: 200,modalentryanimation: {"top": "50%", "opacity": "1"},modalentryspeed: 550,modalexitanimation: {"top": "55%", "opacity": "0"},modalexitspeed: 350,pauseb4overlayfadeout: 500,overlayoutspeed: 200


Replace the default Magento dropdown menu with fully configurable, animated, jQuery based top and side menus.


Option Setting
Enable Top Menu Yes
Enable Left Side Menu Yes
Enable Right Side Menu Yes

Top Menu Settings

Option Setting
Double Column Dropdown Yes
Include Home Link Yes
Include Catalog Categories Yes
Slot #1 CMS Page Link About Us
Include Contact Link Yes

Top Menu Animation Settings

mm_slidedownspeed: 100,mm_fadeoutspeed: 50,mm_css_pre: {left: 100, opacity: 0 },mm_animatein: {left: 165, opacity: 1},mm_animateout: {opacity: 0, left: 185},mm_animate_speed: 150,mm_pause: 0

Side Menu Left Settings

Option Setting
Menu Title Main Menu
Include Catalog Categories Yes
Include 'Contact' link Yes

Side Menu Right Settings

Option Setting
Menu Title Customer Service
Include Catalog Categories No
Include 'Contact' link Yes

HomePage Grid

Set up your store homepage with just a few clicks, with a welcome message and product lists defined in the Admin Panel.


Option Setting
Enable Homepage Grid Yes

Product Grid Settings

Option Setting
Product Grid Title A selection of our products!
Product Grid Text <p>Check out a selection of our items currently for sale:</p>
Number of products to show in grid 6
Filter Products By Show All Products
Truncate Product Titles/Descriptions Truncate On
Max Titles Length 50
Max Descriptions Length 110

Welcome Message

<div class="block-title"><strong><span>Welcome!</span></strong></div>
<p>Our aim is to be your number one source for computer products giving you the best personalised online shopping experience.<br /><br />We deliver internationally and specialise in providing the best in designer electronics from around the world.</p>


Add a fully configurable content slider to the homepage and category pages, choosing which products to show.


Option Setting
Enable Homepage Slider Yes
Enable Category Slider Yes
Homepage Content Type Show Catalog Products
Show Prev/Next Arrows Yes
Duration 4

Homepage Slider Products

Option Setting
Filter Products By Show All Products
Truncate Product Titles/Descriptions Truncate On
Max Titles Length 60
Max Descriptions Length 200

Category Slider Products

Option Setting
Filter Products By Show All Products
Truncate Product Titles/Descriptions Truncate On
Max Titles Length 30
Max Descriptions Length 115
Hide Description No


Add a fully configurable, jQuery based, animated horizontal product scroller to the homepage and category pages.


Option Setting
Enable Homepage Scroller Yes
Enable Category Scroller Yes
Prev/Next Function Page
Truncate Product Titles Truncate On
Max Titles Length 32
Speed 1
Products Per Page 7
Use Tooltip for Details Yes

Homepage Scroller Products

Option Setting
Filter Products By Show All Products

Category Scroller Products

Option Setting
Filter Products By Show All Products


Add the ability to truncate product titles and descriptions, and switch between grid and list views without a page refresh.


Option Setting
Enable Category View Yes
Truncate Product Titles/Descriptions Truncate On
Max Titles Length 50
Max Descriptions Length 100


Option Setting
Use Accordion Effect Yes


Replace the default zoom with a jQuery version, add improved thumbnails, and show additional info in switchable tabs.


Option Setting
Enable Product View Yes
Use 2 Column Layout No


Option Setting
Enable Tabbed Product Info Yes
Quick Info Attribute Short Description
Quick Info Content {{value}}
Tab #1 Attribute Description
Tab #1 Content {{value}}
Tab #2 Attribute Additional Information
Tab #2 Content {{value}}
Show Product Reviews Yes
Upsell Columns 2


Option Setting
Enable RokMage media view Yes
Resize product image background No
Image background location default/rokmage-productview/images/
Small Image Width 300
Small Image Height 300
Large Image Width 1000
Large Image Height 1000
Thumbnail Width 65
Thumbnail Height 65
Disable Zoomer No
Use Overlaid Thumb Gallery Yes
Spacing Offset 40


Add your left and right sidebar callout content directly from the admin - no need to touch any template or layout files.


Option Setting
Enable Left CMS Callout Yes
Enable Right CMS Callout Yes


Option Setting
Left Callout Title Left CMS Callout
Right Callout Title Right CMS Callout

Left Callout Text

<p>You can add your content here by going to Admin -&gt; Config -&gt; CmsCallouts -&gt; Left Callout Text. You can also disable this box entirely.</p>

Right Callout Text

<p>You can add your content here by going to Admin -&gt; Config -&gt; CmsCallouts -&gt; Right Callout Text. You can also disable this box entirely.</p>


Define your featured products from the admin, using selected category, attribute, or multi-select product list.


Option Setting
Get Featured Products Featured List


Option Setting
Select Featured List Select at least 6 'Featured' products from this list. Hold ctrl and click to multi-select (cmd on a Mac)


Add product lists to the footer, a text box (for disclaimers etc), styled footer menu and Cart count linked to the modal cart viewer.


Option Setting
Enable Footer Block Yes
Number of Items in Lists 6
Truncate Product Titles Truncate On
Max Titles Length 22


Option Setting
1st Column Content Recently Added List
2nd Column Content Highest Rated Products
3rd Column Content Featured Products List

Text Block Content

<p><strong>Important:</strong> This demo is purely for demonstration purposes and all the content relating to products, services and events are fictional and are designed to showcase a live shopping site. All images are copyrighted to their respective owners. This is not an actual store, only representative of one.</p>
<p><strong>You can edit this text by going to Admin -&gt; Configuration -&gt; RT RokMage Modules -&gt; FooterBlock -&gt; Text Box Content.</strong></p>


Enables the Tiny MCE editor for RokMage Extensions.


Option Setting
Enable Tiny MCE for RokMage Extensions Yes

Textareas to enable for


IE 6/7 Support

This template does not support IE6/7. Instead, it redirects IE6/7 users to an "Unsupported Browser" page. This page is added automatically by the RocketLauncher, but if you are installing manually, you will also need to add this.

You can do so by going to CMS -> Pages and making a new page, called "IE6/7 Redirect". Set the identifier as ie6-redirect - this is important as it is what is used by the redirect script so make sure to set it this way.

Then, set the layout as 1 column, and title and content as you wish. To set the same as the RL version, use the title "Unsupported Browser" and add your content as follows (with editor hidden):

<p>You are using a browser that is not supported by this website. That
probably means your browser is woefully out of date, insecure, and just
generally lacking in standards. Luckily for you there are literally 10s of
modern, standards compatible browsers available to you at no cost. All you
need to do is simply take the time to install one.</p>

<p>We suggest either installing the latest version of <a href=
"http://www.mozilla.com/en-US/firefox/firefox.html">Firefox</a>, <a href=
"http://www.google.com/chrome">Google Chrome</a>, <a href=
"http://www.apple.com/safari/download/">Safari</a>, <a href=
"http://www.opera.com/">Opera</a> or upgrading your current version of
Internet Explorer to <a href=

Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.