Better Accessory Design

[n_s_simpson]

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

Edited March 12, 2015 by n_s_simpson (see edit history)

[musicmaster]

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;
}
}

[n_s_simpson]

Aha, thank you. I'll speak to my web programmer about this and hopefully get it sorted out.

 

Did you think the layout itself is okay?

[TheWolf]

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.

[musicmaster]

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.

[n_s_simpson]

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

[TheWolf]

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.

[n_s_simpson]

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.

[musicmaster]

Hi n_s_simpson,

 

Any news from your programmer?

[n_s_simpson]

Hi, she's still playing around with this as we've spotted a couple of issues. Also plan to make a few other alterations to it but once she's done I've asked her to provide the code.

 

Cheers