Making Loblaws Usable

7 December 2025

One of the many daily struggles of modern life is that we live in an era where even the hellspurned bigbox grocery store doesn't have an easy to use website any more. Due to not owning a car and difficulty of legging over to the grocery store every time I want produce, I use a delivery service and order a lot of my groceries online. I quite sincerely loathe this process. There used to be a bi-weekly produce box I got from a local farm co-op for many years in the pandemic, but they stopped the program a couple years ago. And unfortunately the neighbourhood grocery store is literally twice the price of the place I can order from.

So I'm stuck using Loblaws, and let me tell you, their website is HIDEOUSLY slow, and looks like garbage.

Here, I searched for milk. What, exactly, the hell am I looking at?

A loblaws store page for milk, where all the items are floating in white and various have strings of text partially obscuring them with mixed transparency.

All these things proudly proclaim they're made in Canada. It proclaims so even before I can read the label for the object I'm looking at. And they all swim in a sea of white, which for milk especially isn't super helpful. And what's this? That one there is Out of stock, though you can barely tell. And in fact so many of these images seem equidistant with some colorful bars between them... oh, but alas, those are actually part of the product image.

Clearly nobody knows how to make a UI any more.

There's also sponsored modals and unrelated suggestions!

Hold on sorry, that's chocolate, that's not even what I asked for! Go away! And Almond Breeze yes I can see you, but you're getting in the way of all my other results.

Well, after banging my head against trying to look through grocery options for half an hour, I finally came up with a great solution: I'll just write a Userstyle to make this page readable, and some ublock cosmetic filters to get rid of all this information.

So here you go! Here's both! And how much nicer it looks too:

And now everything has actual boxes so you can see where the objects are.

Furthermore, these work on all the other PC store sites, like nofrills, valu-mart, etc.

/* ==UserStyle==
@name           Make Loblaws Usable
@namespace      shadenexus.ca
@version        1.0.0
@description    Fixes the bad item presentation on PC brand grocery store pages
@author         Gwyndolyn Marchant
==/UserStyle== */

@-moz-document url-prefix("https://www.loblaws.ca/") {
	div.product-grid-component > .css-0 {
		border: 1px solid darkgray;
		border-top-color: lightgray;
		border-left-color: lightgray;
		border-radius: 2px;
		box-shadow: 2px 2px 2px lightgray;
	}
	
	div[data-testid="listing-page-container"] > div:first-child {
		border-right: 1px solid darkgray;
		box-shadow: 2px 0px 2px lightgray;
		
		.chakra-accordion__item {
			padding-right: 8px;
		}
	}
}

www.loblaws.ca###ada-entry
www.loblaws.ca##.logo--rapid
www.loblaws.ca##.chakra-text[data-testid="was-price"]
www.loblaws.ca##.chakra-badge[data-testid="product-badge"]
www.loblaws.ca##.chakra-text[data-testid="price-descriptor"]
www.loblaws.ca##p.chakra-text:has-text(Plus Tax)
www.loblaws.ca##.shrink-0.flex-1[data-testid="iceberg-masthead-left"] > span
www.loblaws.ca##button[data-testid="iceberg-stamp-cards-entry-cta"]
www.loblaws.ca##div.product-grid-component > .css-0:has(p.chakra-text[data-testid="inventory-badge-text"]:has-text(Out of Stock))
www.loblaws.ca##.product-grid-component > .css-0:has-text(You might like)