Home » BLOG » WordPress » How to set up Flower shop with Elementor Pro – Part 3

How to set up Flower shop with Elementor Pro – Part 3

category:  WordPress

In Part 2, we set our theme style across our site. In this Part 3, we will do the custom shop page using Theme builder from Elementor Pro.

In this post, we will work with Theme Builder only. At the end, your Theme Builder will have 3 templates. We already created the New Shop Page template from Part 1.

shoppage template
3 templates from Theme Builder

Change the shop page with Theme builder

In Part 2, we have the result after setting the theme style as shown below.

flower shop set theme style
Default Hello theme with custom theme style from Part 2

In Part 3, we will change the shop page by adding some new widgets and remove some. To do that, we navigate to Templates>Theme Builder>New Shop Page which we created in Part 1. Then click on “Edit with Elementor“. 

You can play around and change the layout by drag and drop the widgets as you like. The editor is the same as Content editor by Elementor for pages and posts.

Create new header template

With Elementor Pro, we can create our own header template. So you can add the logo, menu, search and more by using Elementor editor. To do that, we will use Theme builder.

  • Navigate to Templates>Theme Builder
  • Select Header tab
  • Click on “Add New Header” button
  • Choose Header and give your template name then click on “Create Template” button.
  • Pick one of the pre-build header blocks from Elementor library then insert it.

Now you have the pre-built header block you choose. You can edit the template by widgets you like.

When you are happy with the result, you will click on Publish button. Then you will need to add conditions for displaying your header template. So click on “ADD CONDITION” button. And select Entire Site. Finally, click on “Save & Close” button.

Create new footer template

We do the same thing with footer template. We will create our own footer template by theme builder.

  • Navigate to Templates>Theme Builder
  • Select Footer tab
  • Click on “Add New Footer” button
  • Choose Footer and give your template name then click on “Create Template” button.
  • Pick one of the pre-build footer blocks from Elementor library then insert it.

Now you have the pre-built footer block you choose. You can edit the template by widgets you like.

When you are happy with the result, you will click on Publish button and add condition as Entire site which is same as header template we do earlier.

Final result for my shop page

Below is my final result from my shop page including header and footer. You will be different. But you will get the idea how to use Theme builder to create the custom templates for your website.

custom flower shop
Custom templates

Summary

In Part 3, we edit the custom shop page via Theme Builder from Elementor Pro. Also, we create new header template and footer template by Theme Builder. Once you understand how to use Theme Builder from Elementor Pro, you will love it. In Part 4, we will create the product attributes and variations (ribbon, wrapping paper, gift card) for building the bouquet by the buyers.