How To Create Your Own Netflix-Like Website With WpStream
With the VOD industry booming and becoming more popular among content producers and consumers alike, the way we perceive and enjoy video content has changed too. Original content creators are making a shift and moving away from the giant VOD providers such as YouTube or Vimeo due to various reasons. This article is a tutorial on how to create your own Netflix-like WordPress website.
You will have to follow our previous guide on installing the theme and importing demo content to the letter before continuing with this guide. The complete guide can be found HERE. When importing the demo content, make sure you import the Hollywood Demo, focused on Videos On Demand, and not the GoLive Demo, which is built around live sports streaming.
WpStream “Hollywood” Demo Features & How To Build Them
Building your Netflix-like homepage is really easy to do with the WpStream platform. Let’s take a quick look at our “Hollywood” demo and see all the different elements from the homepage.
1. Header Slider
Adding a Header Slider
To add a header slider, simply edit your home page with WpBakery and then go down to “Appearance Options”. Here you will have to select “Theme Slider” from the “Select Header Type” dropdown.
You can also edit the Theme slider from Theme options:
2. Recent Items
Adding Recent Items
To add recent items to your home page, simply edit the page with WpBakery and add the recent items shortcode:
You can also edit the recent items shortcode and select what type of items or products you want to display by category, actors, ratings, as well as the number of items you wish to display:
3. Call To Action
Adding a Call To Action
To add a similar call to action on your homepage, you will first have to add a new column and go to Design options. Here you will have to add a background image for your column:
Next, you will have to add a text block to your column. Extra appearance details can be added to the text block from the text editor:
Here is our text block code for reference: <h2 style=”text-align: center; font-size: 50px;”><span style=”color: #ccffff;”><strong>See The Best Movies & Tv Series</strong></span></h2>
Now it’s time to add our sub-heading. Use the custom heading shortcode to do it:
To finish off, simply add a button to your call to action segment:
4. Featured Products
Adding Featured Products
To add featured products, you will have to edit the column width and keep the heading as full width but divide the second row into three equal columns:
Then you will have to add featured product shortcodes:
In the end, you will have three featured product shortcodes on the same row, with a custom heading shortcode above:
5. Product Slider
Adding a Product Slider
To add a product slider with a custom heading, you will have to first add a custom heading shortcode:
Then, you will have to add the recent items slider shortcode:
You will also be able to set which types of products will be displayed, the number of products or products from different categories:
6. Featured Article
Adding a Featured Article
Adding a featured article is done with the featured article shortcode:
You can also add a custom heading before your featured article. The featured article needs to be set by name, not by page ID, as shown below:
7. Featured Product Type 2
Adding Featured Product Type 2
Adding a full width featured product can be done with the featured product shortcode:
After adding the product, you will have to add a product ID, set design type to “2” and add a background image:
8. Category Slider
Adding a Category Slider
Adding the category slider is done much in the same way as a product slider. Search for the category slider shortcode and add it to the home page:
You will have to add the category IDs you want to be displayed, as well as the number of categories to display per row:
9. Recent Blog Articles
Adding Recent Blog Articles
Recent articles are added with the recent items shortcode:
But instead of products, we will switch it to display articles:
You can also set the number of items to display.
Setting Up Your Subscription Model
Now that you have your homepage looking just the way you want it to, it’s time to make your subscription settings. We will begin by going to the WordPress dashboard, then theme settings, and finally subscription model:
Above we can see a set of instructions, 1 to 4 and the option to “use global subscriptions”. We will set this to “On”. Under it, we have the option to select our subscription but no options are available at the moment. Let’s add a simple subscription product by going to “Products” and then clicking “Add New”.
On the new product page, go to the “Product Data” dropdown and select “Simple Subscription” from the list. You will also have to add a price and the length of the subscription. Under “is a subscription based live channel” select “No”. You will not be required to select a video file at this point. Add any other details you want for your product (including a name), then hit “Publish”.
Let’s go back to theme options and check if we can select a subscription:
We can select the subscription we just created. Now users will have to pay a fee to get access to all the content on our website.
Subscription – User POV
Now that we have our videos in place and our subscription set, let’s see how it looks from the user’s perspective.
When viewing the product page, we will see a notice saying that we need to login to our account before being able to actually see the subscription-based video.
After logging in, a notice appears that we are not currently a subscriber. Let’s click on “Join Now”.
After clicking “Join Now” we will be redirected to the cart page which displays the subscription we are about to buy and different details such as subscription length and when we will be required to renew it. Let’s click on “Proceed to Checkout”.
Users will have to add their billing details on this page and choose a method of payment.
After filling in the details, simply click on “Sign Up Now”.
After that, the user will receive a confirmation that his order has been placed.
Let’s go back to the video we were trying to watch previously. We are now able to see it, and every other video on the website.
The WpStream Platform offers content creators plenty of flexibility when building, managing and customizing their website. With full WooCommerce integration, monetizing your videos on demand is easier than ever before.