Thrive Themes Tutorial

Thrive ShapeShift Theme – Stunning Design In 45 Minutes

 February 19, 2020

By  Peter Nyiri

The Shapeshift Theme is the companion of the just released Thrive Theme Builder. It is designed to look amazing, so you can sculpt it into the website you’ve always wanted. It’s ready to be ‘shapeshifted’ by you.

The perfect Combination of Total Control, Stunning Design, & Rapid Site Building – WordPress Will Never Feel The Same

With Shapeshift, you’ll have your first custom (and beautiful) conversion-centric WordPress site up and running in an hour or less, with the use of Thrive Theme Builder (read the detailed review).

(This post contains affiliate links. This means I get a commission if you make a purchase through my links. There is no additional cost to you, but it enables me to provide you information like this for free. Please read my disclosure for more info.)

Things You Will Need

This is what you’ll need in order to make this as smooth of a process as possible:

  • ShapeShift Theme is currently only available as part of your Thrive Themes Membership. (I have a full review of what’s included)
  • Your logo, preferably in PNG format with a transparent background because that looks best.
  • The hex code of your site branding colors. (Hashtag and  six numbers or letters.)
  • A favicon which is the little picture that shows on a tab.
  • Custom fonts or specific font size that you want.

It is best to change the look of your site step by step, i. e. choose an updated layout rather than a completely new one for the default blog post. This way your old blog posts will look like an updated version, but nicer. The reason to do this is to avoid to have blurry images or messed up content.

And for your new content, you can make a template that looks the way you want it to.

Note: You can see the demo version of ShapeShift here and FunnelXpert is also being switched over to it.

Setting Up Thrive ShapeShift Theme

So first of all, let’s go go to your plugins, find the Thrive Product Manager and make sure that it is up to date.

Now go to the product manager and install Thrive Architect and select the Thrive Theme Builder themes.

When your products are installed, you will see “Go to the Theme Builder Dashboard”.

As you can see, you have this nice setup wizard that will help you to create your website. So let’s get started.

theme builder setup wizard

Step 1 – Upload your logo

In your media library, if you already have your logo, just search for it and select it. You get the opportunity to upload a light and a dark version, depending on the background.

Step 2 – Choose a header

We can just use the arrows to change headers or you can see all the headers that are available by clicking on the menu. If you have a white logo, you will want a dark header. You can also choose one that has a call to action.

choosing a header

Step 3 – Select a footer

You have so many more options than in your original website for your footer. You can already see all the different possibilities.

select a footer

You can have a contact form in your footer, you can have lead generation form in there, you can have your social buttons. Everything that you would like to have in your footer is possible.

Step 4 – Choose a homepage

If you had an old theme-generated homepage, then that home page may not look really well because of the shortcodes. So you’ll want to choose a new homepage.

choose a home page

You can actually choose from one of the ready-made pre-designed homepages.

Display one of existing pages – If you have a home page, maybe that you’re made in Thrive Architect or that you created in the WordPress editor that you’re actually really happy with, you can still display that page and it will keep your header and footer that you just selected.

Or you can display your blog list, which will give you your latest blog posts. This is not something that we consider good practice if your website is not just a magazine website.

You can see that here we have some really nicely designed homepages and they will fit different purposes.

homepage templates

We have the personal branding homepage.

Then we have some service business focused homepage if you are offering your services, if you’re a local business.

There  is also a content focused website. If you have a blog website, then you can use one of these.

Step 5 – Single Blog Posts

You can choose from different templates:

single blog post

Some have a sidebar, some don’t, some have full-width featured image, while others have a narrow one.

Step 6 – The blog post list

You don’t necessarily need to keep this like your old blog list, you can pick different layouts, with or without sidebar.

blog post list

Step 7 – Default page

We can pick a default page that is pretty basic because in Theme Builder, we can easily create other versions of this.

simple page type

So having just a title banner or maybe even a boxed page could be something that really fits your site.

Maybe you prefer full width, then a sidebar, call to action.

And last but not least, we can actually choose the menu that will show up. So let’s go with our primary menu, because that was the one that we had in our header in Step 1.

If you have a look at the website now, it already looks pretty good.

You have your homepage, the blog posts list, and individual blog posts. Of course there are some things that we want to tweak and I’ll show you how to do that.

The first thing we’ll want to do after having gone through the wizard is add our brand color and maybe our favicon in the branding tab.

brand colors

TTB uses smart colors in the theme. This means that by changing one color, like blue to pink in the above example, you actually change a whole bunch of things on your website and that they will all match that one branding color.

So for example, this pink changes, things like the Call to Action, the links, the Subscribe To The Newsletter and your home page colors.

The homepage that was all blue focused before is now nicely replaced with different tints of this pink. And it is made to look good with the different colors.

home page colors

Now if you don’t want a blue, orange or pink websites, absolutely no problem, just click on the color picker and use your hex codes.

This changes the different parts of your website. So even like you the hover color, it’s, it’s really everywhere. That makes it super easy.

I already mentioned the dark and light versions of your logo, therefore let’s go to Favicons. If you have your favicon ready, you can just upload it here. Use a favicon generator.


What about fonts? Let’s change our fonts in the Typography tab. And here you can see the fonts that the designers chose to work best with this template.

Typography tab

But of course if you want to change it, just click on Edit. This will open a new tab that you might recognize from Thrive Architect. And let’s say that maybe your headings, you want them to be Lato instead of Literata. You can change them with one click.

Maybe you don’t want your headings to be bold. You can easily change the text of all your headings or you can click on one specifically and change it. You can do the same with text.

And you can also go into tablet mode and mobile to immediately change your fonts there.

So let’s say that your Heading 1 is 28 on mobile and it is 40 on desktop. Maybe you want these to be a little bit smaller. So instead of 28, you can make it 24. And you can really change this exactly the way you wanted to look on all of the screen sizes.

Making Changes Through Templates

In the Templates tab you have core templates. These are the templates for your different elements on your page.

There is a default post, default error page, a default page, default video posts, audio post, and then you have default list pages. And then your blog list and the archive list.

And you also have all of your templates. If you want to see all of them, you can see there are 33 different ones that are actually available.

These were the ones that you saw in the wizard you could choose from. They are still here. They are just not set as your default template. These won’t show on your website unless you pick them specifically.

Customizing ShapeShift Theme

The above was the description of how to set up ShapeShift.

Further customization and editing is covered in the Thrive Theme Builder tutorial.

Sign up for your Thrive Themes Membership and build a conversion-focused website!

Peter Nyiri

Peter Nyiri

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}