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.
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.
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.
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.
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.
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.
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.
To learn more about Featured Images please see our tutorial here: Featured Images
WooCommerce Options ↑ Back to top
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.
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.
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:
| add_action( 'init', 'jk_mystile_add_to_cart' ); | |
| function jk_mystile_add_to_cart() { | |
| add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10); | |
| } |