All Collections
Themes
Customizing the Smart Theme Woo
Customizing the Smart Theme Woo
Yaroslav avatar
Written by Yaroslav
Updated over a week ago

In the Smart Theme, you'll find production-ready sections that have up to 5 carefully designed and thoroughly tested variants to choose from:

  • Header

  • Footer

  • Homepage products

  • Single product page

  • Category page menu

  • Mobile menu

You can easily switch to a different section layout in case you want to check which one converts better or give your website a fresh look.

THEME INSTALLATION

Once you've downloaded the theme, enter your WordPress panel and go to Appearance → Themes → Add New → Upload Theme.

Click Upload Theme to upload the zip file you've downloaded. Install the theme.

Click Activate to continue.

Go to the Smart Theme tab to activate your theme license key.

Once you've seen the confirmation notification, click the Smart Theme tab in your WP dashboard one more time. You'll be redirected to the General tab. It's time to get started!

To install demo content (pages, WooCommerce categories, menus and plugins), go to your Dashboard → Smart Theme → General.


On the left-hand side of the page there is 'Install plugins' block where you can find the list of required and recommended plugins. Plugins you have already installed are marked as 'Active'. Check or uncheck items if necessary.

A child theme can be installed in the Install Child Theme section. Give it another name or leave as it is and press the Install Child button.

Proceed to Install demo to create demo content. Use the toggle switches so that demo content suits your needs.

You will find more settings in the Single Product Page tab.

Here you can rename product tabs or disable them. Feel free to edit the default content.

In the WooCommerce tab, check Use side Shopping cart to use both Cart page and side Cart on your website.

Go to the Service Pages tab to edit your 404 page.

Go to the Additional tab to add you custom code.

CUSTOMIZATION

To adjust theme customization settings to your needs and modify your website appearance, go to Dashboard → Appearance → Customize.

Click on pencil icons to edit specific elements.


HEADER

LOGO & SITE IDENTITY

Upload your logo and favicon and add site title.

ACCOUNT

Use the Account checkbox to hide the Log in link in your website header.

HEADER SETTINGS

In the Header Type section, you can choose a header variant that will be used for the desktop version of your website. Manage sticky header behavior and color your shopping cart icon.

Next, customize the search box: edit search box placehoder and adjust color settings.

Use the colorpicker to find the right hover color for menu items .

MOBILE MENU

In the controls panel, click on the mobile icon to see how the mobile menu you've chosen looks on mobile. Please note that Header Type #3 uses its own mobile menu.

FRONT PAGE

Go to Front Page → Slider to manage your slider settings. First, select the slider type that suits your website best.

For each banner you can upload images for desktop and mobile versions of your website, add text and links, change buttons color and show additional buttons such as View video. Use the Add new slide button to add more banners.

Each banner has its own set of settings. Here you can manage your text, colors, fonts, etc.

HOMEPAGE CATEGORIES

On your front page you can show certain product categories to draw more attention to. Choose from the three available layouts and adjust this block to your needs.

In your Products → Categories, check the Show on front page option and upload an image (recommended size: 620*620px). You can choose up to 8 product categories to display on your front page.

Go back to the Customizer. In the Product Categories Settings section, you'll find more options.

Style your heading: feel free to use bold and/or italics and make all letters capital. In the dropdown menu, select the alignment.

On the category image, you can show not only category name but also how many items there are in each category. Use the corresponding checkboxes to enable or disable these options.

Scroll down a bit to see more customization options. Use the Text color color picker to select the right hue for your category name. With the segmented controls, adjust text position.

Use the slider element to select the desired number of categories from the available range.

With the first layout option, there is an option to transform square category images into round ones using the Border radius slider element.

The second layout shows vertical images. There are two color pickers available (Background color and Text color) to customize your category plates with. The Border radius slider element rounds plate corners.

The third option offers a grid layout which looks differently depending on how many categories there are on your front page.

HOMEPAGE PRODUCTS

At the top of the Products section, you can manage blocks visibility and order of appearance using the blue panels.

These blocks are formed automatically (except for featured products). There are four of them available on your Homepage:

  • Top Selling – products ordered most often (that have the biggest number of orders)

  • On Sale – random items on sale

  • New Arrivals – most recent product

  • We Recommend – featured products you marked with a star in your WP

With the help of checkboxes, you can adjust style of the heading.

You can choose different looks for different product blocks. Use the Block layout icons to display your items in a grid or in a row.

Mark products with a star in your WP admin area to show them in the Featured Products block.

HOMEPAGE ARTICLE

Close the Customizer dashboard. You'll see the Edit link. Click this link to make changes to your Homepage article.

INSTAGRAM FEED

Add your Instagram username and access code to display your feed. Please refer to this guide to learn how to get your access code.

FOOTER

Scroll down the page to find the footer settings. Here you can choose your footer layout, manage color settings, edit the default copyright notice, and adjust the back to top button.

SHOP (WOOCOMMERCE)

PRODUCT CATALOG (THEME SETTINGS)

There are three category menu layouts to choose from. This menu can be managed in your WP Dashboard → Appearance → Widgets.

Select how many products to display per row on tablet and mobile. The desktop version is controlled by WooCommerce (Shop (WooCommerce) → Product Catalog)

Use the checkboxes in the Pagination section to manage your paging on Category page: you can use either paging or navigation buttons. Check both options to use both methods.

PRODUCT SETTINGS

In the Product Settings tab, you can find the right color for sale price, choose a sale badge type, and adjust rating settings. By default, products without rating have 4.5 stars.

PRODUCT PAGE

The theme offers 5 layout options for Single Product Page.

Expand the Benefits options to edit the default text and icons.

Page layout, color, quantity, and rating options depend on the page type you choose. Please note side gallery styles are applicable to Page types #1, #2, #3.

Scroll down the page to find the Customer Reviews block settings.

At the bottom of the page, you'll see the Additional Products settings.

WIDGETS

The theme offers a few widget areas. Typically they're used for menus and filters. Go to Appearance → Widgets to manage them.

Did this answer your question?