Last updated : 2024.10.07~16.06.34 ET
( Locked ● Limited version )
by CJ

On this page:

Access to these notes
Overview
Responsive design
PageSpeed metrics
Server configurations
Masthead themes
Product page
Photos page
Checkout page
Accessibility
Promo codes
Promo, Live Demo
Colophon

[ ✗ ] Clear any user-added #Anchor from URL,
or add one using # in any section-heading below.
💡 Open the Store Homepage in a new tab,
so that you can refer to this reference side-by-side.
🤷 Got caught up browsing and need to get back here?
There’s a Notebook-link at the very bottom of every page.

# 1. Access to these notes

This reference is intended for a select audience; it covers some of the design decisions and technical aspects of my online store. There are two versions, the Full version and the Limited version (which has sections 5 through 12 excluded).

If you previously accessed the Full version of this notebook from another device, or if you have cleared your browser’s cookies, you will need to again begin from the URL that you previously used to unlock this reference.

# 2. Overview

Built from scratch, the Think Great Stuff store is entirely my endeavor: Graphic design, UI/UX, PHP, javascript, html5, css.

Because of its unique design (looks nothing like Shopify) I’ve decided to share here something of the considerations that went into its build, all of it hand-coded.

Clear straightforward efficient-to-use layout. No popups, interstitials, animated-dance of product photos or as-you-scroll sliding panes. You might think of it as “a vintage site” (selling vintage stuff) with just the right amount of modern UX accoutrements.
Companion toolset, the centerpiece of which is its Product Listing Tool. Built to be a lot more efficient than the ones I’ve use at eBay, Etsy and Ruby Lane — description, photos, box dimensions and weight, video link and much more. It also generates the Products Sitemap and Google Merchant Feed.
Shipping Calculator, built into this PHP module is the entire UPS Ground shipping-data table (in one pound increments, 1–150 lb x 10 zones), all of the outgoing Area Surcharge Zip codes, a dimensional weight calculator, insurance cost calculator, and all other UPS ‘value added services’ costs. Accurate to exactly what UPS charges me.
Comprehensive, flexible and tamperproof system of promo codes, which includes an option of generating special codes that are valid for just one specific item. Also, of course, the more typical function of discounting (some or all) products. Lots more below on this.

# 3. Responsive design

Responsive design — but not in the usual sense — instead, a consistent page layout across all devices.

A photo showing an iPad Pro, an iPad Mini, and an iPhone — with my store’s different responsive design layouts superimposed.

Three breakpoints, Left to Right:
Desktop browsers and extra-large tablets (13" iPad Pro shown)
11-inch and smaller tablets (8.3" iPad Mini shown)
Phones (6.7" iPhone 13 Pro Max shown)

Many sites are no doubt best served by the usual ‘layout shift’ implementations, but for a variety of reasons (among them: desired ‘information density’, some particular functionalities, a shopping clientele that tends toward an older adult demographic) I took a different approach to my store’s responsive-ness.

Through careful consideration of viewport real estate and perceived-size of elements based on those in close proximity, I created a solution that renders the identical page layout desktop and mobile — the responsive aspect being solely the font size.

# 4. PageSpeed metrics

High marks from PageSpeed; here is a recent screenshot showing the six origin/sitewide “Field” metrics, and, below them, the “Lab” metrics for a typical product page.

A screenshot of a Think Great Stuff product-page submitted to the PageSpeed Insights test-suite.

By the way, at the bottom of every store-page is a link that directly submits itself to PageSpeed. This will (usually) fetch the Field-metrics (collectively, the three Core Web Vitals and the three “Other Notable Metrics”) and live-test the Lab-metrics for the submitted page.

Note, though, that (dependent on the variability of site traffic over the previous 28 days) one some or all of the Field-metrics may at times show as N/A, not available. And the Lab-metrics may vary significantly based upon transient server and transport factors; so if those show as quite different than above: Re-run the test several times, every few minutes or so, to see if a low-score might be an outlier due to AWS or other switch congestion, etc.

# 5. Server configurations