Download a Free Responsive CSS File:

Option 1 - Used on Demo Store

FREE-celebrity-resp.css: This CSS skin is the same file in use on demo.nrostores.com. It contains minor responsive changes, but no significant changes to the overall look and feel. Width of site on desktop devices is 1010px.

Option 2 - Wider Category Bar

FREE-BASIC-celebrity-resp.css: This CSS skin is contains minor responsive changes similar to the above, but with more room for the categories by moving the search bar to the header area.

NEW! Option 3 - Big Slideshow

STARTER-celebrity-respBIGSLIDESHOW.css: RECOMMENDED! This CSS skin enlarges the width of the entire site. Width of site on desktop devices is 1400px.

The following recommendations work best with this free template skin:

  • Theme Settings (System / Configuration / Theme Settings):
    • Enable Responsive (Appearance): Yes
    • Slider (Appearance): Latest Arrivals & On Sale
    • Font (Appearance): Montserrat
    • Menu Style (Navigation): Standard (for 1 column dropdowns) or Enhanced (for multi-column dropdowns)
    • Related Items in Right Column (Product Options): Yes
  • Home Page:
    • Slideshow image: 1400px x 554px
    • 3 Banner images: 462px x 276px
  • Sample Category Landing Page (Women's)
    • Big Hero Image (top left): 728px x 336px
    • Small Hero Image (top right): 462px x 429px
    • 3-Across Banner Images: 462px x 278px
    • Brand Logos, maximum width: 125px
  • Product Image Sizes - you must contact Support to change the size of the Small (New+Sale Slider) to 234px  x 282px (System / Configuration / Theme Settings / Product Image Sizes):

Upload the CSS file to your site:

  1. Click one of the links above to open the file in your browser window, and then select File / Save Page As to save a copy of the CSS file to your local machine
  2. From the NRO Admin Panel, select CMS / Images & Other Files
  3. Create a new directory named css
  4. Upload the new CSS file (e.g., FREE-celebrity-resp.css) to the css directory

  5. Select System / Configuration / General / Design / HTML Head > Misc Scripts and paste the folowing (make sure the file name matches the name of the file you've chosen):

    <link rel="stylesheet" type="text/css" href="/media/wysiwyg/css/STARTER-celebrity-respBIGSLIDESHOW.css">

  6. Now see if your website passes Google's Mobile-Friendly Test.

 

Theme vs. Contents

The responsive theme provides the overall framework and is provided at no additional charge.

But your specific site page contents—like header, footer, and home page areas—as well as your existing CSS, may also need to be re-configured to work responsively. It's important to understand that responsive themes are more complex than traditional site design, and each area must be styled accordingly so the content looks good on phones, tablets, computer screens, etc.

If you need assistance with responsive site design, we offer hourly design services ($150/hour). 

 

Common Issues

Site Doesn't Look Any Different:

Once the theme files have been delivered, you must select System / Configuration / Theme Settings > Appearance and ENABLE the responsive theme. Next, select System / Cache Management and click the Flush Magento Cache button to clear the cache.

Long Description Not Displayed:

This theme has a new setting that allows you to show or hide the long description. If you don't see your product descriptions in the tabbed area, select System / Configuration / Theme Settings and change Show Description Tab on Product Page to Yes.

Site Doesn't Pass the Google Test:

The most common reason that a responsive NRO site doesn't pass Google's Mobile-Friendly Test is because of outdated robots.txt rules. Please contact NRO Support for assistance if your live site is not passing Google's Mobile Friendly Test. Note: Staging sites and non-live sites are not crawlable, and therefore will not pass the Google test.