ToyShop – Storefront Child Theme

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. —WordPress Codex: Child Themes

ToyShop is a child theme for Storefront, the official WooCommerce theme. If offers a carefree, friendly and characterful design – perfect for stores selling children’s goods.

To help set up your theme follow the documentation below and be sure to reference the Storefront theme documentation if you are not familiar with the main features/setup of Storefront.

You can read more documentation on WordPress child themes in the WordPress Codex.

Screen Shot 2015-09-21 at 13.48.16

Installation ↑ Back to top

As ToyShop is a Storefront child theme, you will first need to install and set up Storefront itself. You can read all about installing that over on our Installing & Configuring Storefront documentation.

To install ToyShop, upload the ‘toyshop’ directory to your wp-content/themes directory.

Once uploaded / installed you can activate ToyShop by navigating to Appearance > Themes.

Remember that ToyShop is a child theme and requires Storefront to be installed.

Homepage Template ↑ Back to top

To setup the themes homepage page template this is covered in our Storefront Documentation in the section titled Homepage Template.

Recommended Image Sizes ↑ Back to top

There are no specific image size requirements for Toyshop but we have provided the images sizes that we use on our demo installation below for reference.

Toyshop WooCommerce Image Settings

The original uploaded images are at a size of 1,124px in width by 1,690px in height before being uploaded. The WooCommerce image settings above can be located at WooCommerce > Settings > Products > Display.

Remember, once you update any image dimensions in WooCommerce you’ll need to run the Regenerate Thumbnails plugin to regenerate all pre-existing thumbnails and re-crop them to the new sizes that you selected.

Note: For further information on the WooCommerce image sizes you can reference these two resources below.

Change the ‘season’ in the footer ↑ Back to top

By default, the footer features a ‘summer’ themed design:

Screen Shot 2015-09-29 at 08.42.35

This can be adjusted to have a ‘fall’ themed design:

Screen Shot 2015-09-29 at 08.44.07

Or a ‘winter’ themed design:

Screen Shot 2015-09-29 at 08.48.24

To change this setting, look for the ‘Season’ control in the ‘Footer’ section of the Customizer:

Screen Shot 2015-09-29 at 08.49.13

Remember to adjust your footer background color to match your chosen season!

Product Demo Content ↑ Back to top

To install some demo content for products as a starting point you can import the WooCommerce Dummy Data which will populate your site with demo products for you.

Note: We do not supply the exact images you see on our Toyshop demo within the WooCommerce Dummy Data as the sites images cannot be redistributed due to copyright restrictions and are for demo purposes only. The WooCommerce Dummy Data instead comes with our own unique unrestricted images that we can redistribute within product import data.

FAQ ↑ Back to top

I’m using the Storefront Designer extension but noticed some settings are missing ↑ Back to top

ToyShop applies some specific styles to elements like buttons and the header layout, so these settings are removed from the designer to avoid confusion.

How do I control which categories are displayed on the homepage product category section? ↑ Back to top

They are the three first top level (parent) categories as arranged on the product categories screen in your dashboard. You can drag and drop categories there to rearrange.

On the demo there is pagination on the single product pages, how do I enable that? ↑ Back to top

Easy. Just install the Storefront Product Pagination plugin.

On the demo there are sharing buttons on the single product pages, how do I enable that? ↑ Back to top

Easy. Just install the Storefront Product Sharing plugin.

On the demo, there is a content bar in the footer, how do I enable that? ↑ Back to top

Easy. Just install the Storefront Footer Bar plugin. Then add a text widget to the newly created widget region via Appearance > Widgets.

On the demo homepage, there’s a large image with some text overlaid, how do I do that? ↑ Back to top

This is achieved using our Storefront Parallax Hero extension.

On the demo homepage, there’s a product reviews section, how do I add that? ↑ Back to top

Easy. Just install the Storefront Reviews plugin.

I’m using the homepage template but don’t want to display the the page title / content ↑ Back to top

If you don’t want to display content simply don’t add any. To hide the title you can use this plugin which gives you the ability to hide the page title on any page across your site. Alternatively use the Homepage Control plugin to toggle the display of this component.

Can I customise the look and feel of my blog pages? ↑ Back to top

You sure can. Take a look at the Storefront Blog Customiser extension to see what’s possible.

Can I customise the look and feel of my checkout? ↑ Back to top

You sure can. Take a look at the Storefront Checkout Customiser extension to see what’s possible.

How can I customise my site when using a child theme? ↑ Back to top

A lot of WordPress tutorials will recommend inserting code snippets into a child themes functions.php file. This is to ensure that you’re always able to update the parent theme without losing your changes. As ToyShop is already a child theme, you aren’t able to do this. Any changes you add to ToyShops functions.php file will be lost when you perform an update. Instead, it is recommended that you add any code snippets to a customisation plugin. We’ve created a plugin you can use to do just this. Download here.

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

Back to the top