Website refresh: supporting documents

What the RFP asks for

Scope agreed on the 8 October 2026 call

• A design refresh. TechNext provides GeneratePress settings, one CSS file and graphics, and McGallen & Bolden installs them on the live site.
• Not changed: WP EasyCart and its settings, the AI chatbot and the hosting. No rebuild.
• Product updates (20+ new products) follow as a separate, second part.
• Look: minimalist, modern, fast on phones and readable by AI search. Images look real: only HST's own product photos and artwork are used.
• Least cost: no new plugins, licences or hosting.

Compliance, requirement by requirement

Nothing extra to install. The EasyCart styling is part of hst-refresh.min.css in the install zip, so it goes live with step 5 of the install guide. It is CSS only: no EasyCart template is copied or changed, so EasyCart updates keep working, and the store settings, prices, stock and checkout steps stay exactly as they are.

Built for the markup of WP EasyCart 6.0.3 on GeneratePress 3.6.1 + GP Premium 2.5.6, the versions the live site runs.

Where it sits in the CSS

In the readable hst-refresh.css (the minified file holds the same rules in the same order):

EasyCart's own Design settings (colours and fonts in EasyCart › Settings › Design) no longer show through on these pages: the store follows the site palette and fonts instead. To change the store's magenta, change the values in section 1 of the CSS (--hst-stamp, --hst-stamp-hover, --wpec-main-color and the brand tokens).

What changes, view by view

Store and category pages (section 7)

• Product grid: as many columns as fit (cards at least 200 px wide), 2 on phones, 4 in the homepage popular picks. Cards are of equal height, with the price and button aligned along the bottom. Product names show up to 3 lines (4 on phones).
• Product photos sit on a soft floor shadow and lift slightly on hover (switched off for reduced motion).
• Sidebar: the search box and category list as tinted pills; the current category is filled in magenta. On phones the sidebar folds into EasyCart's Filters button, and the Filters button and sort menu share one row.
• Sort menu, sale and "new" tags, out-of-stock notes, Quick View, "added to cart" and loading states restyled.
• "Add to cart" buttons are full width and at least 44 px tall for touch.

Product page (section 8)

• The repeated page title and page image GeneratePress adds above the product are hidden, so EasyCart's own photo, title and price lead. This also removes the layout shift on product pages (see Performance).
• The product photo sits on a soft halo; title and price use the heading font and the new type scale.
• Options, quantity stepper and "Add to cart" restyled; option error messages keep EasyCart's own colours.
• Description and specification tabs as pills (they fit EasyCart's folded tab row on phones); related products in the same card look as the store.

Cart, checkout and account (section 9)

• Cart table, item photos and titles, coupon and price rows, totals and "Continue shopping" restyled.
• Checkout breadcrumb (current step in magenta, later steps grey), form fields and success messages restyled; error messages keep EasyCart's own colours.
• My account dashboard links restyled.
• The checkout flow itself (steps, fields, payment) is EasyCart's own and is not changed.

Tested

Store, category and product pages on snapshots of the live site (WP EasyCart 6.0.3 with Pro) at 1440, 1280, 1100, 1024, 1000, 900, 820, 801, 800, 768, 414, 390 and 360 px: no layout breaks and no horizontal scrolling caused by these files. The cart (with a product added) and the checkout details step on a local copy of the site (WP EasyCart 6.0.1, free) at 1440 and 390 px. Screenshots are below.

After an EasyCart update, check the store, a product with options and a sale price, the cart and the checkout: the CSS follows EasyCart's class names, and a major EasyCart release can rename them.

Outside these files

• EasyCart prints a few controls without text labels: the sidebar search buttons, the sort menu and the product quantity field. CSS cannot add labels, so these need a small template or plugin fix if a full WCAG 2.2 AA pass is wanted (see Accessibility under Requirements and compliance).
• At 360 px the live cart page can be scrolled 6 px sideways. It does the same with and without these files (measured on both), so it does not come from them. Phones 390 px and wider are not affected.

Result: PASS. 0 parse errors and 0 policy issues in every file of this package.

The WordPress Theme Check plugin scans a theme folder (PHP templates, style.css headers, functions.php). As agreed on the 8 October call, this handover ships no theme folder: it is two GeneratePress settings files, Additional CSS, graphics and an optional Hook Element of plain HTML, used with the GeneratePress parent theme that is already installed and is itself listed on WordPress.org. Theme Check therefore has nothing of ours to scan, and the live theme it would scan is unchanged.

In its place, every file we ship was checked for the same things Theme Check guards against:

About WordPress's own CSS checker. Customize › Additional CSS runs CSSLint from 2016, which does not know current CSS such as :is() and :has(). On hst-refresh.min.css it reports 99 "errors"; none is a real error (the current parser above finds 0). Install step 5 explains the "Update anyway" tick box.

No PHP and no JavaScript ship, so there are no deprecated functions, unescaped output or enqueue issues to report. The CSS, HTML and graphics are TechNext's original work with no third-party code; the product photos are HST's own.

Validator output

hst-gp-1-global-colors.json: valid JSON, GP Premium merge format (global-colors, 11 entries)
hst-gp-2-typography.json: valid JSON, GP Premium merge format (typography, 12 entries)
hst-refresh.css: 343 top-level rules, 0 parse errors
hst-refresh.min.css: 343 top-level rules, 0 parse errors
hst-refresh.min.css: the same rules, in the same order, as hst-refresh.css
hst-home.html <style>: 189 top-level rules, 0 parse errors
hst-home.html: 0 HTML parse errors; script tags 0, block-editor markup 0, inline event handlers 0, images without width/height 0, images without alt 0, iframes without title 0
RESULT: PASS

A new homepage block, added above today's Home content as a GeneratePress Hook Element on the front page. It shows 8 popular picks instead of the list of all 85 products, adds symptom finders that work with JavaScript off, and keeps the awards, the offer, the TV commercial, the Kowa news, Telegram and the links to the new Pain Relief and Cold, Cough & Flu pages.

How it is installed

About 10 minutes more, after the install files from the zip:

1. Upload its images to /wp-content/uploads/hst-refresh/.
2. Add a Hook Element, "HST homepage", on generate_after_header with Execute Shortcodes ticked and the location set to Front Page. This needs an Administrator account that can save unfiltered HTML.
3. On the Home page, remove only the "Bestsellers" heading and the EasyCart product list under it, and tick Disable Elements › Featured Image. Everything else on the page stays.

Editing it later

• Popular picks come live from EasyCart through [ec_product productid="16,28,29,27,24,11,31,39"]: Rheuma-Salve® Balm 50g, Cough Alievaid, Deep Sea Squalene, Pearl Powder, Crocodile Oil, Safari Buddies, Flu Gard and Melatonin 5mg. Change the IDs to change the products; prices always come from EasyCart.
• The offer banner is one line in the Hook Element; delete it when the offer ends.
• Health notes are three article links; edit them when newer articles should lead.

The install files

1. Accent colour: the design uses #dd1860. Today's accent is #D10056; the logo magenta is #DB026D. If HST prefers one of those, we re-issue the colours file and the matching CSS values.
2. Logo size, and whether the "A subsidiary of Kowa" line must stay readable. The header shows the logo up to 88 px tall on desktop and 60 px on phones; keeping today's size is a two-line change in the CSS.
3. The FDA statement in the footer ("not evaluated by the U.S. Food and Drug Administration"): keep it on a Singapore site?
4. Store categories: the phone Filters list shows both "Pain relief" and "Pain Relief" (two categories). Merge or rename one?
5. Free delivery wording: the Promotions page says "SGD 30 and above"; the Shipping page says above SGD 30, with SGD 1.99 at SGD 30 and below. Which is right?

The optional new homepage

1. Every factual line. The symptom and "How to use" lines follow HST's product sheets and product pages, with the daily maximums and the label cautions, plus "Always read the label and use only as directed. If symptoms persist, see a doctor or pharmacist." under each finder. Also the kicker "By HST Medical, a subsidiary of Kowa", the heading "Deep relief, five ways.", "Rooted in a family medical hall, since 1930", the popular picks (including Melatonin 5mg), the offer wording, and the products in each finder (they differ slightly from HST's new Pain Relief and Cold, Cough & Flu pages).
2. What it leaves out from today's Home: the Trustindex "Top Rated" badge, the multilingual "Authentic! Buy Direct!" line and Chinese sub-headings, the panel images, the list of all 85 products and the closing line.
3. Trademarks: the homepage marks Rheuma-Salve®, Heritage® and HST Medical® (as the store does), Alievaid™, and Zoo-Vite with no mark (as the store and catalogue do). The Kowa announcement uses Heritage™, HST Medical™ and Zoo-Vite™ instead: which is right?