Mystile is a clean and simple theme just waiting for you to customize it. It is a WooCommerce theme, but at the same time it’s flexible and can be used or make a great blog without WooCommerce.

There are options here for the banner image, sidebar, products, and the blog.

Note: This product has been retired. Documentation is no longer being updated.

Set Up The Banner ↑ Back to top

There’s a nice banner you can choose to include at the top of your shop or blog. You can even include text over the top of the image, and choose the color for that text. Head under Mystile > Theme Options > Homepage > Featured Image to enable and set it up.

Mystile Theme Options

Upload your image, set your headline, choose a color and save your changes. That’s all! It’s a nice way to add some more style and flavor to your site.

Mystile Banner
Mystile Banner

Create A Boxed Layout ↑ Back to top

There is one more overall nifty option built into Mystile. The ability to have a boxed layout, much in the same way that Canvas has this option. Enabling it creates a new wrapper around your content, showing off more of a background image than the non boxed option. You can enable it under Mystile > Theme Options > Layout Options.

Mystile Layout Options

Mystile Non Boxed Layout
Mystile Non-Boxed Layout
Mystile Boxed Layout
Mystile Boxed Layout

Image Dimensions ↑ Back to top

Here are the ideal image dimension to use for Mystile. Larger images will be dynamically resized to fit, while smaller images will be stretched larger to fit. Product images will scale width and height and will not be cropped into a square (unless you use the ‘Hard Crop’ setting found in WooCommerce > Settings > Product > Product Image Options). For greatest control of your image sizes, it is best to save out your images to the exact size before uploading.

Note: We do not recommend that you force the height of your slider or product images with CSS as this will break the responsiveness of the theme images. Rather, it is best to save out your slider/product images with the same height before uploading.

Recommended Image Sizes ↑ Back to top

  • Featured Slider/WooSlider Business Slider suggested minimum width: 1064px – height will scale to fit
  • Testimonials icon images: 60px x 60px
  • Single Blog Post Page Images maximum width: 665px

WooCommerce Product Images ↑ Back to top

To adjust the Shop Image settings go to WooCommerce > Settings > Product and scroll to the bottom of the page to find the product image size settings. If you change these settings after you’ve uploaded images, you must Regenerate Thumbnails for the changes to take effect.

Due to the product layout on archive shop pages, square product images work best. This can be achieved by using the WooCommerce Hard Crop feature and setting the same pixel dimension for both the width and the height.

Product Images Mystile


To learn more about WooCommerce product images please see further documentation here: Adding Product Images and Galleries and here Using the Appropriate Product Image Dimensions

Featured Blog Images ↑ Back to top

To set the Featured Blog Image size for the blog page go to: Mystile > Theme Options > Dynamic Images > Thumbnail Settings.

Note: The Blog Featured Image will only display on the Blog page. If you want an image on your single post page, then you should insert the image into your post.

To learn more about Featured Images please see our tutorial here: Featured Images

WooCommerce Options ↑ Back to top

Note: Review the WooCommerce Codex to familiarize yourself with using the plugin and its various features.

After you install WooCommerce and the pages, enable recent products on the Mystile homepage at: Mystile > Theme Options > Homepage > WooCommerce.

You can also display product categories and featured products.

Mystile WooCommerce Settings

Mystile WooCommerce Homepage Grid

Blog Options ↑ Back to top

The great thing about the blog options is that they can be used with or without WooCommerce. So if you like the style of Mystile, you can ignore WooCommerce and use this as a blog theme.

For example, disable WooCommerce and setup the theme to have some of your blog posts on the home page. It can be a simple one page blog site. Alternatively, setup a static page as your homepage and then use our blog page template to house your blog. Either way it works beautifully.

Mystile Blog Settings

Mystile Blog Homepage Setup
Mystile Blog Homepage


Custom Shortcodes ↑ Back to top

There are two custom shortcodes built into Mystile. These can be used in a Text Widget on the homepage or can be used throughout your site.

[sale] ↑ Back to top

The [sale] shortcode allows you to easily display a sale banner anywhere on your site. This tandems nicely with our sale page template.

To use the [sale] shortcode simply wrap your sale banner content within [sale] tags like so;

[sale]Sale now on, up to 50% off all stock![/sale]

[sticky] ↑ Back to top

The [sticky] shortcode allows you to easily display notices on your site which are styled to appear as post-it notes. This is perfect if you want to make a short piece of content stand out somewhere on your site. It can be aligned to the right or the left of your content and be given a custom class.

To use the [sticky] shortcode simply wrap your message within [sticky] tags like so;

[sticky]This is a sticky note, awesome![/sticky]

If you want the sticky note to be nested to the left or right of your content, simply add that class to your sticky tag like so;

[sticky class="left"]This is a sticky note, awesome![/sticky]

As you would expect, you can attach any class name you like to the sticky shortcode, just in case you want to add any further custom styles to a particular sticky.

FAQ ↑ Back to top

How do I change the order of shop options on the homepage? ↑ Back to top

By default the homepage will display (providing you have all 3 enabled) product categories, followed by featured products and finally recent products. If you want to rearrange that order it only takes a couple of lines of code.

In index.php there’s an action (mystile_homepage_content()) which the three product modules are hooked into:

add_action('mystile_homepage_content', 'mystile_product_categories', 10);
add_action('mystile_homepage_content', 'mystile_featured_products', 10);
add_action('mystile_homepage_content', 'mystile_recent_products', 30);

The important thing to notice here is the number at the end of each line of code, this denotes the order the functions are loaded in. Changing the order is as easy as changing that number. To edit the order you will need to remove_action then add_action in the designated area of the theme’s functions.php file.

Say you wanted recent products to appear first, then categories, then featured products. You’d add the following to your functions.php file:

remove_action('mystile_homepage_content', 'mystile_product_categories', 10);
remove_action('mystile_homepage_content', 'mystile_featured_products', 10);
remove_action('mystile_homepage_content', 'mystile_recent_products', 30);
add_action('mystile_homepage_content', 'mystile_product_categories', 20);
add_action('mystile_homepage_content', 'mystile_featured_products', 30);
add_action('mystile_homepage_content', 'mystile_recent_products', 10);

The first three lines remove the functions and the next three re-add them with our preferred order (check the number at the end of the lines).

The order is done in increments of 10 to allow you to add custom functions between the modules:

add_action('mystile_homepage_content','my_custom_function', 15);

I want ‘add to cart buttons’ on my product archives, is there a snippet for that? ↑ Back to top

There is! Add the following to your theme (or child theme) functions.php file:

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top