1. Home
  2. Docs
  3. Getting Started
  4. Replicating Theme Screenshot

Replicating Theme Screenshot

You can easily replicate the theme screenshot (as shown below) with only free version of Suki. Please follow the steps below:


Install WooCommerce and add some products (optional)

As in the screenshot, we see some eCommerce functionality, like shopping cart in the header and products grid in the content section. Those features require WooCommerce plugin and at least 3 products created (just like in the screenshot).

It is totally optional, you can still get the same design (as in the screenshot) without any eCommerce functionality. But of course, there won’t be shopping cart in the header and products grid in the content section without WooCommerce.


Set the front page

By default, your front page will show your latest blog posts feed. We want to display custom contents on the front page, so you need to create a static page and set it as your front page.

Create a static page on your Dashboard by going to Pages > Add New. Name the page to anything you wish. In the screenshot, I use “Build beautiful websites with Suki” and publish the page. We will leave the content empty for now.

After that, go to Settings > Reading and set the “Front page displays” option to “A static page”. Choose your newly created page in the select page and save the settings.


Customize Header

Go to Appearance > Customize from your Dashboard and browse into Header section. A panel at the bottom will show us the Header Builder. Please arrange the header elements like this:

  • Main – Left: Logo.
  • Main – Right: Menu 1, Cart Dropdown, Search Dropdown.

And then go to Main Bar section to change the section Layout to “Full width content with side padding”.

** You might need to setup the mobile header as well.


Upload Logo

Go to Header > Element: Logo and upload your logo. If you want to use SVG format for your logo, please learn how to upload SVG logo in this article.

** You might want to setup the mobile header logo as well.


Customize Page Header

Still in the Customizer, go to Page Header (Title Bar) section. And check the Enable Page Header option to enable the big hero image section as in the screenshot.

Set the top and bottom padding to something around 250px (you can adjust this value as you see fit) and also upload a default background image for the Page Header. For the screenshot, we use the image from Pixabay.


Create Header Menu

After done with the Customizer, now let’s create the header menu. Please follow the “Setting menu” tutorial to setup the header menu.


Create the front page

Final step is to edit your page content. Go to Pages from your Dashboard and edit the front page you have created before. You can put any content in the page. In the screenshot, we use a heading and WooCommerce products grid shortcode. You can read more about available WooCommerce shortcodes here.


Done! You can visit your site to check the result.