NopHippie – (4) Content Management

Language – Localization

Watch video tutorial below about configuring nopCommerce localization.

Configuring localization strings in nopCommerce

After you have plug the theme into your store, you may find some non-human-readable text strings in store front-end, for example “NopHippie.HomePage.Categories” at your store homepage. 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, “NopHippie.HomePage.Categories” has a value of “Popular Categories” 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

Watch video tutorial below about nopCommerce topics.

Setting Up Pro nopCommerce Themes

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

1. Footer-Block

   This is the right bottom content placed at the footer. Followed is the HTML source applied on NopHippie demo site.

    

    

   &nbsp;</p> <p>Ut sed quam sed ante finibus dapibus. Maecenas finibus enim eget lobortis semper. Duis elementum nulla sollicitudin, tempus ante sed.</p> <p><img loading="lazy" decoding="async" style="float: right;" src="https://nopcommerce-test.s3.amazonaws.com/bad1fce3ed_doing-a-field-trip-on-a-school-bus-coloring-page.jpg" alt="" width="207" height="105" /></p> <p>
2. Product-Side-Block

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

3. NopHippie-Home-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 from nopCommerce 4.00

   Below is the sample source code:

    

   <a href="http://nophippie-demo.pronopcommerce.com/disney"><img decoding="async" src="http://nophippie-demo.pronopcommerce.com/content/images/thumbs/0001124_disney_220.jpeg" alt="" /></a></p> <p><a href="http://nophippie-demo.pronopcommerce.com/disney"><img decoding="async" src="http://nophippie-demo.pronopcommerce.com/content/images/thumbs/0001124_disney_220.jpeg" alt="" /></a></p> <p><a href="http://nophippie-demo.pronopcommerce.com/disney"><img decoding="async" src="http://nophippie-demo.pronopcommerce.com/content/images/thumbs/0001124_disney_220.jpeg" alt="" /></a></p> <p><a href="http://nophippie-demo.pronopcommerce.com/disney"><img decoding="async" src="http://nophippie-demo.pronopcommerce.com/content/images/thumbs/0001124_disney_220.jpeg" alt="" /></a></p> <p><a href="http://nophippie-demo.pronopcommerce.com/disney"><img decoding="async" src="http://nophippie-demo.pronopcommerce.com/content/images/thumbs/0001124_disney_220.jpeg" alt="" /></a></p> <p><a href="http://nophippie-demo.pronopcommerce.com/disney"><img decoding="async" src="http://nophippie-demo.pronopcommerce.com/content/images/thumbs/0001124_disney_220.jpeg" alt="" /></a></p> <p><a href="http://nophippie-demo.pronopcommerce.com/disney"><img decoding="async" src="http://nophippie-demo.pronopcommerce.com/content/images/thumbs/0001124_disney_220.jpeg" alt="" /></a></p> <p>

Store Logo

Name your store logo image as “logo.png” and replace it in “/Themes/NopHippie/Content/images” folder. If your store is run on nopCommerce version 3.80 and above, please upload your logo at Admin > Configurations > Settings > General Settings.

Site Header Images

The beautiful header of NopHippie theme is built by placing two images, i.e. header-background.png and header-image.png
To change the background, name your image as “header-background.png” and replace it in “/Themes/NopHippie/Content/images” folder.

To change the image above store log, name your image as “header-image.png” and replace it in “/Themes/NopHippie/Content/images” folder.

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:
under staticContent as shown below:

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!