Niara Theme Glitches & Discussion

[dynambee]

First off, I like the Niara theme. A lot. It's clean and loads quickly, two things that are very important to me.

I have a dev site with about 3000 products on it now and have seen a few glitches & issues with Niara, or maybe with the way I have things set up. This is NOT meant as criticism in any way and I'm sure some of the issues I am seeing are because I haven't yet figured out how to correctly modify the theme to better suit my likes. However I would like to generate some discussion and hopefully find ways to improve the default theme for everyone.

Here are some of the issues I have encountered so far during testing:

💎 Issue: When viewing on mobile if I choose to view a product category this is what I get, in order:

1. A list of all subcategories in that category, listed one per line. Right now I'm looking at a category with 13 subcategories so that is basically one mobile browser screen to scroll past. On desktop this appears on the top left of the page when viewing a category, which is great, but having them appear first on mobile (and not in a collapsed form) seems like rather a lot for a mobile user to scroll past.
    
2. INFORMATION section with Delivery, Legal Notice, T&C, About us, Secure payment, and Our stores. On desktop this appears below the category list in the left column which is great, but again it is stuff that people don't need to see towards the top of every page and scroll past on mobile.
    
3. NEW PRODUCTS section with half a dozen new products listed.
    
4. VIEWED PRODUCTS with some recently viewed products listed, complete with thumbnails.
    
5. RECENT POSTS with a few recent blog posts listed.
    
6. Finally, if the customer doesn't give up scrolling past everything above, 12 products are listed. If they want to see the next page of 12 products they click on next and then have to start at the top of the page and scroll all the way down to the products list again. Rinse and repeat for every page. It's not a very pleasant browsing experience.

Suggestion: What I would personally like to see instead (and again, I know that other people might have other ideas or preferences!) is the subcategories compressed into a clickable menu called subcategories, and then the current category's products immediately below that. Below the products can be things like New Products, Viewed Products, etc. Then again, considering mobile data and mobile page loading speeds those extra sections might not be necessary at all when browsing a category on a mobile device.
 

💎 Issue: When viewing a product detail page on mobile, tapping on the main photo causes a pop-up to appear, the same as on desktop. On desktop the pop-up contains a larger image which is great. However on a phone (not sure about a tablet) the pop-up image is actually smaller than the main image just clicked on! When clicking on thumbnail images below the main image the same pop-up happens and of course it also shows a smaller image than the image that just appeared behind where the pop-up is. Worse, the main image is obscured by a magnifying glass symbol which seems to indicate that clicking on it will give a larger image, but of course clicking on it gives a smaller image. Since touch interfaces have no equivalent to a mouse-roll-over there is no way to select an image without the annoying smaller-image pop-up appearing.

Suggestion: On mobile don't offer "zoom" that doesn't zoom. Tapping on thumbnails can show the larger image in-page (no pop-up) for a cleaner overall customer experience.
 

💎 Issue: The Summary page of the mobile checkout process isn't mobile-optimized. The product list seems to be desktop width and customers have to scroll back and forth to see what is in their cart.

Suggestion: There is already a mobile view of the shopping cart implemented (the My Cart icon view), could this be adapted for use on the checkout Summary page as well?
 

💎 Issue: This issue is possibly related to me uploading products & images through the API and not creating them in the back office. For some reason the NEW PRODUCTS list that appears in the sidebar of category pages does not properly show thumbnails. There are two large "image missing" icons at the top followed by 4 products listed. The first "image missing" icon links to the first product in the list and the second "image missing" icon links to the second product in the list. It looks like this:

I have created a couple of different dev sites and done multiple uploads to each and it always looks like this. I have no idea why or even really how to figure out what has gone wrong. If any of the devs would like access to my current dev site to see what is going on I would be happy to provide it by PM.

 

That is about all I have for now. I am sure as I test more I will come across more quirks and issues. Thanks for reading and I hope we can create an even better base theme for everyone to use!

 

 

 

 

[toplakd]

It's so, that none of the stock themes are mobile friendly. Even on small tablets the good experience stops.

And the same thing is present at the complete checkout process.

That's why I heavily modified the original Community theme to better suit my needs as currently over 80% of my sales are done through mobile phones.

I'm using slideout/dropdown menus to access most of the things on mobile devices and configured it for at least 360px width.

can be viewed here: shop.alza-racing.com
 

Something like that could be added as option to the existing themes.

I've also modified 5 step checkout into 3 step, as using OnePageCheckout brings out shipping issues if used together with AEUC module.

So 1st step is cart, 2nd step is login/shipping and 3rd step is review and order confirmation.

 

This all together brings needed scrolling on mobiles down to the minimum.

 

Edited September 22, 2019 by toplakd

[alwayspaws]

@toplakd Your site is terrific!

[netamismb]

Regarding point one, with an older community theme, on mobile the side blocks are displayed as menus, which is a better user experience.

Edited September 22, 2019 by netamismb

[toplakd]

The most usable thing on small mobile devices icon based popup/slide menus.

This is not that hard to integrate.

But it's way harder to make the rest of the site prepared for the mobile view. That's because a lot of modules are available and changing them would take a lot of time.

I spent countless hours adjusting my theme, which would not work for 99,9% of the other shop instalations, as I use few front office modules (11) and only adjusted what i needed.

So I do appreciate all the work that has been done on Niara theme, but for making it totaly mobile friendly Tommat should start some donation campaign.

Installed module.

Edited September 22, 2019 by toplakd

[zen]

Very interesting thread, let's start to upgrade Niara with better mobile experience ! I am agree to spend time for that and make a super mobile friendly theme 🙂

[cienislaw]

4 hours ago, netamismb said:

Regarding point one, with an older community theme, on mobile the side blocks are displayed as menus, which is a better user experience.

this should be ported back - without it, browsing Niara on mobile is really long run for your fingers.

[Factor]

10 hours ago, dynambee said:

FORMATION section with Delivery, Legal Notice, T&C, About us, Secure payment, and Our stores.

I think you can delete this in blockCMS.  If you are wanting to get rid of it.  Oh sorry you are looking at mobile.  

Edited September 22, 2019 by Factor

[KolS]

Guys, how we can restore this accordion tab? I really wanted to implement this one on my client's site.

[Wartin]

On 9/22/2019 at 8:09 AM, dynambee said:

Then again, considering mobile data and mobile page loading speeds those extra sections might not be necessary at all when browsing a category on a mobile device.

Hello. I think this is probably the best option, maybe it is not needed to see those blocks in mobile when seeing a category. This is for just hidding them then we are on mobile.

Go to Preferences -> Custom code, and in CSS paste:

@media screen and (min-width: 0px) and (max-width: 768px) {
  #special_block_right, #viewed-products_block_left, #beesblog_column { display: none; }
}

It just hide the three modules when the screen is smaller than 768px.

[Chandra]

You could hide them on mobile from the front end from the modules dropdown easily. No need of code.

[Marcel vos]

Hoe difficult will it be to implement some thing like shop ware menus into thirty bees .they have a slide out cart menu and a slide out categories menu.

so does Drupal .

I have tried them all thirty bees still best with speed and product listing and built in features.

[Wartin]

11 hours ago, Chandra said:

You could hide them on mobile from the front end from the modules dropdown easily. No need of code.

I suspected it could be done better. I'm, sorry, but I don't understand. From where can I do that? Which dropdown?

Thanks!

[Marcel vos]

If you go to modules page .each module will have a configure option ,you have the option to display that module on mobile phone or to not display that module.select the modules you want to hide on mobile page .Ive disabled new items.blog pages ...

[AndyC]

I was going to start a new post about any Niara hacks/improvments people are willing to share which improve the function of the theme.

There must be some by now

[veganline]

Broader: hacking one theme to get the benefits of another. Community Theme can be quite pretty if half the formatting is blocked-out; less is better. And Panda: I've never tried it. Is there an advantage over Niara, and could I hack that advantage into Niara once I have got the idea?

Edited May 10, 2020 by veganline

[AndyC]

Panda is very nice and does work well as I have it on my main site. It's taken me a long time to get everything working correctly though with fine tuning lol

So far on niara only a few things bug me with the main 1 be the category list in mobile view

[veganline]

I can't make the Niara New Products block work. even if I un-tick the left column box for it.
And I find the formatting fiddly to hack.

[Marcel vos]

try in different browser.I found that some times even thou you clean cache .website does not display properly,does not show changes . It like need hard reset.