How to Create Purchase Box Widget on Blogger 2023.(Updated Code)

Do you want to create a Purchase box widget for your blog or website? If yes! Here is a step-by-step tutorial on how you can easily create it.

Today in this blog, I’ll tell you how to add a purchase box widget to your blogger site 2023 step by step. This widget is ideal for website owners that sell products & things.

Even though you can buy products from the 3rd party websites like amazon, this kind of purchase box button widgets gives you an extra edge by putting the control of buying the products in your site’s visitors' hands.

What is Purchase Box Widget on Blogger 2023?

The Purchase Button Box is an elegant and effective way to display purchase options while allowing visitors to engage with your product in a new and fun way. If you’re interested in making your users happy, and if you want to provide them with an entertaining and interactive purchasing experience, the Purchase Button Box widget is a great choice for you.

The Purchase Button Box widget is a simple product box that you can use for your site. It’s perfect for mobile-friendly blogger templates, software, limited edition prints, or even any other kind of digital good. I encourage you to customize the demo to make it your own and make your shop more visible to customers who are looking for just the right thing.

Click Here to see a Demo of the Purchase Boc Widgets before implementing them on your site.

Demo

Features of This Purchase Box Widget.

After Demo Test let me know the features of this purchase box widget for bloggers.

• Responsive and Professional Design
• Stylish Purchase Button
• Purchase items name
• Price shown in Dollar Or You can change your
• Purchase method- Bank Transfer and Paypal
• Support Many Banks option
• Purchase Confirm Button

You can easily create a buy box button widget on your Blogger blog because Google Adsense allowed us to do that. So, here is how to add a buy box button on Blogger step by step.

How To Easily Add Create Purchase Box Button Widget On Blogger 2023?

No programming skills are required! You can create this purchase button box widget with absolutely no coding experience. Simply enter your product details and start adding the buttons to links.

• Go to Blogger Dashboard
• Click Theme section and take backup
• After that choose edit Html and paste the below code.

• First Step-Adding CSS Codes to give a new look

Simply copy the below whole CSS Code and paste just above the ]]></b: skin> in your template.

/* Purchase Box Widget CSS Codes */
.twt-pc-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:9999999;visibility:hidden;opacity:0;transition:all .2s ease}
.twt-pc-pop{position:relative;top:50%;left:50%;padding:20px;display:flex;background:#fff;flex-direction:column;width:80%;max-width:800px;line-height:30px;border-radius:5px;transform: translate(-50% , -50%) scale(0.97);overflow:hidden;box-sizing:border-box}
.twt-pc-pop:before{content:'';display:block;position:absolute;right:-5px;top:-80px;width:50%;height:450px;border-top-left-radius:50%;border-bottom-left-radius:50%;background-color:#f1f1f0}
.twt-pc-close{position:absolute;top:5px;right:-10px;width:50px;height:50px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:30px}
.twt-pc-close:before{content:'Close';position:relative;right:35px;top:-2px;font-size:12px;color:#999}
.twt-buy-left{position:relative;display:inline-block;margin-top:15px;width:50%;color:#48525c} 
.twt-buy-right{position:absolute;display:inline-block;margin-top:30px;left:50%;width:50%;color:#48525c;align-items:right;text-align:left;padding-left:50px} 
.twt-buy-left h2,.twt-buy-right h2{font-size:20px;margin:-10px auto 10px}
.twt-buyd,.twt-buyh{font-size:17px;font-weight:600;color:#48525c}.twt-buyh{margin-top:-20px}
.twt-buyd:before,.twt-buyh:before{content:attr(aria-label);display:flex;font-size:12px;font-weight:400;color:#767676;margin:20px 0 0}
.twt-buyi,.twt-buyc{font-size:12px;color:#767676;margin-top:10px}.twt-buyi a,.twt-buyc a,.twt-buy-right a{text-decoration:none}
.twt-buy-right span{font-size:17px;color:#767676;margin-left:35px}
.twt-buyb,.twt-buyp{display:inline-block;width:calc(100% - 30px);border:1px solid #999;border-radius:3px;margin:10px auto 0;padding:10px}
svg.twt-buysvg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:5px}
svg.twt-buysvg.line{fill:none!important;stroke:#767676;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.twt-pc-btn{display:inline-flex;align-items:center;margin:15px 15px;padding:10px 20px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#214ECF;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em} 
#twt-check-pc:checked ~ .twt-pc-wrap{visibility:visible;opacity:1}
#twt-check-pc{display:none}
@media screen and (max-width:600px){.twt-buyd,.twt-buyh{margin:15px 0}.twt-buyd:before,.twt-buyh:before{margin:5px 0}.twt-buy-right,.twt-buy-left,.twt-buyb,.twt-buyp{position:relative;width:calc(100% - 10px)}.twt-buy-right{left:0;padding:0}.twt-pc-pop{width:400px}.twt-pc-pop:before{content:'';display:block;position:absolute;left:0;top:270px;width:400px;height:400px;background-color:#f1f1f0;border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-left-radius:0}}
@media screen and (max-width:420px){.twt-pc-pop{width:300px;line-height:20px}.twt-pc-pop:before{top:250px;width:300px}.twt-buy-left{margin-bottom:0}.twt-buyi{line-height:20px}.twt-pc-close:before{top:5px}.twt-buyd:before,.twt-buyh:before{margin-bottom:10px}svg.twt-buysvg{margin-top:0}}

• Second Step-Adding HTML Code to arrange sizes and shape

Copy the below Html code and paste it into each post where you want to add the buy box widget at the end of every post and save.

<input id="twt-check-pc" type="checkbox" />
<div class="twt-pc-wrap">
<div class="twt-pc-pop">
<label class="twt-pc-close"></label>
<div class="twt-buy-left">
<h2>Purchase</h2>
<div aria-label="Detail" class="twt-buyd">iMagz Theme</div>
<div aria-label="Price" class="twt-buyh">$15</div>
<div class="twt-buyi">*Purchase can be made through PayPal, Gumroad. <a href="#" target="_blank">Detail info</a></div>  
</div>
<div class="twt-buy-right">
<h2>Purchase Method</h2>
<a class="twt-buyb" href="#" target="_blank">
<svg class="twt-buysvg line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect height="16" rx="2" ry="2" width="22" x="1" y="4"></rect><line x1="1" x2="23" y1="10" y2="10"></line></svg>
<span>Bank Transfer</span></a>
<a class="twt-buyp" href="#" target="_blank">
<svg class="twt-buysvg" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path d="M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z"></path></g></svg>
<span>Paypal</span></a>
<div class="twt-buyc">Already made a payment? <a href="#" target="_blank">Confirm here</a></div></div>
</div><span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div><

• Third Step-Add Buy Link or Button to click purchase item

For Buy Button when pressed and display purchase item popup box. Simple copy below code and paste where you want the purchase popup box to display.

<div style='text-align: center;'>
<label class='twt-pc-btn' for='twt-check-pc'>Buy Now!</label>
</div>

Thanks for visiting our website and reading this tutorial, We hope you have no trouble creating the Purchase Button Box Widget for your Blogger blog. If you did, please let us know in the comments section below. If you found this article helpful, please share it

SeeCloseComments

Previously Post Previously Post

Cancel

Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.