How to set up Flower shop with Elementor Pro - Part 3 | Apple Rinquest

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.

Table of Contents

Change the shop page with Theme builder

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

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.

Woocommerce configuration For Elementor Pro, you can configure the Woocommerce layout and content display at Appearance>Customize>Woocommerce.

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 the Elementor editor. To do that, we will use Theme builder.

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

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

Add New Menu You can create a new menu by navigate to Appearance>Menus. At the Menus page, create Menu and add the menu items to the menu you create.

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.

Summary

In Part 3, we edit the custom shop page via Theme Builder from Elementor Pro. Also, we create a 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 for the buyers.

Tutorial on how to set up a flower shop with Elementor Pro