Effective product pages immediately convey the value of your featured products. They show shoppers what the product looks like, tells them what it feel like and make them believe it’s something they absolutely need to own. Display a well-structured products page with all your discounts on offer and well thought-out color schemes, and you’ll be hooking clients and making sales in no time.
1. Go to Smarketly Sections
2. Click on Add Content
3. Click ADD on Product Offers
4. Choose whether to position your Product Offers below the content, above the content, or above the footer
5. On Main Display Settings , click on Select collection and choose the selection you want to display
6. Click Select Product to choose the product to display
7. Choose the product and click Select
8. You have the choice to change the Top Offset to “None, Small, or Normal”
9. Choose to either tick or un-tick the Fullwidth Container
10. Toggle the ‘Rounded Corners’ bar to fit your preferred px
11. Choose to place the Offer position in the ‘Left, Center, Right, Space around, Evenly spaced, Space between
12. In the Layout sizes desktop you have the option to customize a range of features by toggling the bar to a specific pixel, from the:
• Distance between products
• Product padding
• Offset of items inside product box
13. At the top of the page, switch to the Mobile viewing and make the same changes in the following Layout sizes mobile to customize a range of features by toggling the bar to a specific pixel, from the:
• Distance between products mobile
• Product padding mobile
• Offset of items inside product box mobile
14. Switch back to desktop viewing and edit the Button behavior by choosing between the option to make it:
• Go to the Products Page
• Add to cart
• Add to cart & continue to cart page
• Custom URL
• Add to cart & go to Custom URL
• Add to cart & continue to Checkout
15. Enter text for the Button custom URL, then select a Button size to Scale to text, or Full width
16. Customize your page by choosing to either show or disable the best offer by ticking or un-ticking the box, then select the number of products to include in the best offer from 1 to 4.
17. Select the ideal Best offer size by increasing it to your chosen pixel size for both desktop and mobile viewing.
18. Select or deselect the Best offer increase product image size
19. Enter text for the Best offer title and the Best offer label that’ll be displayed, then choose to either show or hide best offer title on mobile view and edit the best offer title text color and best offer label color
20. Change the best offer style to stylish or simple, then shift the best offer label position to the right, left or center.
21. Under the Button Styles, change the button color, the button text color, button hover color, or the hover text color.
22. Under the Best Offer Button Styles, choose the best offer button cover, best offer button text color, best offer button hover color, and the best offer button hover text color.
23. Slide the knob across the bar to fit your preferred pixels for the border size desktop, border size mobile.
24. Change the border style to solid,
25. Choose to either select or disable using a background color, then select a background color, and slide to the preferred background padding desktop and background padding mobile pixel
26. Choose to either select or disable adding a shadow to blocks, then choose a preferred shadow color, then select a shadow position horizontal px, and shadow position vertical px from 1 to 5, then select an ideal shadow size.
27. Under Desktop texts size, toggle the bar to an ideal px size for desktop viewing for:
• Text above name font size
• Text above name line height
• Text above name font weight
• Product name font size
• Product name line height
• Product name font weight
• Button font size
• Button line height
• Button font weight
• Text above button font size
• Text above button line height
• Text above button font weight
• Button font size
• Button line height
• Button font weight
• Additional text font size
• Additional line height
• Additional font weight
• Best offer title font size
• Best offer title line height
• Best offer title font weight
Do the same for mobile viewing
28. Enabling viewing for all your products by clicking on the “eye” icon, then select one product and choose the product to display by ticking next to the product, and repeat for the various products, editing the product specification like the text above product name, button text, text above button, and the additional text under the button.
29. Specify the product quantity to sell, then enable or disable use of the Discount code (which means the discount code will automatically be applied when the button is clicked). Edit the text for the discount promo to show what discount is on offer.
30. Change the discount type to percentage, then type in the specific value on offer. Tick or disable the Add offer label which overrides any previous offer label for this offer, and type in the text for the offer label. Choose an offer label color, and offer label text color.
31. Customize the background to either use or disable the background color, select or deselect the Override main colors box, then choose a specific color for the:
• product background
• text above product name
• text above button
• product new price
• product old price
• button
• button text
• button hover
• button hover text
• additional text color
It’s important to remember to keep your products page to the point and informative. Give enough information to intrigue your visitors, without overloading them with information which is likely to give an opposite effect, i.e. turn them away.