I am building an ecommerce web site, and am trying to find a way to present the special offers. Products on special offer are grouped, so the offer applies to all products in that group. For example, there might be an offer on Jimbo's chocolate, where if you buy any of their three products, you get a second one free. That offer has three products in the group. By contrast, Rice Krispies may be on special offer, but the offer only applies to that one product alone.

At the moment, the special offers page looks something like this (irrelevant parts removed for clarity)...

enter image description here

This isn't great, mainly because there is a lot of white space in groups where there is only one product (the majority of them).

I thought about making the group box only as wide as the number of products, but that got very messy, as the last offer in the row often had the wrong number of products to fit on the row, so dropped onto the next row, leaving the previous one short. This gave a very ragged look to the right hand side of the page.

Anyone any suggestions how to group the offers neatly, but without wasting so much space?


  • Anyone able to advise? Commented Dec 23, 2020 at 17:15

3 Answers 3


Have you considered showing groups side by side? If the majority of groups only have 1 item you could easily show 2 groups on the same line. An example of what that would look like: Several groups on a row

Obviously if the group would exceed x number of items (in case of my design 4), it would jump to a full-width row. Which in the case of 5 items would still create some wasted white space, but much less than your current situation with minimal technical work.


Use a fixed width let say for 3 elements and make it horizontally scrollable if there are more than 3.

Thus you will always have a predictable width and will not waste much space.

  • Thanks for the reply, but I want to avoid horizontal scrolling if I can. Seems very unnatural. Also, given that most offers only apply to one product, even a fixed width of three would waste a lot of space Commented Feb 4, 2021 at 17:49

I feel that special offers are either one-timer or rare events that need emphasis, so you may like to have the groups rotating like a carousel in that space you proposed. Perhaps something like the banner on the website below.

image of how the special offers can be presented

That being said in place of a full banner like the example I shared above, it can be a group of product(s) on your e-commerce website. The meatballs menu in red circle allow users to choose which group of special products they want to look at in more detail.

  • Thanks for the reply, but this is for a grocery shop, and they have loads of special offers on at any one time, and they can run for months. Depends on how much of the product they got cheap.That's why we have a dedicated special offers page, where people can browse through them all. I need a neat way of laying out this page. Commented Feb 4, 2021 at 17:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.