You can easily replicate the theme screenshot (as shown below) with only free version of Suki. Please follow the steps below:
1. WooCommerce products
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 4 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.
2. 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.
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.
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.
3. Header Style
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”.
** You might need to setup the mobile header as well.
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.
5. 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 Pexels.
6. 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.
Done! You can visit your site to check the result.