Level Up Your nopCommerce Store With These Easy Design Customizations

nopCommerce is one of the most reliable, open-source eCommerce shopping cart solutions to have been used by multiple websites, 56,179 to be exact. And if you’re one of them, then you’re very well aware of nopCommerce’s responsiveness or the fact that it comes with a perfect mobile-friendly design. Though this ‘out of the box’ design template is good enough, you might want to customize yours to add a bit of personalization to your store to make it stand out.  

Following are some easy customizations to help you work your way around your nopCommerce template:

1. Play around with the footer colors

The best way to change the look and feel of your website is by using attractive and vibrant colors. An upbeat color for the footer area will definitely add life to your nopCommerce template design. You can easily do this via your style sheets. Just locate the file “style.css” in your CSS code folder.
Therein, the default background color would be set to “#eee”, and the code would look something like this:

.footer {
   background-color: #eee;
   text-align: center;
}

You can experiment with different colors to see which one complements the essence of your store just right, and make the changes accordingly.

For example,

.footer {
   background-color: cyan;
   text-align: center;
}

2. Striking banners can do the trick

Attractive banners announcing new products or new offers/discounts or trending items immediately catch the buyers’ attention. Plus, they will be displaying information and visuals about something unique on your store. Not only will this simple customization make your store look different from the others, but it will influence the customer’s mind and increasing your conversions.

3. The top header must contain some content

Your top header must contain some content, preferably your contact information such as address, contact number, social media links, email, live chat button, etc. This makes your contact information visible on the top header of every page and saves the customers the time they otherwise need to spend while locating your Contact Us page in case they’re looking for help. This information can be added via the “Header.cshtml” file which can be accessed from the “Shared” code files.

4. Add colors to News titles on your nopCommerce homepage

nopCommerce’s homepage allows you to display 3 latest news posts on the homepage. The color of these news tiles, by default, is white. Changing the color can instantly lift these posts up and make them visible.

This can be done via the style.css file. Follow the procedure below.

Find the following code in the style.css file:

.post-title,
.news-title {
   display: inline-block;
   padding: 30px 20px;
   line-height: 10px;
   font-size: 14px;
   font-weight: bold;
   color: #555;
}

Before you start making changes to the news title, it is important to separate the post and news title. This gives us:

.post-title {
   display: inline-block;
   padding: 30px 20px;
   line-height: 10px;
   font-size: 14px;
   font-weight: bold;
   color: #555;
}
.news-title {
   display: inline-block;
   padding: 30px 20px;
   line-height: 10px;
   font-size: 14px;
   font-weight: bold;
   color: #555;
}

Now you can customize it however you want. Here’s an example:

.news-title {
   display: inline-block;
   padding: 40px 20px;
   line-height: 30px;
   font-size: 18px;
   font-weight: bold;
   color: #555;
   background-color:aqua;
   width:250px;
}

5. Try different variations of the top menus

You can try changing the color of your top menu to make your shopping site look more appealing and attractive. Apart from this, you can implement custom mega drop-down menus to provide a smoother user experience to your customers. They’ll be able to find the product they’re looking for without much hassle.

While anyone could have a user-friendly nopCommerce store, you can make yours stay ahead of the competition with a customized design. The aforementioned are some super easy tricks to make changes to your store as and when you want. Make sure you use them to the best of your creativity. And having said that, while the design does impact the look and feel of your nopCommerce store, there are other factors at play that determine the overall performance. Take, the payment gateways for example. The more the merrier. So, while you are on the lookout for someone who can help you with the template design, make sure that they also know their way around nopCommerce payment gateway integration.

Professional nopCommerce developers at SunTec India have the requisite know how. Just write to us at info@suntecindia.com and we’ll connect you with one.