How to Create a Modern Product Page on a Blogger Website

Tasin
20 Jun, 2024

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.

Create a Modern Product Page on a Blogger

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.

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.
    1. How to receive orders through Email
    2. How to receive orders through WhatsApp
  • 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!

Next Post Previous Post
No Comment
Add Comment
comment url