Creating a modern product page on your Blogger website is an essential step to showcase your products effectively and drive sales. A well-designed product page not only improves the user experience but also helps in SEO, making your products more discoverable online. Follow this comprehensive guide to create a stunning, modern product page on your Blogger website.
Setting Up the Blogger Template
Step 1: First you need to Log in to your Blogger Dashboard. Then click on Theme from the left side menu. Next, go to the Customize > Edit HTML
Step 2: Now you need to add jQuery to your template. To do that press
Ctrl + F and search for the code ]]></b:skin> inside your
template.
Step 3: Now add CSS to the template. Copy the code below and paste it
above ]]></b:skin>
.container {max-width: 1200px;margin: 0 auto;padding: 15px;display: flex;}.left-column {width: 65%;position: relative;}.right-column {width: 35%;margin-top: 60px;}.left-column img {width: 100%;position: absolute;left: 0;top: 0;opacity: 0;transition: all 0.3s ease;}.left-column img.active {opacity: 1;}.product-description {border-bottom: 1px solid #E1E8EE;margin-bottom: 20px;}.product-description span {font-size: 12px;color: #358ED7;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;}.product-description h1 {font-weight: 300;font-size: 52px;color: #43484D;letter-spacing: -2px;}.product-description p {font-size: 16px;font-weight: 300;color: #86939E;line-height: 24px;}.product-color span, .cable-config span {font-size: 14px;font-weight: 400;color: #86939E;margin-bottom: 20px;display: inline-block;}.product-color {margin-bottom: 30px;}.color-choose div {display: inline-block;}.color-choose input[type="radio"] {display: none;}.color-choose input[type="radio"] + label span {display: inline-block;width: 40px;height: 40px;margin: -1px 4px 0 0;vertical-align: middle;cursor: pointer;border-radius: 50%;}.color-choose input[type="radio"] + label span {border: 2px solid #FFFFFF;box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);}.color-choose input[type="radio"]#red + label span {background-color: #C91524;}.color-choose input[type="radio"]#blue + label span {background-color: #314780;}.color-choose input[type="radio"]#black + label span {background-color: #323232;}.color-choose input[type="radio"]:checked + label span {background-image: url(images/check-icn.svg);background-repeat: no-repeat;background-position: center;}.product-price {display: flex;align-items: center;}.product-price span {font-size: 26px;font-weight: 300;color: #43474D;margin-right: 20px;}.cart-btn {display: inline-block;background-color: #7DC855;border-radius: 6px;font-size: 16px;color: #FFFFFF;text-decoration: none;padding: 12px 30px;transition: all .5s;}.cart-btn:hover {background-color: #64af3d;}@media (max-width: 940px) {.container {flex-direction: column;margin-top: 60px;}.left-column, .right-column {width: 100%;}.left-column img {width: 300px;right: 0;top: -65px;left: initial;}}@media (max-width: 535px) {.left-column img {width: 220px;top: -85px;}}
Step 4: The last step is placing the code below, above the
</body> tag.
<script>
//<![CDATA[
$(document).ready(function() {
$('.color-choose input').on('click', function() {
var headphonesColor = $(this).attr('data-image');
$('.active').removeClass('active');
$('.left-column img[data-image = ' + headphonesColor + ']').addClass('active');
$(this).addClass('active');
});
});
//]]>
</script>
Step 5: We are done customizing the template. So let's create the actual product page now. Create a new post then go to HTML View, paste the code below in it, and save. your product page is ready.
<!--[ Price to show in homepage ]-->
<div class='pPric pPad' data-text='Price'>$499.00</div>
<!--more-->
<main class="container">
<!-- Left Column / Headphones Image -->
<div class="left-column">
<img data-image="black" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHNoYYxyQWTGs_4VUh03tvocIJR5POeugFMfq2jeJw2neMDeIfsAsVsVYcBfD35RTzUkPbNQjAfFWcdHpTBlv_N1DAAWY0XHqQKjJgn_SiJ71vsuRe5K5nX2STfyxk97uEvhYYYwZdwcWmkrHAmaOV0c0RqnEZF4cdiBjq1O-yI6KHywZcXSNSHkNElhES/s1800/black.png" alt="">
<img data-image="blue" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8YiwSHqmPCEn8z71jgnIco6JJRUtDQYi2nxJ0hFRcPbrtF1o5upLFiPR3F8Ulof_JyRFBLVS6ZDVYjOWwckkuTiI1O9Rs22tl-834fT9JE9c7MMs3OrM282DdZshEgQaHfc3rWSoacxbjyH_qmL6X5d528xWo8duDm6dhhlyWjPwnRjnIRxFGFnBjM-n6/s320/blue.png" alt="">
<img data-image="red" class="active" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhtLxTYkqz0FzoJeOK-HYgqwOskxqLmwC0kxKkHDt4HPSjhZ6BCNDWPDexYty0keEgvfi9W1X9fS2LJ4B6qu_hiF7rD6dTRFzZZxgp2WyyqOu8nbO1JsUkAsscwVdeconxH01XHm6EIYM2AG5QhEfpMMQyCQE9vAjaOsIlsDzjSuSfPhxeFACstyWyysEl/s320/red.png" alt="">
</div>
<!-- Right Column -->
<div class="right-column">
<!-- Product Description -->
<div class="product-description">
<span>Headphones</span>
<h1>Beats EP</h1>
<p>The preferred choice of a vast range of acclaimed DJs. Punchy, bass-focused sound and high isolation. Sturdy headband and on-ear cushions suitable for live performance</p>
</div>
<!-- Product Configuration -->
<div class="product-configuration">
<!-- Product Color -->
<div class="product-color">
<span>Color</span>
<div class="color-choose">
<div>
<input data-image="red" type="radio" id="red" name="color" value="red" checked>
<label for="red"><span></span></label>
</div>
<div>
<input data-image="blue" type="radio" id="blue" name="color" value="blue">
<label for="blue"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div>
</div>
</div>
<!-- Product Pricing -->
<div class="product-price">
<span>148$</span>
<div style='text-align:center'>
<a class="wiki-btn-wa show-form" href="javascript:void" title="Buy Now"><svg viewBox='0 0 24 24'><path d='M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z'/><line x1='12' x2='12' y1='2' y2='16'/></svg>Buy Now</a></div>
</div>
</div>
</main>
<div class='pInfo pPad'>
<div class='L'><small>Brand</small><span>Sennheiser Momentum</span></div>
<div class='R'><small>Model</small><span>PX7 S2</span></div>
</div>
<div class='pInfo pPad'>
<div class='L'><small>Lowest frequency</small><span>6 Hzvs14.55 Hz</span></div>
<div class='R'><small>Battery life</small><span>60 hoursvs30.03 hours</span></div>
</div>
<div class='pInfo pPad'>
<div class='L'><small>Driver unit size</small><span>42 mmvs35.61 mm</span></div>
<div class='R'><small>Bluetooth version</small><span>5.2vs4.59</span></div>
</div>
<div class='pInfo pPad'>
<div class='L'><small>Number of microphones</small><span>4vs1.21</span></div>
<div class='R'><small>Charge time</small><span>2 hoursvs2.64 hours</span></div>
</div>
<div class='pInfo pPad'>
<div class='L'><small>Battery power</small><span>700 mAhvs612.08 mAh</span></div>
<div class='R'><small>Lowest mic frequency</small><span>50 Hzvs78.29 Hz</span></div>
</div>
</div>
Step 6: Now publish your post and that's it. Your product page is ready now.
This product page is not functional. You can not receive orders through this page. If you want to make this page functional and receive orders through this page then please follow the instructions below.
Get orders using the product page
Here is how to make this page functional and use it to receive orders.
- There are two ways to receive orders using this product page. You can either use WhatsApp or Email to receive orders and sell products to your customers. So please read any of the blog post below and change your template according to those blogs.
-
Now replace your WhatsApp or Email button code you got from those blogs with
the code
<a href="#" class="cart-btn">Add to cart</a>(4th line from the bottom).
Conclusion
Creating a modern product page on a Blogger website is a strategic way to showcase your products and drive sales. By following these steps, you can design an attractive, SEO-optimized product page that offers a great user experience. Stay consistent with your branding, provide valuable content, and keep refining your approach based on analytics and customer feedback.
Happy blogging and best of luck with your online store!
