TVTimeDirect

A Shopify storefront for As Seen On TV and direct-response goods, selling housewares, health, novelty and outdoor products to shoppers in the United States.

What they came with

A catalogue like this arrives in pieces. Stock spans chia pet planters, pest traps, wool insoles and reading sunglasses, each from a different direct-marketing supplier with its own packaging photography, and all of it has to sit in one grid and read as one shop. Almost everything is sold against a compare-at price, so the saving belongs on the card rather than in a banner. Two order lines and warehouse hours sit in the footer of every page, so the storefront is not the only route an order takes.

What the build had to do

Three ways into one catalogue

Every category has to be reachable from the header mega menu, from the circular carousel on the home page and from the sidebar rail on any collection page. All three read the same collection handles, so a new category appears in each place off a single edit rather than three separate ones.

A mega menu that carries stock

The Shop, Shop Houseware and Shop Health dropdowns do not simply list child collections. Each panel renders featured products with price, saving and an add-to-cart control, which means several collection queries have to resolve inside the header on every page render.

Product cards with five jobs

One card carries the percent-off badge, the compare-at strike-through, a wishlist heart, a quick view and a `/cart/add` form. Holding all five in a card that keeps a consistent height across a catalogue of wildly different product photography is most of the work.

Filter and sort on collections

Collection pages pair the category rail with a from/to price filter and a sort control covering price, title, date and best selling. Both are wired to Shopify's own storefront filtering rather than to client-side JavaScript, so a filtered view is a real URL that can be shared.

Reviews and a countdown per product

Judge.me metafields supply the rating and the review tab on the product page, and the same source feeds a site-wide reviews page. A per-product offer countdown sits beside the price, above the SKU and the product taxonomy path.

Technical detail

Filtering stays on the platform

The price filter posts `filter.v.price.gte` and `filter.v.price.lte`, and the sort control writes `sort_by`, so both resolve through Shopify's storefront filtering rather than in the browser. The grid a shopper sees is the same one the platform paginates and edge-caches, which is what keeps a deep category stable when the URL is shared or bookmarked.

Vendor libraries from public CDNs

Bootstrap, jQuery, Slick, Swiper and Font Awesome load from jsDelivr and cdnjs, the CSS with subresource integrity, rather than being compiled into theme assets. That keeps theme rebuilds small and shares a browser cache across sites. The cost is extra connections before first paint, paid down with preconnect and preload hints that Shopify emits as an HTTP 103 early-hints response ahead of the document.

Discount display has to degrade

The percent-off badge is derived from compare-at price, which is optional and set per variant. Where it is absent the card has to fall back to a plain price with no badge and no strike-through, and the card still has to line up with its neighbours in the grid. The same rule runs on the collection card, the mega-menu tile and the product page.