How To Create A Product Page On Plus UI Blogger Template

Creating a product page on your blog is essential for showcasing your offerings and driving sales. With the Plus UI Blogger Template, you can easily design an attractive and functional product page that enhances user experience and boosts conversions. Follow this step-by-step guide to create a professional product page on the Plus UI Blogger Template.

Setting Up the Plus UI Blogger Template

This is the default product page design for the Plus UI Blogger template. So there is no need to add any extra code in the template. Because all the necessary code already exists inside this template. However, if you are not using the Plus UI template then you need to set up this template first. 

Before you can create a product page, you need to set up the Plus UI Blogger Template on your blog. Here’s how to do it:

1. Login to Blogger dashboard then go to Themes.
2. Click on the icon next to the Customize button.
3. Now upload the code from Plus UI .XML file here.
4. Save the change. That's it!

Video Tutorial Related to This Topic

If you don’t feel like reading, then instead of reading you can watch the video below that is related to this topic.

Creating a New Product Page

Once your template is set up, follow these steps to create a new product page:

1. Navigate to Pages: From your Blogger dashboard, click on “Pages” and then “New Page.”

2. Title Your Page: Give your page a relevant title, such as “Our Products” or the name of a specific product.

3. If you are in Compose view mode then choose HTML view from the top-left corner. 

4. Upload the image of your product. 

5. Now copy the code below and paste it on the page.

<!--[ Price to show in homepage ]-->
<div class='pPric pPad' data-text='Price'>write_price_here</div>
<!--more-->

<!--[ Post Snippet ]-->
<div class='hidden'>Specifications, Design, Performance, Battery</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>Series</small><span>HP Pavilion Laptop 15-eh1101AU</span></div>
  <div class='R'><small>Brand</small><span>HP</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>15.6 Inches</span></div>
</div>

<div class='pInfo pPad'>
  <div class='L'><small>Operating System</small><span>Windows 10 Home</span></div>
  <div class='R'><small>Human Interface Input</small><span>Touchscreen</span></div>
</div>

<div class='pInfo pPad'>
  <div class='L'><small>CPU Manufacturer</small><span>AMD</span></div>
  <div class='R'><small>Graphics Card Description</small><span>Integrated</span></div>
</div>

<div class='pInfo pPad'>
  <div class='L'><small>Processor</small><span>AMD Ryzen 5 5500U</span></div>
  <div class='R'><small>Storage</small><span>512 GB SSD</span></div>
</div>

<div class='pInfo pPad'>
  <div class='L'><small>Memory</small><span>8 GB DDR4-3200 MHz</span></div>
  <div class='L'><small>Special Feature</small><span>Micro-Edge Display, Thin</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>HP 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='product_link_here' 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='Flipkart' href='product_link_here' 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>
</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'>

<!--[ 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='Processor'></label>
  <label for='fTabs-2' data-text='Display'></label>
  <label for='fTabs-3' data-text='Audio'></label>
  <label for='fTabs-4' data-text='Battery'></label>
</div>

<div class='tbCn'>
  <!--[ Tabs content ]-->
  <div class='tbText-1'>

    <p>
        write_description_here
    </p>

  </div>

  <!--[ Tabs content ]-->
  <div class='tbText-2'>

    <p>
        write_description_here
    </p>

  </div>

  <!--[ Tabs content ]-->
  <div class='tbText-3'>

    <p>
        write_description_here
    </p>

  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-4'>

    <p>
        write_description_here
    </p>

  </div>
</div>

Adding Product Details

• In line number two, replace the price of your product with the text write_price_here.
• From the Product Details section add or change the details of your product. 
• If you are doing affiliate marketing with Amazon or Flipkart then replace your URL with # in the shopping section.
• Finally, change Tabs name and add the product description.

Conclusion