1. Documentation /
  2. SkinCare Theme

SkinCare Theme


To create a site with SkinCare, you need to install the SkinCare theme and WooCommerce plugin.  

SkinCare Download and Install  

  1. Log in to your WooCommerce.com account and navigate to the Downloads page. Click the Download Icon to get a compressed skincare.zip theme file on your computer  
  2. From the dashboard of your site, navigate to Appearance > Themes and click on the Add New button  
  3. Click the Upload Theme button to upload the skincare.zip file you downloaded in step 1  
  4. Click the Install Now button  
  5. You’ll be redirected to the activation page. Click the Activate button
Install SkinCare theme
Activate SkinCare theme

Install WooCommerce  

If you haven’t installed WooCommerce already, follow the steps below:  

  1. Go to Plugins > Add New  
  2. Search for “WooCommerce” 
  3. Hit the Install Now button on the box containing the WooCommerce title 
  4. Finally, press the Activate Now button 
Install WooCommerce plugin

Import Demo Site 

SkinCare comes with a pre-built demo site which you can import into your site and start editing content. To import the demo, you need to install the ThemeGrill Demo Importer plugin and follow these few steps:  

  1. Go to Plugins > Add New  
  2. Search for the “ThemeGrill Demo Importer” plugin 
  3. Once the plugin appears on the search result, click on the Install Now button   
  4. Click on the Activate Now button 
  5. Go to Appearance > Demo Importer  
  6. Hover over the SkinCare box and click the Import button  
  7. On the confirmation box, read the heads-up message carefully and click the Confirm button if all points look good to you  
  8. Wait till the Importing… text on the button changes to Live Preview  
  9. Click the Live Preview button  
  10. Your site should now look like the SkinCare demo site  
Install demo importer for SkinCare
Import SkinCare demo site

Now, it’s time to edit the content of your site like posts, pages, products, images, etc. Go through the documentation below for detailed information 

Set Page Template for Gutenberg Page  

  1. Go to the edit screen of the page  
  2. On the right side, click on the Template.  
  3. Choose Gutenberg Block / Page Builder (SkinCare) from the dropdown.   
  4. Click the Update button at the top right.  
Set page template for Gutenberg block page


↑ Back to top

The overall customizations of the site’s design can be done via options available in WordPress Dashboard > Appearance > Customize. Basically, options are arranged in the following ways:  

  1. Global: Affects globally throughout the site. For example, primary colors, heading color, container width, etc.  
  2. Section-wise: Options for website components like header, footer, and content area  
  3. WooCommerce: Customize the WooCommerce page, products, and design  

Global Colors

↑ Back to top

From Appearance > Customize > Global > Colors, change the primary color, text color, and heading colors throughout the site.  

SkinCare global colors

Container Width  

From Appearance > Customize > Global > Layout > Container, you can adjust overall site width.  

SkinCare container width

Site Title, Tagline, and Logo

↑ Back to top

From Appearance > Customize > Header > Site Identity, you can  

  • Upload logo and change its size  
  • Plus, it supports the retina logo  
  • Upload site icon  
  • Add site title and tagline  

Site Header

↑ Back to top

From Appearance > Customize > Header > Primary Header, you can  

  • Make header full width expanding it to the edges  
  • Change header background-color  
  • Make header transparent with custom background-color  
  • Customize text colors and background colors of menu, submenu, and mobile hamburger icon  
  • Enable/disable header search and its placeholder text  
  • Enable/disable the WooCommerce account icon in the header  
  • Enable/disable WooCommerce mini cart in the header  

Page Title and Breadcrumbs

↑ Back to top

From Appearance > Customize > Header > Page Header, you can enable/disable page title and breadcrumbs.  

WooCommerce Shop

↑ Back to top

From Appearance > Customize > WooCommerce > Shop, you can  

  • Show checkout panel after clicking add to cart button  
  • Enable/disable shop filters  
  • Enable/disable product result count  
  • Enable/disable the sales badge and change its text  
  • Show hide product elements like product title, ratings, price, add to cart button  
  • Adjust horizontal and vertical spacing among products  
  • Change product image and content alignment  
  • Change color and background color of product title, price, sale badge  

WooCommerce Single Product

↑ Back to top

From Appearance > Customize > WooCommerce > Single Product, you can  

  • Adjust the width of the product image area  
  • Enable add to cart button on scrolling down the single product page  
  • Enable/disable sale badge  
  • Show/hide product meta information and tabs  
  • Enable/disable related and upsell products area  

Distraction-Free Checkout

↑ Back to top

From Appearance > Customize > WooCommerce > Checkout, you can enable distraction-free view on the checkout pages. It’ll remove the primary menu, header actions, footer, etc. so that customers can focus on the checkout process.  


From Appearance > Customize > Content > Blog, you can  

  • Show blog articles on 1, 2 or 3 columns  
  • Adjust horizontal and vertical spacing among blog articles  
  • Choose from image sizes to load in the post thumbnail  
  • Adjust excerpt length (summary text)  
  • Change CTA button text (
  • Show/hide post elements like post title, featured image, meta tags, excerpt, and CTA button  
  • Enable/disable blog pagination  

Single Post  

From Appearance > Customize > Content > Single Post, you can  

  • Show/hide post elements like post title, featured image, meta tags, and excerpt  
  • Enable/disable related posts and choose to show in 1 or 2 columns  


The Footer area has 3 parts: Footer Top, Footer Columns, and Footer Bar.  

From Appearance > Customize > Footer, you can  

  • Add social icons via the menu  
  • Upload footer-logo  
  • Upload image showing payment methods  
  • Add various widgets in columns and customize colors  
  • Edit footer copyright text and its color  
  • Enable scroll to top button and customize its sizes, icon size, and colors  

Edit Footer Copyright 

↑ Back to top

From Appearance > Customize > Footer > Footer Top, you can customize footer copyright text. You can use the string mentioned below in the copyright text editor to generate dynamic strings like the current year, your site’s link, etc.

  • {copyright}: Generates copyright icon
  • {site-title}: Generates site title text
  • {year}: Generates the current year
  • {theme-credit}: Generate Credit text to the theme author, ThemeGrill

Now, you can customize the way the copyright text appears by editing the content in the text editor. For example, if you want to remove the theme credit, you can simply remove the {theme-credit} text from the editor.

Child Theme

↑ Back to top

If you want to add your own custom code to the SkinCare theme, then the best way is to use a child theme. Read the article below and use the ready-made child theme for SkinCare:

A child theme allows you to change small aspects of your site’s appearance yet still preserve your theme’s look and functionality. It inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme.

Child Theme: WordPress Theme Developer Handbook


The most customizable eCommerce platform for building your online business.

  • 30-day money-back guarantee
  • Support teams across the world
  • Safe and secure online payment