How to Create Web Page Header Design in Flatsome Shop Page

The Flatsome theme comes with premade shop and product layout. This premade shop layout consists of essential shop elements like web page header design. But you may still want to give your shop page an eye-catching customized look.

Generally, you can’t open the shop page with the UX Builder as there is no customizable layout or blocks for additional design. But with a little customization, you can open your shop page in UX builder and create a fantastic and eye-catching shop web page header design with useful design elements. 

We’ve already covered how to customize a WooCommerce product page. Now, it’s time to create a shop page header with only 14- steps.

How to Create Shop Page Header with UX Builder in Flatsome Theme

Step 1: For editing the shop header, we need to create a new UX block. In the dashboard, hover on ‘UX Blocks’ and then click on ‘Add New.’ 

Step 2: Write the name of the UX block in the ‘Title’ field. You can choose any name you like. Inside the body, paste the shortcode given below. 

[ux_banner] Edit me [/ux_banner]

Now click on ‘Publish’ to finish creating the UX Block. 

Step 3: After publishing, you will see a shortcode for the block we just created. Copy the shortcode. You can also find other mobile-friendly WordPress themes that support shortcodes.

See also  How to Enable WordPress Facebook Login in Flatsome Theme

Step 4: In the top admin bar, hover on ‘Flatsome’ and click on ‘Theme Options”. Most of the free simple WordPress themes can be integrated with WooCommerce.

Step 5: You will be taken to the theme customization page. From there, click on ‘WooCommerce.’

Step 6: Now click on ‘Product Catalog.’

Step 7: Paste the UX Block shortcode we copied earlier into the ‘Shop Page Header’ section. After you pasted the shortcode, the ‘Shop Header’ block will be instantly visible right after the web page header design

Step 8: Click on ‘Publish’ to save the changes. After that, click on the ‘X’ icon at the top-left corner to exit from the theme customizer. 

Step 9: Go to the Dashboard, hover the pointer on your store name, and click on ‘Visit Store’ to open your shop page. 

Step 10: Hover on the ‘Shop Header’ section we just created and two options will popup. Click on ‘UX BUILDER’ to edit your shop header. 

Step 11: The shop header block will open in UX Builder. You can see that the banner we created earlier using shortcode in the shop header block is visible. From here, you can edit the shop header the way you want. For demonstration, we’ll add an image to the header section. To do that, click on the setting icon of the Banner, then click on the Options.

See also  How to Build a WooCommerce Order Form

Step 12: A new section will appear on the left. You can custom the Banner from here. Under the title, Background, click on the Select media, and upload the image you want to add.

Step 13: After adding the image, click on the Apply button on the left bottom of the page. 

Step 14: Click on the Update button to apply this to your main site. It’ll immediately add the customization you’ve applied. 

Final Preview: After creating the shop page header, your web page header design will look like this. 


Following the steps shown above, you can create an amazing and functional shop header for your shop page in the Flatsome theme. You can include a nice banner, buttons, breadcrumbs, and many other elements into the shop header to make it look beautiful.

We hope this tutorial will guide you well in the process of decorating your shop page. Follow WPCred for more awesome tutorials like this! Feel free to check out our tutorial on how to add payment option icons to the footer in the Flatsome-powered website for more insight about development with the Flatsome theme.

Subscribe To Our Newsletter!
Hi, I’m Mohamed. I share delicious recipes that I have cooked and loved. I’ve been food blogging for over 10 years and have a Diploma in Nutrition. You will find many healthy recipes as well as my favourite comfort food on the blog because I believe in a balanced diet.

Related Posts

Fintech’s biggest hits and misses of 2023

As 2023 comes to a close, we’re here to look back at the biggest fintech stories of the year. Silicon Valley Bank’s implosion felt like a fintech…

It’s critical to regulate AI within the multi-trillion-dollar API economy

Alex Akimov Contributor With two decades of tech leadership experience, Alex Akimov, former head of API at Adyen, now revolutionizes embedded finance at Monite by building best-in-class…

EU’s provisional deal on gig worker rights fails to get enough backing from Member States

Not so fast on that Christmas present for precarious gig workers in the EU: A political deal announced mid month, which aims to bolster platform workers rights…

Arduino exploring India manufacturing to limit counterfeit sales

Arduino is considering manufacturing in India. The startup, best known for its open source microcontroller boards, hopes to restrict the rise of counterfeit boards and cater to…

Top robotics names discuss humanoids, generative AI and more

Last month, I took an extended break. In a bid to keep my robotics newsletter Actuator (subscribe here) up and running, however, I reached out to some…

Pornhub owner pays US government $1.8M to resolve sex trafficking probe

Pornhub’s parent company Aylo Holdings will pay $1.8 million to the U.S. government to resolve a charge of profiting off of sex trafficking. The company, formerly known…