SESSION TITLEPresenter ’s Name

Ready Themes for Store OwnersGet a Professional Grade Build on a Budget

Nicholas AdkinsStrategies & Solutions Consultant – Miva Inc.

What are ReadyThemes?

ReadyThemes is functionality built into the core of Miva Merchant. It allows you build themes and integrate with an existing CSSUI store to better manage your Miva Merchant store from the admin. This includes updating your logo, managing social media links, managing promotional images, content, product lists, and navigation.

Based off this functionality we have developed ReadyTheme Templates which are a Responsive template-based theme system designed to get you looking good and selling quickly on any device. Last year we rolled out 4 templates and currently you can choose from up to 9 free themes.

+ Suivant ReadyTheme+ Base ReadyTheme

ReadyThemes Functionality

There are 6 sections available within ReadyThemes which provide different functionality. Full documentation on how to implement these features can be found here.

+ Settings

+ Images

+ Text Banners

+ Content Sections

+ Product Listings

+ Navigation Sets

ReadyTheme Settings

For all the functionality in this section there are an items which must be placed in the correct page template which will output the configured settings.

+ Look & Feel

+ Social Icons

+ Trust Symbol

<mvt:item name="readytheme" param="css" />

<mvt:item name="readytheme" param="thirdpartysharing" />

<mvt:item name="readytheme" param="trustsymbol" />

ReadyTheme Images

ReadyThemes has the ability to manage all your sites promotional images. They can be placed anywhere on the website. Miva will automatically resize them to any specifications you need. Common use cases are: homepage sliders, homepage banners, global promotional images, Category/Product Specific promotional images.

+ This code<mvt:item name="readytheme" param="image('banner-image')" />

+ Outputs This<a href="http://domain.com" target="_self">

<img src="graphics/00000002/slide1.gif" alt="Homepage Banner"></a>

ReadyTheme Text BannersText banners allow you to create text based banners which can be used for promotional messaging, or site notifications.

+ This code<mvt:item name="readytheme" param="image('promo-banner')" />

+ Outputs This<span id="promo-banner" class="readytheme-banner">

Free Shipping for all order over $100</span>

ReadyTheme Content SectionsContent Sections are a place to manage your sites content pages or other sections that need constant updates. These sections include pages like about us, policy pages, etc.

+ This code<mvt:item name="readytheme" param="contentsection('about-us')" />

+ Outputs This<div id="about-us" class="readytheme-contentsection">Welcome to my site!</div>

ReadyTheme Product ListingsProduct Listings allow you to add a list of products to any page of your Miva Store. Typically this will be used on the storefront. There are two options for which products get pulled in, all Products, or products from a specific category. This will allow the store owner to create a new category to assign products, or pull products from an existing category. Management of which products display and their order is all controlled at the category level.

<mvt:item name="readytheme" param="productlisting('featured-products')" />

ReadyTheme Product ListingsAnother important note is that multiple product listing items can appear on the same page. The products listing item will inherit all the items for the page it is used on. So if you need to used toolkit or another items code within the product listing template, as long as toolkit is assigned to the page template it is used on it will work.

The product listing item has a complete page template built in, which can be customized to support any layout needed. This allows us to use built in functionality like additional images, sorting, number of products to display.

ReadyTheme Navigation SetsEach Navigation Set has its own Template to control the layout. By default it will output a nested ul/li structure to allow for easy styling. Included in ReadyThemes is a built in stylesheet with 4 layouts. Each layout provides different styles for the type of navigation menu you would like to use. The stylesheet automatically gets added to the store under CSS list when ready themes is activated (readytheme.css).

+ Each Navigation Set will be contained in a div with a class of "navigation-element" plus a class of the code of the navigation set

+ The first ul will have a class of "navigation-set" plus a class of the layout chosen in the admin. The four layout classes are: horizontal-drop-down, horizontal-mega-menu, vertical-fly-out or single-navigation-column

+ The li for each level will have a class of "level-X" where X is the 1, 2, or 3 depending on the level of the navigation item

ReadyTheme Navigation Sets

Template Language FunctionsFinally for the more advanced user there are 5 functions available to any page the readytheme item is assigned. These functions can be used to pre-load the data for a image, banner, navigation set, content section or product listing. The main use of this would be to check to see if the ready theme element was active, however it can be used for other conditionals as well.

+ <mvt:item name="readytheme" param="Load_Image('promo_1',g.promo)" />

+ <mvt:item name="readytheme" param="Load_Image(code, output )" />+ <mvt:item name="readytheme" param="Load_Banner(code, output )" />+ <mvt:item name="readytheme" param="Load_NavigationSet(code, output )" />+ <mvt:item name="readytheme" param="Load_ContentSection(code, output )" />+ <mvt:item name="readytheme" param="Load_ProductListing(code, output )" />

&mvt:global:promo:active;&mvt:global:promo:code;&mvt:global:promo:css_class;&mvt:global:promo:css_id;&mvt:global:promo:id;

&mvt:global:promo:image_alt;&mvt:global:promo:image_hght;&mvt:global:promo:image_id;&mvt:global:promo:image_size;&mvt:global:promo:image_wdth;

&mvt:global:promo:link_dest;&mvt:global:promo:link_targ;&mvt:global:promo:link_type;&mvt:global:promo:name;

ReadyTheme Customizations

Infinite SliderFor this store we are using a combination of ReadyTheme image items and the ReadyTheme template language functions to allow the store owner to easily add more images to the home page slider. The store owner simply needs to add a new image with the code of sfnt_slider_# and it will be appended onto the homepage slider.

Dynamic Daily DealUsing Product Listings ReadyTheme functionality our development team was able to create a dynamic Daily Deal feature for www.PlantTherapy.com. The feature allows them to add products to a Daily Deal category and depending on the order a product will be dynamically added to a daily deal price group and then be removed once the day is over and a new product is added.

ReadyThemes in The Wild

www.PolarBearCoolers.com

www.HolidayLightingOutlet.com

www.LarsonShutters.com

Sneak Peak

diVinno(Alternate Version of Levels)

Venture(Alternate Version of Levels)

Hariss & Stone (Alternate Version of Suivant)

Auto Parts

A Look Into the Future