The Handmade product template is a template dedicated to provide details about a product. It sheds light into a specific product or product chain that you want to grow sales on.
All PageFly templates are responsive by nature. To check its mobile design, switch the Device type to Mobile.
The Handmade product template includes 1 hero section, 2 featured product sections, 6 complex sections, 1 video sections and 1 icon section. Let’s look into each type once.
To change the image background, choose the section > Styling tan > Background > change the source in Image.
Remember to set the option for Position, Repeat, and Size.
To edit the height of the section, stay in Styling tab > scroll to Background > edit top and bottom padding.
Select the text on the section > General tab, to edit the content > Styling tab, to stylize the text.
To left-align the text, choose the “left” icon” under Alignment.
When you edit the descriptive text below, notice its margin of “32%” on both sides. Remove it if you want to move the text.
The next section includes a Featured product element.
To import a product, go to General tab > Settings > select product.
You can change the options under Displays to fit your intent.
To add style to the Featured Product element, switch to Styling tab and choose Styling for Product, Title, Price or Button.
Keep it simple and don’t overlap styles onto each other.
This section includes a row with 2 equal columns. You can see the settings in the General tab > Settings.
To add more column to the row, select Add Column > slide the Columns option to a bigger number.
If you want a row with unequal columns instead, first, select Row > General tab > slide the Columns option to “0”/“auto”.
Then, choose a column inside the row > General tab > Column width > slide the Any Device option to a number x < 12.
Next, choose the other column in the row, repeat till slide the Any Device option to a number = (12 -x).
Learn more about how to specify row and column.
In the example, we have 2 columns 3-9 side by side.
To change the image, select the Image element > General tab > Content > change the source under Image.
The section with video has padding on top and bottom. You can edit them by going to Styling tab > Box Styles > Padding.
Important: When a fixed value is set in All view, it will be applied to all other views (tablet and mobile) and makes the design not responsive by default anymore. Scroll down to learn how to fix this.
To change the video, go to General tab > Content > change the source under Youtube Video URL.
You can set a video cover and change other settings in this tab too.
The last section with payment icons can increase credibility for the page.
With Icon element, in the General tab, you can choose the icon shape, color and size.