When it comes to promoting a product online, a well-designed landing page can make all the difference for the success of your store. With the Product Sales template, you can tell a beautiful product story playing around with colors and visuals.
In this article, you'll learn how to customize a landing page built with the Product Sales template:
Since the above-the-fold screen is the first thing your visitors see when they arrive at your landing page, it has to stand out. Use the color pickers to create a beautiful linear gradient background color. Hover over the section and click the gear icon.
Hover over the default image to replace it with your own. The picture that comes with the demo content has a transparent background but you can upload any image. Add a shadow if necessary in the Hero section settings.
Edit the demo heading: add your own words and use the inline text editor to style them.
The button anchors to the product details section below. In other words, your visitors will be brought to the product details area when click this button. Hover over the button element to edit it. Adjust the default colors and wording. You can remove it if necessary.
Below the button, there's the star rating element. Think of this element as an average product rating. Use the color pickers to find the perfect colors and the stepper element to manage the number. You can remove the average rating count by disabling the corresponding option. If you don't need this section at all, click the trash icon to delete it from the page.
Product details section
This section shows your product details: product title, a short description, image gallery, attributes, prices, bulk discounts, and the Add to cart button.
Image gallery, attributes, and prices cannot be edited with the drag-and-drop builder. To make changes to your product, please go to your WP admin area → Products.
Here's what you can edit using the Landing Pages builder:
Product title. Use the corresponding field to make changes to your product name. Feel free to change the default black color as well.
Short description. This short phrase can be found above your product title and can be anything you want.
Description. In the text area, add your own copy that describes your product. This text area is code-friendly, so you can go ahead and add tags.
Colors. Use the corresponding color pickers to create the right look and feel for your product details section.
Additional information. Below the Add to cart button, you'll find some shipping and refunds details. Change the default text or remove it.
With this template, you can show your visitors a sticky 'Add to cart' button not only on mobile, but also on the desktop version of your landing page. Use the Enable sticky 'Add to cart' button option.
Customizing description sections
With each description block, you can easily change section background color.
Hover over a section and click the settings icon. Use the color picker to adjust the default background color to your liking.
Highlight a piece of text you'd like to edit. Use the inline text editor to change text color, font size, make it bold, etc.
You can add new content elements to your sections. To do so, open the CONTENT tab, click and hold an element, drag it to your section. Release your mouse to drop it.
To replace one of the default images, click the settings icon. Use the Replace button to call the Media window. Choose another image and click the Select button.
Below your description sections you'll find the customer reviews area. By default, this area looks like this:
Heading. Feel free to change the default wording and use the inline text editor to play with the default styling.
Description text. Here's where you can add some more details about your product reviews. Our text elements are emoji-friendly, so give it a try!
The Featured Review element. This element has a prominent look so think of it as the most important review on the page. The featured review element is customized manually. You can change pretty much everything about it: upload a new customer photo, edit the default name, write your own text in the review body area, and change the background color.
Product reviews. These are imported automatically from your single product page. To edit these reviews, delete them, or add new testimonials, please go to your single product page settings.
In the Footer area, there are links to your utility pages that open in a pop-up window:
Terms and Conditions
Returns and Refunds
To edit content of these pages, please go to your WP admin area → Pages.
To show or hide the currency switcher element, go to the CURRENCY SWITCHER tab. Enable or disable the corresponding option.
To learn more about your WP settings, please check out this guide.