NopMedi – (4) Content Management

Language – Localization

After you have plug the theme into your store, you may find some non-human-readable text strings in store front-end, for example “NopMedi.aboutus” in your store footer. These text strings are actually manageable (localizable) in nopCommerce.
Now, what you would need to do is to give them meaningful values so that they are human-readable. For example, “nopmedi.homepage.brands” has a value of “Brands We Carry” at the demo site.

To change the value of each localizable strings, navigate to admin dashboard, Configuration > Languages. Click on “View string resources” link of your desired language. Then, add the following localization records into the table. If your store implements multiple languages, then you would need to repeat the task for each of the languages.

Topics

There are some new topics applied in NopMedi Responsive Theme in addition to the default nopCommerce topics. Navigate to admin dashboard, Configuration > Content Management > Topics (Pages), add the following new topics:

1. Home-Block-1

   This is the left box section placed at the bottom of homepage banner. Below is the HTML source applied on NopMedi demo site.
   

   </p> <table> <tbody> <tr> <td style="background-image: url('/Content/Images/uploaded/buy-free.jpg'); background-size: cover;"> <a class="link" href="#"><br /> <span class="text" style="background-color: #fba525;">BUY ONE FREE ONE</span><br /> </a> </td> </tr> </tbody> </table> <p>

2. Home-Block-2

   This is the middle box section placed at the bottom of homepage banner. Below is the HTML source applied on NopMedi demo site.
   

   </p> <table> <tbody> <tr> <td style="background-image: url('/Content/Images/uploaded/discount.jpg'); background-size: cover;"><a class="link" href="#"><span class="text" style="background-color: #95b558;">SPECIAL OFFERS</span></a></td> </tr> </tbody> </table> <p>

3. Home-Block-3

   This is the right box section placed at the bottom of homepage banner. Below is the HTML source applied on NopMedi demo site.
   

   </p> <table> <tbody> <tr> <td style="background-image: url('/Content/Images/uploaded/free-shipping.jpg'); background-size: cover;"><a class="link" href="#"><span class="text" style="background-color: #006738;">FREE SHIPPING</span></a></td> </tr> </tbody> </table> <p>

4. Product-Side-Block

   This is the content block placed at the right side of product details page.

5. NopMedi-Brands-Slider

   This is the content for homepage brand slider. To make your content display as a slider, simply add your image in a new paragraph. Every paragraph content will be displayed as a slide automatically.

   Note: This is only available starting nopCommerce 4.00

   Below is the sample source code:

   </p> <p><a href="http://nopmedi-demo.pronopcommerce.com/megafood"><img decoding="async" src="http://nopmedi-demo.pronopcommerce.com/content/images/thumbs/0001097_megafood_220.gif " alt="" /></a></p> <p><a href="http://nopmedi-demo.pronopcommerce.com/megafood"><img decoding="async" src="http://nopmedi-demo.pronopcommerce.com/content/images/thumbs/0001097_megafood_220.gif " alt="" /></a></p> <p><a href="http://nopmedi-demo.pronopcommerce.com/megafood"><img decoding="async" src="http://nopmedi-demo.pronopcommerce.com/content/images/thumbs/0001097_megafood_220.gif " alt="" /></a></p> <p><a href="http://nopmedi-demo.pronopcommerce.com/megafood"><img decoding="async" src="http://nopmedi-demo.pronopcommerce.com/content/images/thumbs/0001097_megafood_220.gif " alt="" /></a></p> <p><a href="http://nopmedi-demo.pronopcommerce.com/megafood"><img decoding="async" src="http://nopmedi-demo.pronopcommerce.com/content/images/thumbs/0001097_megafood_220.gif " alt="" /></a></p> <p><a href="http://nopmedi-demo.pronopcommerce.com/megafood"><img decoding="async" src="http://nopmedi-demo.pronopcommerce.com/content/images/thumbs/0001097_megafood_220.gif " alt="" /></a></p> <p><a href="http://nopmedi-demo.pronopcommerce.com/megafood"><img decoding="async" src="http://nopmedi-demo.pronopcommerce.com/content/images/thumbs/0001097_megafood_220.gif " alt="" /></a></p> <p>

Nivo Slider

Nivo slider is a good Jquery Slider but it is absolutely not suitable to use transparent PNGs by default, some configurations is therefore required.
If you wish to setup the similar sliders as NopMedi demo site (a static large background image with transparent PNGs), here are the procedures:

1. Get the PublicInfo.cshtml file in your downloaded theme folder, replace it in “/Plugins/Nop.Plugin.Widgets.NivoSlider/Views/WidgetsNivoSlider” folder.
2. Name your static background image as “banner-background.jpg” and replace it in “/Themes/NopMedi/Content/img” folder.

Skip this part if you wish the NivoSlider to work in default settings.

Store Logo

For nopCommerce 3.70 and versions below, please name your store logo image as “logo.png” and replace it in “/Themes/NopMedi/Content/img” folder.

For nopCommerce 3.80, please upload your logo image at Admin > Configurations > Settings > General Settings.

Product Images

We strongly believe that a good looking theme must come with organized and good quality product images.
Therefore, it is worth for store owner to invest some time and effort to create product images in consistent ratio.
In the case of product details image zooming setting is enabled,
the product images should be created in larger size (length should not shorter than 550px) as we have specified in media settings previously).

Reference Font Type WOFF2

After you have setup everything and run your store, you might see a javascript error in your store as below:

To solve this, please go to your ~/Presentation/Nop.Web/web.config and add

under staticContent as shown below:

Lastly, thank you for choosing NopMedi Responsive Theme. Pro nopCommerce had put in 100% effort in the theme development. Unfortunately, we couldn’t assure that the theme is 100% perfectly working in all sort of situations. Therefore, if you found some errors or bugs in the theme, please report issues at [email protected].
Enjoy your theme!