How to Create a Stunning Promotion Box for Your Website

Contents

Step 1: Add HTML code to the desired position Step 2: Add CSS code for styling Step 3: Save and enjoy your results

Hello everyone, today I’ll guide you on how to create a beautiful promotion notification box for your website, as shown in the image below:

Guide to Creating a Beautiful Promotion Notification Box for Your Website

This tutorial is demonstrated on the Flatsome theme, using WooCommerce.

Step 1: Add HTML code to the desired position

Decide where you want to place the promotion box, then find that spot and get ready to copy the HTML code into it.

As shown in the image, the promotion notification box is positioned between the short description and the Add to Cart button. Therefore, the quickest way to add the HTML is:

In the Flatsome theme, go to Appearance – Customize – WooCommerce (shop) – Product Page – HTML before Add to Cart. Then, copy and paste the entire HTML code below into that section:

<div class="promotion-hb"> 
<span class="title"><i class="icon-gift"></i> Special Promotion</span> 
   <ul>
 	<li>30% off when registering for 3 years of hosting</li>
 	<li>10% off service fees when you like and share the website</li>
 	<li>Free online SEO writing course</li>
   </ul>
</div>

Guide to Creating a Beautiful Promotion Notification Box for Your Website 1

You can edit the content by changing the text within the <li> tags above!

Step 2: Add CSS code for styling

Go to Appearance – Customize – Style – Custom CSS and then add the CSS code below:

.promotion-hb {
	margin-bottom:2px;
	margin-top:2px;
	background:white;
	padding:10px;
	border-radius:5px;
	border:1px solid #ef0b0b;
	font-size:15px;
	width:100%;
}
.promotion-hb .title {
	background:#e31616;
	padding:2px 20px;
	margin-top:-24px;
	font-size:15px;
	font-weight:500;
	color:#ffffff;
	display:block;
	max-width:207px;
	border-radius:99px;
}
 
.promotion-hb ul {
   margin-bottom:4px;
   list-style-image:url(tick.png);	
}