Transform your store into a modern, beautifully designed showcase for your products with Miva Merchant's New ReadyThemes. These free, high quality responsive themes are paired with new admin functionality to allow you to better manage your existing stores content, navigation, featured products and marketing images. This session will guide you though the new themes available as well as show you how to integrate ReadyTheme features into your existing Miva Store. MivaCon 2016, Friday session 1.

1. SESSION TITLE
Presenter’s Name
Ready Themes for Store Owners
Get a Professional Grade Build on a Budget
Nicholas Adkins
Strategies & Solutions Consultant – Miva Inc.

2. What are ReadyThemes?

3. 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.

4. + Suivant ReadyTheme+ Base ReadyTheme

5. ReadyThemes Functionality

6. 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

7. 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" />

8. 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>

9. ReadyTheme Text Banners
Text 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>

10. ReadyTheme Content Sections
Content 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>

11. ReadyTheme Product Listings
Product 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')" />

12. ReadyTheme Product Listings
Another 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.

13. ReadyTheme Navigation Sets
Each 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

14. ReadyTheme Navigation Sets

15. Template Language Functions
Finally 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;

16. ReadyTheme Customizations

17. Infinite Slider
For 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.

18. Dynamic Daily Deal
Using 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.

19. ReadyThemes in The Wild

20. www.PolarBearCoolers.com

21. www.HolidayLightingOutlet.com

22. www.LarsonShutters.com

23. Sneak Peak

24. diVinno
(Alternate Version of Levels)

25. Venture
(Alternate Version of Levels)

26. Hariss & Stone
(Alternate Version of Suivant)

27. Auto Parts

28. A Look Into the Future