How to Create an Advanced Product Page on Your Blogger Website
Creating an advanced product page on your Blogger website can significantly enhance your online store's appearance and functionality, leading to higher customer engagement and increased sales. This guide will walk you through the process of designing and optimizing a sophisticated product page that stands out.
An advanced product page is more than just a place to display your products. It's a comprehensive showcase that highlights your offerings, provides detailed information, and encourages customers to make a purchase. In this guide, you'll learn how to create a high-quality product page on your Blogger website.
What is a Product Page?
A product page is a critical element of any e-commerce website or online marketplace. It serves as a dedicated space where businesses can showcase individual products or services to potential customers. Essentially, a product page is like a digital storefront for your offerings, providing detailed information, images, and sometimes even multimedia content to help customers make informed purchasing decisions.
Here's a closer look at the key components that make up a typical product page:
- Product Title: The product's name is prominently displayed at the top of the page. It should be clear, descriptive, and concise, giving visitors an immediate understanding of what the product is.
- Product Images: High-quality images are essential. They provide visual context and allow customers to see the product from different angles. In some cases, you may find 360-degree views or videos showcasing the product in action.
- Product Description: This section provides a detailed written description of the product. It should include information about the product's features, specifications, benefits, and any unique selling points. Be sure to use persuasive language that addresses the needs and desires of your target audience.
- Pricing Information: Clearly state the price of the product, including any discounts or special offers. If applicable, provide options for different product variations or packages.
- Add to Cart or Buy Now Button: A prominent call-to-action button allows customers to add the product to their cart or make an immediate purchase. This button is crucial for driving conversions.
- Customer Reviews and Ratings: If available, showcase customer feedback and ratings. Positive reviews can build trust and credibility, while negative reviews can provide insights for improvement.
- Product Availability: Inform customers about the product's availability status. Let them know if it's in stock, on backorder, or out of stock. This transparency helps manage customer expectations.
- Shipping and Delivery Information: Provide estimated delivery times and shipping options. Be clear about any shipping costs or minimum order requirements.
- Return and Refund Policy: Clearly outline your return and refund policy. This builds trust and reassures customers that they can shop with confidence.
- Related Products: Suggest related or complementary products to encourage upselling and cross-selling.
- FAQs: Address common questions that customers might have about the product. This can help reduce customer inquiries and improve the overall shopping experience.
- Social Sharing Buttons: Allow customers to easily share the product with their social networks, increasing its visibility.
A well-designed product page is not just a static listing; it's a persuasive sales tool. It should engage visitors, answer their questions, and guide them toward making a purchase. As you create and optimize your product pages, keep the needs and preferences of your target audience in mind, and be ready to adapt and improve based on customer feedback and analytics data. Ultimately, a compelling product page can be the difference between a casual visitor and a satisfied customer.
Create a product page on the Blogger website
Now we are going to see how can you create a professional product page for your Google Blogger website. With the help of this professional product page, Taking orders and selling products will be very easy for you.
Now simply follow the steps below:
Step 1: First of all Log in to Blogger Dashboard. Then go to Theme > Customize > Edit HTML
Step 2: Now we need to add proper CSS to design the product page.
To do that copy the code below and paste it above
]]></b:skin>
or </style>
inside your
template.
/* CSS for product posts */ .gambar-produk{float:left;width:40%;margin:0 25px 0 0} .produk-kanan{float:right;width:55%} .gambar-produk img{width:100%;margin:15px 0;border-radius:5px;box-shadow:0 2px 8px 0 rgb(60 64 67 / 11%)} .gambar-produk a:nth-child(n+2) img{width:35%!important;height:100px!important;object-fit:cover;float:left;margin-right:10px} .deskripsi-produk{overflow:hidden;width:100%;padding:20px 0;border-top:1px solid #eee} .status-produk{margin:10px 0 20px;font-size:13px;background:#f4f5f9;display:inline-block;color:#00B65F;padding:3px 15px;border-radius:5px} .status-produk-so{margin:10px 0 20px;font-size:13px;background:#f4f5f9;display:inline-block;color:#EE1B24;padding:3px 15px;border-radius:5px} .produk-kanan #beli-sekarang{color:#fff;font-weight:600;padding:10px 25px;display:inline-block;border-radius:5px} .input-field{position:relative;margin:15px 0} .input-field textarea{font-size:15px;padding:15px 0 15px 15px;display:block;width:94%;border:1px solid #f4f5f9;border-radius:7px} .input-field textarea:focus{outline:none} .input-field textarea:focus{border:2px solid #f89000!important} .produk-kanan #beli-sekarang{background:#ff0033;text-decoration:none} .produk-kanan #beli-sekarang:hover,.marketplace a:hover{opacity:.8} .harga-produk #harga{color:#ff0033;font-weight:700;font-size:25px}.harga-produk strike{opacity:.5} .marketplace{margin:20px 0 30px; display:flex;flex-wrap:wrap; line-height:1.6em} .marketplace > *{display:block} .marketplace > small{width:100%; margin-bottom:10px} .marketplace > a{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px; margin:0 8px 8px 0;border:1px solid #ddd;border-radius:3px} .marketplace > a:last-of-type{margin-right:0} .marketplace > a img{width:20px;height:20px;display:block} @media screen and (max-width:768px){ .produk-kanan{width:100%;float:none} .gambar-produk a:nth-child(n+2) img,.gambar-produk{width:100%;float:left} } /* product table */ table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative} table.tr-caption-container tr td{background-color:transparent;border:0;padding:0} table.tr-caption-container tr:nth-child(2n+1) td, table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent} table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0} table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px} table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px} table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{border-right:0} table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle} table tr:nth-child(2n+1) td{background-color:rgba(0,0,0,.01)} .table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;} /* product ratings */ .rating-produk i.icon-star-angka{font-weight:400;font-size:12px;margin-left:5px;vertical-align:1px} .rating-produk{padding:0;width:55%;float:left;box-sizing:border-box;margin-top:10px} b.widget-rating{display:block;margin-bottom:10px} i.icon-star,.icon-star{font-weight:400;font-style:normal;display:inline-block} i.icon-star:before,.icon-star:before{content:'';width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23ffc53e'/%3E%3C/svg%3E") no-repeat} i.icon-star.silver:before,i.icon-star.silver:before{content:'';width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23a9acad'/%3E%3C/svg%3E") no-repeat} /* css darkmode */ .darkMode table th,.darkMode table td{border-color:rgba(255,255,255,.1)} .darkMode table{background-color:#1e1e1e;color:#fefefe} .darkMode .input-field textarea,.darkMode .status-produk{border-color:rgba(255,255,255,.1);background:#2d2d30;color:#fefefe}
Plus UI and Median UI users replace .darkMode with .drK to make this work in Darkmode
Step 3: Now that we are done with all the necessary customization in out template. This time we need to customize our actual product page. So now create a new post by clicking NEW POST from the Blogger Dashboard. After that give your page a title for your product and select a category. Then go to HTML View and paste the below code in your page.
<!--[ Price to show in homepage ]--> <div class='pPric pPad' data-text='Price'>$1,699.00</div> <!--more--> <!-----[ PRODUCT IMAGES ]-----> <div class='gambar-produk'> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhI7SdpLcmZDfZbdkVd3XM05xqjxzKcYzxpsICoNTueu2T2IrgGrmPFt9PtzVbJh6SdfTwvbFs6i3Sr4ZUJgne5F-IDhXBlid5xqamlTchSemzObbFUW6GtTreRP-wQp96EtRQB3wrAkb1nVtfnvT7uxZ3dWMdDp-cZHKl2nlY_nJkMJGizCl3jPle2ay/s800/advanced-product-page-for-blogger-website.jpg"><img alt="system76 Laptop" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhI7SdpLcmZDfZbdkVd3XM05xqjxzKcYzxpsICoNTueu2T2IrgGrmPFt9PtzVbJh6SdfTwvbFs6i3Sr4ZUJgne5F-IDhXBlid5xqamlTchSemzObbFUW6GtTreRP-wQp96EtRQB3wrAkb1nVtfnvT7uxZ3dWMdDp-cZHKl2nlY_nJkMJGizCl3jPle2ay/w320-h320/advanced-product-page-for-blogger-website.jpg" title="system76 Laptop" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQdb-SFZIr_y51Jl4PZgUUmSo_huwM-PYaF8VExtLuhhigytgqZRBCwA5_phaEgmjqLw4z_0QRt4uR9opu0LuxCkhlf7Q8Ta7Y94vDkDhU9o2glEjiMwEJGLeIZZ5ERLSFaDRmZsZwDkmb8L6NvKIVlMb8Hg8dSYunvFg74wJkpEzoVWe3gEK0eRZX5lW/s800/advanced-product-page-for-blogger-website-sub1.jpg"><img alt="system76 Laptop Front Side" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQdb-SFZIr_y51Jl4PZgUUmSo_huwM-PYaF8VExtLuhhigytgqZRBCwA5_phaEgmjqLw4z_0QRt4uR9opu0LuxCkhlf7Q8Ta7Y94vDkDhU9o2glEjiMwEJGLeIZZ5ERLSFaDRmZsZwDkmb8L6NvKIVlMb8Hg8dSYunvFg74wJkpEzoVWe3gEK0eRZX5lW/w320-h320/advanced-product-page-for-blogger-website-sub1.jpg" title="system76 Laptop Front Side" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjanaWnFs-DX1bZt9Hgb5EgQVK6ar316hUuRt6s8DfG-1KMqHJjS5CaNPU0sWGcygHJLBFJR09X8BLAjdlwNbWNNVIoQaWKR7TyTFYyDP_hCmwsmZdg9FeQnMBzaoUC5wxo758GOgLvg-MYDKUGF53dv6CLVGVy2hBkLFv4BI1n094bJuGKKR_TGfkVmbmg/s800/advanced-product-page-for-blogger-website-sub2.jpg"><img alt="system76 Laptop Back Side" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjanaWnFs-DX1bZt9Hgb5EgQVK6ar316hUuRt6s8DfG-1KMqHJjS5CaNPU0sWGcygHJLBFJR09X8BLAjdlwNbWNNVIoQaWKR7TyTFYyDP_hCmwsmZdg9FeQnMBzaoUC5wxo758GOgLvg-MYDKUGF53dv6CLVGVy2hBkLFv4BI1n094bJuGKKR_TGfkVmbmg/w320-h320/advanced-product-page-for-blogger-website-sub2.jpg" title="system76 Laptop Back Side" /></a> </div> <!-----[ PRODUCT IMAGES ]-----> <div class='produk-kanan'> <!-----[ PRODUCT STATUS ]-----> <div class='status-produk'>Available</div> <!-----[ PRODUCT PRICES ]-----> <div class='harga-produk'> <strike>USD 1,999.00</strike><br/> <span id='harga'>USD 1,699.00</span> </div> <!-----[ PRODUCT RATING ]-----> <span class='rating-produk'> <b class='widget-rating'> <i class='icon-star'></i> <i class='icon-star'></i> <i class='icon-star'></i> <i class='icon-star'></i> <i class='icon-star silver'></i> <i class='icon-star-angka'>4.0</i></b> </span> <!-----[ BUYER NOTE ]-----> <div class='input-field'> <textarea id='catatan' maxlength='100' placeholder='Add a note'></textarea> </div> <!-----[ BUY BUTTON ]-----> <a href='javascript:void' class='tombol-bukatutup' id='beli-sekarang' title='Buy Now'>Buy Now</a> </div> <!--[ Post Snippet ]--> <div class='hidden'>Specifications</div> <style>/*<![CDATA[*/ /* To change Header Subtitle */ .headH .headSub{max-width:none} .headH .headSub::before{content:"Product Post"} /*]]>*/</style> <div class='pInfo pPad'> <div class='L'><small>Brand</small><span>System76</span></div> <div class='R'><small>Serie</small><span>Lemur Pro</span></div> </div> <div class='pInfo pPad'> <div class='L'><small>Specific Uses For Product</small><span>Multimedia</span></div> <div class='R'><small>Screen Size</small><span>16.2" FHD (1920x1080) Matte Finish, 16:9, 144 H</span></div> </div> <div class='pInfo pPad'> <div class='L'><small>Operating System</small><span>Pop!_OS 22.04 LTS or Ubuntu 22.04 LTS</span></div> <div class='R'><small>Human Interface Input</small><span>Touchscreen, Multitouch Touchpad, Multi-Color Backlit Chiclet US QWERTY Keyboard</span></div> </div> <div class='pInfo pPad'> <div class='L'><small>Processor</small><span>14th Gen Intel® Core i9-14900HX, up to 5.8 GHz – 36 MB cache – 24 total cores</span></div> <div class='R'><small>Graphics</small><span>NVIDIA GeForce RTX 4050, 4060, or 4070<br>Intel® Iris Xe Graphics (switchable)</span></div> </div> <div class='pInfo pPad'> <div class='L'><small>Memory</small><span>Up to 96GB dual-channel DDR5 @ 5600 MHz</span></div> <div class='R'><small>Storage</small><span>3x M.2 PCIe Gen 4 SSD, Up to 12 TB total</span></div> </div> <div class='pInfo pPad'> <div class='L'><small>Networking</small><span>Gigabit Ethernet, WiFi 6E, Bluetooth 5.3</span></div> <div class='L'><small>Video Ports</small><span>1 x HDMI (w/HDCP), 1 x Mini DisplayPort 1.4 over USB 3.2 Gen 2 (Type C)</span></div> </div> <div class='pInfo pPad'> <div class='R'><small>Colour</small><span>Silver</span></div> </div> <div class='pInfo o pPad'><small>What is in the Box?</small><span>system76 Laptop, 65 W Smart AC power adapter, User manuals</span></div> <div class='pMart'> <small>or Shop through your favorite '<b>Market Place</b>' :</small> <!--[ Change attribute href='#' to add url ]--> <a title='Amazon' href='https://www.amazon.com' target='_blank' rel='noopener nofollow'> <img class="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsK-Uw5vEc3PL9S_6wu-XHAT5iGArn95-PF1vRr6oaY4qA8znadojxJcSqeM1ZO6THAkNBLKKE-K_aOL5kfRmh92kwhODMgGnZA9t0XQfO5tLj6n7Mcsi2wTIrx_tJacDTBfD7lHHrR74NTsCBDfuPUrquCL1z9a1dYUfsmj9zHpw0Dy0TIkB7z_6Tn6T6/s32/amazon-favicon.png" alt="Amazon" title="Amazon"> </a> <a title='AliExpress' href='https://www.aliexpress.com' target='_blank' rel='noopener nofollow'> <img class="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC9RQll2uqxRJjhG7vdvyTXghpq2-jDKL9Al1noWaeLMQ9Og3u2x8mDVEmLOYek0H-g7OWDSTRS0yudZLRSZAGC8ONFtLOLg7O4oOMq4E38zL05CWzIcVKN7Le-gVIV7w0p1udgrmHDf6R3r5xo7d4wGforKLSSwQ2r0Dj5NcGs7DAGaAWnUsBsMuaC7MS/s32/aliexpress-favicon.png" alt="AliExpress" title="AliExpress"> </a> <a title='Flipkart' href='https://www.flipkart.com' target='_blank' rel='noopener nofollow'> <img class="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRBOTXU-mERR1C5MqZQxB9EEx36YNre4xzNUtB0F1sr3wKYqtwkMXuB2Wjq_AB6uZiu58fp6OzR7IRaKb1PQVPnOHXDy_X0QybMoAOYqb7WiSQgOfwxO3r_4oBtysIjzS9crJ1ZF_VvoRg4rHsIlbVV7H4JgFHUSmbUWA7XT_EgerHcY7tSqOxN86fVoQc/s32/flipkart-favicon.png" alt="Flipkart" title="Flipkart"> </a> <a title='Daraz' href='https://daraz.com' target='_blank' rel='noopener nofollow'> <img class="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5m1GTbVRM3yAnqbkFrnOYs1Lw9DZ7lGZkQebnMPrRF1iS3qdp59KjZtD3DUrG0XZe-9h-z5SxvdxCJj6aQt4E21Z_3KGJMenL2u425lKRjKIYZqSPh4s1OOBiJi7zMhibNc-l5Dy_EMA8iAQaD3AQFNtVQk5zsQeAaQgIvFCLNhdmrSATS3Q2OtPkuETZ/s32/daraz-favicon.png" alt="Daraz" title="Daraz"> </a> </div> <!--[ Active function ]--> <input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked> <input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'> <input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'> <input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'> <input class='tbIn hidden' id='fTabs-5' type='radio' name='postTabs'> <!--[ Tabs header/title, replace class attribute to class='tbHd scrlH stick' if you want to create a floating tab title ]--> <div class='tbHd scrlH'> <!--[ Change atribute data-text='...' to replace tabs title ]--> <label for='fTabs-1' data-text='Full Specifications'></label> <label for='fTabs-2' data-text='Display'></label> <label for='fTabs-3' data-text='Network'></label> <label for='fTabs-4' data-text='Body'></label> <label for='fTabs-5' data-text='More'></label> </div> <div class='tbCn'> <!--[ Tabs content ]--> <div class='tbText-1'> <table cellpadding='0' cellspacing='0' style='text-align: left;'> <tbody> <tr><td><b>Name</b></td> <td>system76</td></tr> <tr><td><b>Serie</b></td> <td>Lemur Pro</td></tr> <tr><td><b>Model</b></td> <td>G02 City</td></tr> <tr><td><b>Price</b></td> <td>$1,699.00 (approx)</td></tr> <tr><td><b>Category</b></td> <td>Laptop</td></tr> </tbody> </table> </div> <!--[ Tabs content ]--> <div class='tbText-2'> <table cellpadding='0' cellspacing='0' style='text-align: left;'> <tbody> <tr><td><b>Display Type</b></td> <td>Dynamic AMOLED 2X, 120Hz, HDR10+, 1750 nits (peak)</td></tr> <tr><td><b>Display Size</b></td> <td>16.2 inches, 91.3 cm2 (~88.1% screen-to-body ratio)</td></tr> <tr><td><b>Display Resolution</b></td> <td>1920 x 1080 pixels, 16:9 ratio</td></tr> <tr><td><b>Display Multitouch</b></td> <td>Yes</td></tr> <tr><td><b>Display Density</b></td> <td>422 ppi</td></tr> <tr><td><b>Display Protection</b></td> <td>Corning Gorilla Glass Victus 2</td></tr> </tbody> </table> </div> <!--[ Tabs content ]--> <div class='tbText-3'> <table cellpadding='0' cellspacing='0' style='text-align: left;'> <tbody> <tr><td><b>Network Type</b></td> <td>GSM / CDMA / HSPA / EVDO / LTE / 5G</td></tr> <tr><td><b>Network 2G</b></td> <td>GSM 850 / 900 / 1800 / 1900 - SIM 1 & SIM 2 (Dual SIM model Only)</td></tr> <tr><td><b>Network 3G</b></td> <td>HSDPA 850 / 900 / 1700(AWS) / 1900 / 2100</td></tr> <tr><td><b>Network 4G</b></td> <td>LTE</td></tr> <tr><td><b>Network 5G</b></td> <td>SA/NSA/Sub6</td></tr> <tr><td><b>GPRS</b></td> <td>Yes</td></tr> </tbody> </table> </div> <!--[ Tabs content ]--> <div class='tbText-4'> <table cellpadding='0' cellspacing='0' style='text-align: left;'> <tbody> <tr><td><b>Body Dimensions</b></td> <td>146.3 x 70.9 x 7.6 mm (5.76 x 2.79 x 0.30 in)</td></tr> <tr><td><b>Body Weight</b></td> <td>2 Kg</td></tr> <tr><td><b>Build</b></td> <td>Glass Front (Gorilla Glass Victus 2), Glass Back (Gorilla Glass Victus 2), Aluminum Frame</td></tr> <tr><td><b>Network Sim</b></td> <td>Nano-SIM and eSIM or Dual SIM (2 Nano-SIMs and eSIM, Dual stand-by)</td></tr> </tbody> </table> </div> <!--[ Tabs content ]--> <div class='tbText-5'> <div class='pInfo pPad'> <div class='L'><small>Other Features</small><span>system76, system76 Wireless DeX (Desktop Experience Support).<br> Bixby Natural Language Commands and Dictation. <br> Samsung Pay (Visa, MasterCard certified). <br> Wireless (Qi/PMA).<br> 4.5W Reverse Wireless.</span> </div> </div> </div> </div>
Step 4: Now before you publish the post, make sure to edit all the information from the code. Such as product name, price, location, and all other information. After you are done with that, your product page will be ready to be published. Now click the Publish button to make it available for the publish.
This product page is not functional. If you want to make this product page functional then read this article.
How to Add Product Details
- Change Image: Change the product image from the [ PRODUCT IMAGE ] section. You can either upload the images on your website or on a 3rd party website.
- Change Rating: Change the product star from the [ PRODUCT RATING ] section.
-
Change Status: Change your product status. If the product is not available
then replace the code
<div class='status-produk'>Available</div>
with<div class='status-produk-so'>Stock Out</div>
- Change Affiliate URL: If you are doing affiliate marketing with Amazon or other eCommerce services then add your affiliate link.
- Add Details: Finally, add your product specifications.
Conclusion
Creating an advanced product page on your Blogger website involves careful planning and execution. By following the steps outlined in this guide, you can design a professional, SEO-optimized product page that enhances user experience and drives sales. Stay consistent with your branding, provide valuable content, and continuously refine your approach based on feedback and analytics.
Implement these strategies and watch your online store thrive. Happy selling!