1. Documentation /
  2. Deli - Storefront Child Theme

Deli – 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
Deli is a child theme for Storefront, the official WooCommerce theme. It features a texturized, tactile design, perfect for natural goods. It has an informal, natural and friendly aesthetic, making it a good choice for stores selling handmade products as well.

Installation

↑ Back to top
Deli is a Storefront child theme, so you first need to install and set up Storefront and then Deli afterwards.
  1. Download Storefront for free by at WordPress.org.
  2. Download Deli from your WooCommerce.com account at My Downloads.
  3. On your website, go to Appearance > Themes and click the Add New button. 
  4. Click Upload to upload the Storefront .zip file from step 1.
  5. Go to Appearance > Themes to Activate.
  6. Repeat steps 3-5 for the Deli theme from step 2.
More information at: Installing and Configuring Storefront.

Setup and Configuration

↑ Back to top
Once installation is complete, it’s time to configure and set up your theme. More info at: Storefront theme documentation and WordPress child themes in the WordPress Codex.

Homepage Template

↑ Back to top
To set up the homepage, see Storefront Homepage Template.

Recommended Image Sizes

↑ Back to top
There are no specific image size requirements for Deli, but we = provided the images sizes used on our demo for reference.
  • Catalog Images: 600 x 500 px
  • Single Product Image: 800 x 600 px
  • Product Thumbnails: 300 x 200 px
The original uploaded images were 1,024 by 748 px. WooCommerce Product Image settings are found at Appearance > Customize > WooCommerce > Product Images. More at: Managing Product Images. More information on WooCommerce image sizes can be found at:

Demo Content

↑ Back to top
It’s possible to import WooCommerce Dummy Data to populate your site with demo products as a starting point. Note: We do not supply the exact images you see in our Deli demo due to copyright restrictions. 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
Deli applies some specific styles to elements like buttons, so these settings are removed from the designer to avoid confusion.

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.

I don’t like how the content area is wider than the rest of the site, can I change that?

↑ Back to top
This is done so that the content aligns to the Storefront grid. However, it’s easily changed. Just add the following to your custom css:
.left-sidebar .content-area {
margin-left: 0;
margin-right: 0;
width: 74%;
}
.page-template-template-fullwidth-php .content-area,
.page-template-template-homepage-php .content-area,
.storefront-full-width-content .content-area {
margin-left: 0;
margin-right: 0;
width: 100%;
}
view raw style.css hosted with ❤ by GitHub

Questions and Feedback

↑ Back to top
Have a question before you buy? Please fill out this pre-sales form. Already purchased and need some assistance? Get in touch with a Happiness Engineer via the Help Desk.