Jump to content

Better Accessory Design


n_s_simpson
 Share

Recommended Posts

Hiya, wondering if people can give me their input on a redesign to the accessories tab. We sell printers and copiers but some machines have dozens of accessories so listing them the default way (see capture.png) makes it really difficult to find what you want.

 

My web programmer spent at least 4 maybe 5 minutes on a redesign, which I think it looks good (click on "Accessories" tab):

 

https://devilprinters.co.uk/home/1326-epson-workforce-wf-3640dtwf-a4-colour-inkjet-multifunction-printer.html

 

My only concern is that because each product is no longer in a simple square box they don't automatically drop down to the next line when the page gets narrower. So viewing on a phone in portrait mode doesn't look very neat.

 

Should I ask my web programmer to switch to the original square product boxes below a certain page width? If so, how would this even be achieved?

 

Thanks

 

Nick

post-846853-0-57546000-1426123164_thumb.png

Edited by n_s_simpson (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

That is done with conditional css.

 

One way to do it is to define both layouts. You assign a class name to each of them. And then you make one of them invisible (style="display:none"). See the schematic example below:

@media (min-width: 768px) {
.bigversion {
  display: block;
}
.narrowversion {
  display: none;
}
}

@media (max-width: 767px) {
.bigversion {
  display: none;
}
.narrowversion {
  display: block;
}
}

Share this post


Link to post
Share on other sites

I really love the new layout! seems excellent for the type of store you have. if it's possible I would really appreciate to adapt this modification in my store (computer hardware and software). Thank you.

Share this post


Link to post
Share on other sites

I am a bit puzzled by your picture with 6 products on a row. On a mobile display I would expect at most 3. 

 

I would appreciate it is you could share the source of the page you mentioned in post #1. It contains some nice concepts.

Share this post


Link to post
Share on other sites

Hi Everyone

 

It's working, take a look here:

https://devilprinters.co.uk/home/1326-epson-workforce-wf-3640dtwf-a4-colour-inkjet-multifunction-printer.html

 

If you click on the accessories tab and then change the size of the window you'll see it switch to the original layout.

 

We've got a few other changes to implement so I'll get the code from my programmer when everything's done.

 

(Musicmaster - sorry for the confusion that was just a screen grab from a windows browser.)

 

Cheers

 

Nick

Share this post


Link to post
Share on other sites

Simpson, you have to tell me. How did you get your prestashop store so blazing FAST?!?

Any tips? which hosting you use? special settings? my store is a snail, and stumped on snail next to your site.

Share this post


Link to post
Share on other sites

  • 2 weeks later...

Hi TheWolf, I'm currently using DigitalOcean and have a completely unmanaged Ubuntu server so I had to build it from scratch. I currently use their basic $10 a month server so I expected that I'd need to increase that when I went live but it seems to be working perfectly even under load so there's no need to.

 

I'm using MariaDB and the latest PS version. I've done so much tweaking and I didn't document anything so I can't tell you why it runs smoothly but I'm really impressed with DigitalOcean.

Share this post


Link to post
Share on other sites

  • 1 month later...
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More