How to Replicate the Astra Screenshot?

This article describes steps to replicate Astra screenshot that displays on

Just for the reference, here is the screenshot –

Required plugins –

  1. Home Page Banner for Astra Theme
  2. WooCommerce

To get started, create a new page and set it as a Homepage. The settings can be found under Appearance > Customize > Homepage Settings > A static page > Homepage. Select a newly created page from the drop-down. 

Now, you can design screenshot in three sections –

  • Header
  • Banner
  • Page content


This section contains the logo, navigation menu and Woocommrece mini cart at the end of the menu.

Add Logo

Step 1 – From the WordPress dashboard,  navigate to Appearance > Customize > Site Identity.
Step 2 – Upload normal logo and retina logo. You can upload and use an image from the media library.
Step 3 – Adjust the Logo Width.


Add Navigation Menu

Create a menu and assign it as a Primary Menu. A setting can be found under Menus tab in the customizer.

Add WooCommrece Mini Cart Icon

This option needs WooCommrece plugin installed and activated.

Step 1 – In the customizer navigate to Layout > Primary Header > Custom Menu Item.

Step 2 – Select WooCommerece from the drop-down.


To design a banner, Home Page Banner for Astra Theme plugin needs to be installed and activated.

Step 1 – In the customizer, open Home Page Banner tab.
Step 2 – Under Content tab, add Banner Image, Heading and Subheading. Adjust the Image Size and Top/Bottom Padding.

Step 3 – To set typography and color for Style heading and subheading, navigate to Style tab under Home Page Banner.

Page content

Create a new page and use a WooCommrece shortcode to display products with a particular category.

Not the solution you are looking for? Check other articles, or open a support ticket.