NopElectro – (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 “NopElectro.HomePage.Categories” in 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, “NopElectro.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. Under “string resources”, 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.

Nivoslider (Home Sliders)

Prepare your slides and upload them at admin > Configuration > Widget > Nivoslider.

Topics

Watch video tutorial below about nopCommerce topics.

Setting Up Pro nopCommerce Themes

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

Our theme has included Bootstrap 24-Grid System, you may apply the grid layout in your topic content. Read more here. Please also note that you may enter any kind of content (images or pure text) under these topics.

Note: nopCommerce Topic text editor (TinyMCE) has this feature that will automatically add inline width and height attributes in images. If you wish your inserted image to work responsively, please remove the inline width and height attributes manually before saving.

1. NopElectro-Home-Column

   This is the left column content sits beside home page Nivoslider.Below is the source code of our demo content:

   <img loading="lazy" decoding="async" src="http://nopelectro-demo.pronopcommerce.com/Content/Images/uploaded/promotion.jpg" alt="" width="450" height="459" /></p> <div style="border: 1px solid #0e9fd6; padding: 20px 15px;"> <p><img decoding="async" loading="lazy" style="display: block; margin-left: auto; margin-right: auto;" src="http://nopelectro-demo.pronopcommerce.com/Content/Images/uploaded/icon1.png" alt="" width="38" height="30" /></p> <h4 style="text-align: center; padding-top: 8px;">Free Shipping</h4> <p class="hidden-sm" style="font-size: 10pt; line-height: 1.4; text-align: center;">Free shipping on all US orders. Nunc volutpat nisl ac. See our FAQ or contact us.</p> </div> <div style="border: 1px solid #0e9fd6; padding: 20px 15px;"> <p><img decoding="async" loading="lazy" style="display: block; margin-left: auto; margin-right: auto;" src="http://nopelectro-demo.pronopcommerce.com/Content/Images/uploaded/icon2.png" alt="" width="35" height="35" /></p> <h4 style="text-align: center; padding-top: 8px;">Money Back Guarantee</h4> <p class="hidden-sm" style="font-size: 10pt; line-height: 1.4; text-align: center;">14 days money back guarantee. Nunc volutpat nisl ac. See our FAQ or contact us.</p> </div> <p>

2. NopElectro-Home-Banner-1

   This is the small banner that sits at the left bottom of home page Nivoslider.Below is the source code of our demo content:

   <img decoding="async" loading="lazy" src="http://nopelectro-demo.pronopcommerce.com/Content/Images/uploaded/nopelectro-4.jpg" alt="" width="700" height="280" /></p> <p>

3. NopElectro-Home-Banner-2

   This is the small banner that sits at the right bottom of home page Nivoslider.Below is the source code of our demo content:

   <img decoding="async" loading="lazy" src="http://nopelectro-demo.pronopcommerce.com/Content/Images/uploaded/nopelectro-3.jpg" alt="" width="700" height="280" /></p> <p>

4. NopElectro-Footer

   This is the fourth column content at Footer.Below is the source code of our demo content:

   </p> <div id="fb-root">&nbsp;</div> <p><script> // <!&#091;CDATA&#091; (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)&#091;0&#093;; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&#038;version=v2.8"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // &#093;&#093;></script></p> <div class="fb-page" data-href="https://www.facebook.com/nopCommerce/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"> <blockquote class="fb-xfbml-parse-ignore" cite="https://www.facebook.com/nopCommerce/"><p><a href="https://www.facebook.com/nopCommerce/">NopCommerce</a></p></blockquote> </div> <p>

5. NopElectro-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 in nopCommerce 4.00 onwards.

   Below is the source code of our demo content:
   

   <a href="http://nopelectro-demo.pronopcommerce.com/epson"><img decoding="async" src="http://nopelectro-demo.pronopcommerce.com/content/images/thumbs/0000082_epson_420.jpeg" alt="" /></a></p> <p><a href="http://nopelectro-demo.pronopcommerce.com/epson"><img decoding="async" src="http://nopelectro-demo.pronopcommerce.com/content/images/thumbs/0000082_epson_420.jpeg" alt="" /></a></p> <p><a href="http://nopelectro-demo.pronopcommerce.com/epson"><img decoding="async" src="http://nopelectro-demo.pronopcommerce.com/content/images/thumbs/0000082_epson_420.jpeg" alt="" /></a></p> <p><a href="http://nopelectro-demo.pronopcommerce.com/epson"><img decoding="async" src="http://nopelectro-demo.pronopcommerce.com/content/images/thumbs/0000082_epson_420.jpeg" alt="" /></a></p> <p><a href="http://nopelectro-demo.pronopcommerce.com/epson"><img decoding="async" src="http://nopelectro-demo.pronopcommerce.com/content/images/thumbs/0000082_epson_420.jpeg" alt="" /></a></p> <p><a href="http://nopelectro-demo.pronopcommerce.com/epson"><img decoding="async" src="http://nopelectro-demo.pronopcommerce.com/content/images/thumbs/0000082_epson_420.jpeg" alt="" /></a></p> <p><a href="http://nopelectro-demo.pronopcommerce.com/epson"><img decoding="async" src="http://nopelectro-demo.pronopcommerce.com/content/images/thumbs/0000082_epson_420.jpeg" alt="" /></a></p> <p>

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 to prepare 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 450px) as we have specified in media settings previously).

Lastly, thank you for choosing NopElectro 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!