How to Customize the Homepage of the Mystile Theme
The Mystile theme is probably the most popular of the free themes built specifically for WooCommerce. It's a good option for people that are looking to create an eCommerce site but are not ready to invest in a premium theme. Mystile also makes it easy to test and get familiar with the WooCommerce platform before going all-in.
With so many WordPress sites using Mystile it can be difficult to make your eCommerce site look unique. Recently, many questions have been raised related to customizing the Homepage of the Mystile theme. More specifically, folks are looking for an easy way to replace the static homepage banner image with an image slider. The need for more control over the front page of the Mystile theme is priority number one for many people.
In this UploadWP.com tutorial we will show you how to make your Mystile theme eCommerce site stand out from the rest of the crowd. Specifically, we'll show you how to customize the homepage using a combination of SlideDeck 2 (content slider plugin) and WooCommerce shortcodes. You'll soon see that it's possible to create a unique Homepage for the Mystile theme so lets get started….
Steps for Customizing the Mystile theme Home Page
Step 1: Create “Home” and “Blog” page templates
When the Mystile theme is first activated it automatically creates a “Home” page link in the main navigation and it gives you a default homepage. The issue is that when you log-into the WordPress admin and look for a “Home” page to edit you won't find one. Without a page to edit you have limited control over what displays when people go to the index page of your site. So as the first step, we need to create our own Home and Blog page templates.
To create a new Homepage template in the WordPress admin go to…
Pages > Add New > title it “Home” > make the page template full width by selecting “Full Width” in the Template drop-down on the right-hand-side of your screen > publish the page
Create a Blog page template…
Go to Pages > Add New > title it “Blog” > set the page template to “Blog” > publish the page
**Step 2: Adjust the Reading setting to make the new “Home” page template the Front Page of the Site
Now that we've created our Home and Blog page templates, the next step is to adjust the “Reading” settings so that the new Home page template becomes the Front page / index page. This will also result in our future posts displaying on the Blog page template.
To adjust the Reading settings in the WordPress admin do the following…
Go to Settings > Reading > for “Front page displays” select the “A static page” radio button > in the Front page drop-down select Home > in the Post page drop-down select Blog > Save Changes
Step 3: Customize the new Homepage
After adjusting the Reading settings, the front page of your Mystile theme site will display the new Home page full width template and your future posts will display on the Blog page template. It's now time to customize your new Mystile Homepage. In terms of customization you can really do whatever best fits your specific eCommerce site. You're only limited by the level of your creativity. Personally, I like using an image slider to give the Homepage some life. The image slider in the tutorial video below was created with the SlideDeck 2 plugin. SlideDeck 2 makes it easy to create and insert responsive content sliders for any page of post on your WordPress site.
In addition to replacing the Mystile static homepage banner image with a SlideDeck content slider I recommend experimenting with WooCommerce shortcodes. The shortcodes are built into the WordPress rich text editor. Simply click the purple “Woo” icon to access the WooCommerce shortcodes and click the blue “Woo” icon to insert any of the WooThemes shortcodes. With an image slider and shortcodes you can make your Home page exclusive. Play around with it to find the layout that best fits your eCommerce site.
Step 4: Control the Primary Navigation with Custom Menus
Now that you've created a custom Homepage it's time to update the primary navigation via the use of custom menus. By now you've most likely noticed that there are two “Home” links displaying in the navigation. To get rid of the second “Home” link we need to create a custom menu.
In the WordPress admin go to Appearance > Menus > give the menu a name and click Create Menu > select your menu from the Primary Menu drop-down > in the Custom Links widget create a Home link and add it to the menu > in the Pages and Categories widgets select the additional pages and/or categories that you want in the primary navigation > Save your custom menu
The important thing to stress when creating your primary navigation menu is that the “Home” link must be created in the Custom Links widget. Do not select the Home check-box from the Pages widget, it must be created as a Custom link. All other Pages and/or Categories can be selected via the check-boxes.
Step 5: Prevent the “Home” title from Displaying
The final step in this process of creating a unique Mystile theme Homepage is to prevent the “Home” title from displaying.
In the WP admin go to Pages > Home > delete the page title > update the page
For your reference:
- The demo site used in the tutorial video below is… SportTees.info
- The image slider was created with the SlideDeck 2 plugin. SlideDeck is a premium content slider plugin. We are in the process of creating an in-depth tutorial series on SlideDeck 2. It is important to note that most other image slider plugins (including The Fly Image Slider) would work as well.
- Dimensions for the image slider used in this tutorial video: 1060px x 343px
- Make sure that the image slider used is responsive.
- Although we used the Mystile theme in this tutorial, this process should work with almost any WooCommerce theme.
Customizing Mystile theme Part 2 – How to Remove the Mystile theme main Navigation and Replace it with a custom top right Widget Section
Part two of this tutorial was inspired by a question from one of our loyal UploadWP.com subscribers. BruceDeutsch asked (via a comment below) if it was possible to remove the standard navigation and we felt is was worth elaborating on. Thanks to BruceDeutsch, you'll now learn how to remove the Mystile theme main navigation and replace it with a Top Right widget section.
Step 1: Install a Mystile child theme and in the WordPress admin do the following…
Go to Appearance > Editor > in the style sheet paste the following custom CSS and update the file
Here's a screen capture of where you should paste the CSS in style.css
Step 2: Open the Theme Functions file (functions.php) and paste the following PHP…
remove_action( ‘woocommerce_before_shop_loop', ‘woocommerce_catalog_ordering', 30 );
Below is a screen capture that illustrates exactly where to paste it in the functions.php file
Step 3: Create a header.php file and add it to the Mystile child theme.
Next, you need to add a header.php file to your child theme and we'll do that by opening Notepad++ and pasting in the following code…
Save the file as, “header.php”
After the file has been saved in Notepad++ do the following…
Open Filezilla (any FTP client will work) and drop the header.php file into the Mystile child theme
Step 4: The final step in the process of removing the main navigation and replacing it with a top right widget section is to create an “includes” directory in the child theme, make “sidebar-init.php” in Notepad++ and drop it into “includes”.
Copy the PHP below and paste it into Notepad++…
Save the file as, “sidebar-init.php”
After the file has been saved in Notepad++ open your FTP client, find the site you're working on and go to:
wp-content > themes > Mystile Child > right click and select “create directory” > name the directory “includes” > drop the “sidebar-init.php” file into the newly created includes directory
Mission accomplished! Go out to your site, refresh the page and the Mystile top navigation will no longer appear. Next, go to Appearance > Widgets and you'll see the custom “Top Right” widget section. You can use the new widget section to more deeply customize your Mystile child theme.
For your reference:
- Part 2 of customizing the Mystile theme was added on: 10/31/2013
- The demo site used in part 2 is… Sliderdemo.info
- Notepad++ and Filezilla are free tools – just Google them
- To get a free Mystile Child Theme, subscribe to the Upload WP Newsletter
Watch our tutorial video below to see exactly how to replace the Mystile theme main navigation with a custom top right widget section…
Please use the new Upload WP Community Forums to post questions and comments on Customizing the Mystile theme. Thanks