This page is a redesign checklist for the product template and product includes. It documents when each UI element is shown, hidden or changed and under what conditions.
1. Page title / heading
| State | When |
|---|
| Title only | Product has no subtitle. |
| Title + subtitle | Product has subtitle; muted subheading under main title. |
2. SKU (under title)
| State | When |
|---|
| Hidden | Product has no SKU or SKU empty. |
| Shown | Product has SKU; line “SKU code: [code]” under title (and subtitle if present). |
3. Brand block (image area)
| State | When |
|---|
| Hidden | No brand or brand has no image / no body. |
| Shown | Product has brand with image; logo/link block above main product image. |
4. Vehicle finder link (above images)
| State | When |
|---|
| Hidden | Product not in the specific parts-finder category IDs, or no vehicle parent tree name. |
| Shown | Product in category and vehicle data present; “Click here to search for your [category name]” (opens brand finder modal). |
| State | When |
|---|
| Hidden | Vehicle finder off, or very small viewport (tags use d-none d-sm-block). |
| Shown | Vehicle finder on and viewport ≥ sm; list of vehicle tags (e.g. Make, Model, variant) with links + “Not your vehicle? [link]“. |
6. Mobile “This product fits” strip
| State | When |
|---|
| Hidden | Vehicle finder off, or viewport not in d-block d-md-none (i.e. not mobile-only). |
| Shown | Vehicle finder on and mobile viewport; strip with “This product fits: [vehicle links]” and “Not your vehicle? [link]“. |
7. Main images + thumbnails
| State | When |
|---|
| Single SKU / variation | One main image and set of thumbnails (AJAX-loaded for current SKU). |
| Updates on variation change | When user changes variation, main image and thumbnails swap to selected variant. |
8. Cross-sell “Make it a Bundle” (above images, desktop)
| State | When |
|---|
| Hidden / empty | No cross-sell items for product. |
| Shown with slider | Product has cross-sell items; heading “Make it a Bundle” and slider with checkboxes + “Add to bundle”. |
9. Anchor tabs (jump links) – desktop
| State | When |
|---|
| Description only (plus Specs) | No kit, warranty, features, reviews; 2 tabs: Description, Specifications. |
| + Kit Includes | misc28 set; tab “Kit Includes” appears. |
| + Warranty | warranty set; tab “Warranty” appears. |
| + Features | features set; tab “Features” appears. |
| + Reviews | config show_product_reviews on; tab “Reviews” appears. |
Any combination of the four optional tabs (0–4); always Description + Specifications. So 2^4 = 16 tab combinations.
11. Stock / availability banner (buying panel top)
| State | When |
|---|
| Shipped from Supplier | misc12 = true (direct-ship override). |
| In Stock | X Available in NSW Warehouse | NSW warehouse (misc25), store_quantity > 0, allow_oversell = n; X = quantity or “25+“. |
| In Stock (no quantity) | As above but allow_oversell = y. |
| Special Order Available | misc25 = y and (store_quantity < 1 or allow_oversell = y). |
| Pre-order – Released [date] | Pre-order with arrival_date and config use preorder quantity. |
| Pre-Order Available | Pre-order, store_quantity > 0, no preorder quantity config. |
| In Stock | 1 Available (warning, tooltip) | store_quantity = 1, not preorder. |
| In Stock | 2+ Available (green) | store_quantity > 1, not preorder. |
| Backorder Available | No stock, allow backorder, no incoming quantity. |
| On its way | X Incoming… | No stock, allow backorder, incoming_quantity > 0. |
| Sold Out | No stock, backorder not allowed. |
12. Discontinued banner
| State | When |
|---|
| Hidden | misc26 not true. |
| Shown | misc26 = true; discontinued/run-out image below stock banner. |
| State | When |
|---|
| Hidden | Not in promo, or in promo but no misc11 image / no misc29 link. |
| Shown | In promo and promo image + link set; image above price block. |
14. Price block (main buying panel)
| State | When |
|---|
| Not shown | Product has child products and no variations (price in child table only). |
| Single price | !has_child or has_variation; not in promo; no savings. |
| RRP strikethrough + single price | As above; savings > 0; RRP (retail) shown struck through, then store price. |
| RRP + price + SAVE $ (Y%) | As above; savings > 0; non–group-2 customer; SAVE line shown. |
| RRP + price (no SAVE line) | As above; customer in group 2 (e.g. trade); SAVE line hidden. |
| WAS + Now (promo) | In promo; no savings or savings; WAS store price, Now promo price. |
| WAS + Now + SAVE X%! | In promo, savings > 0; SAVE % under Now. |
| Optional RRP above WAS/Now | In promo and savings > 0; RRP strikethrough above WAS. |
15. Primary CTA (Add to Cart area)
| State | When |
|---|
| Not shown | Product has child products and no variations (CTA in child table). |
| Add to Cart | In stock, not preorder; or preorder without preorder-quantity config. |
| Pre-Order Now | Preorder with preorder quantity and config. |
| Backorder | No stock, backorder allowed; button + bell icon (notify modal). |
| Notify Me | Sold out (no backorder); link opens notify modal. |
Duplicate CTA block for mobile (d-sm-none) with same states.
16. Sale countdown (under price)
| State | When |
|---|
| Hidden | Not in promo, or in promo but customer in group 2, or no savings. |
| Shown | In promo, savings > 0, customer not group 2; “Sale ends in [countdown]” + end date. |
17. Quantity field + wishlist row
| State | When |
|---|
| Shown (quantity + wishlist if config on) | Single product or variation; not sold out with no quantity. |
| Quantity only (no wishlist) | Wishlist disabled in config. |
| Wishlist: Add to wishlist | Config on, product not in wishlist. |
| Wishlist: Remove from wishlist | Config on, product in wishlist. |
| Row hidden / N/A | Sold out with Notify Me only (no quantity); or child-products table has its own quantity column. |
| State | When |
|---|
| Empty / not populated | Product has no cross-sell items (limit 4, show_all 0). |
| Populated | Product has cross-sell; script builds slider with cards and “Add to bundle” checkboxes. |
| State | When |
|---|
| Hidden | store_quantity ≥ 3, or preorder, or misc25/misc12 (special order/direct ship). |
| Shown | store_quantity 1 or 2, not preorder, not special order/direct ship; “Low Stock. Act Quickly.” strip. |
20. Backorder block (“Backorder? No problem.”)
| State | When |
|---|
| Hidden | In stock, or backorder not allowed, or special order/direct ship (misc25/misc12). |
| Shown | store_quantity < 1, backorder allowed, not misc25/misc12; block with estimated restock and info modal link. |
| State | When |
|---|
| Hidden | Not (misc25 or misc12), or no availability_description. |
| Shown | (misc25 or misc12) and availability_description set; green alert + optional ETA modal button (misc7). |
22. Shipping calculator
| State | When |
|---|
| Hidden | config show_shipping_calc off, or service_only = y. |
| Shown | show_shipping_calc on and service_only = n; AJAX delivery options template loaded. |
| State | When |
|---|
| Hidden | No misc9 or no misc19. |
| Pipe-separated list | misc9 and misc19 set; misc9 contains " |
| Comma/inline list | misc9 and misc19 set; misc9 does not contain " |
| State | When |
|---|
| Always shown (desktop) | d-none d-lg-block; phone, chat, email; hours. |
25. Buying UI: variations vs child table
| State | When |
|---|
| Variation selector | has_variation = true; “Buying Options” + one block per variation (see 26–29). |
| Child products table | has_variation = false; “Buying Options” + table (see 30–32). |
26. Variation row: visible vs hidden
| State | When |
|---|
| Hidden | specific_autohide = true for that variation. |
| Visible | specific_autohide = false; variation control shown. |
27. Variation control type (per variation)
| State | When |
|---|
| Link list | Default; clickable options (text and/or image). |
| Radio buttons | variation_body_radio used. |
| Image / swatch | variation_body_image used. |
| Dropdown (select) | variation_header_select / body_select / footer_select used; options can show “(Backorder)“. |
28. Child table: price column
| State | When |
|---|
| Hidden | price_hide = Y (e.g. wholesale default group). |
| Shown | price_hide = N; Quantity, Image, Name, Price columns + “Add Selected to Cart”. |
29. Child table row: quantity cell
| State | When |
|---|
| Disabled (no qty) | extra or has_child (child has its own options); “See Buying Options” link in price cell. |
| Pre-order qty input | available_preorder_quantity > 0, preorder, config use preorder quantity. |
| In-stock qty input | store_quantity > 0. |
| Backorder qty input | store_quantity < 1, allow backorder. |
| Disabled (sold out) | store_quantity < 1, no backorder. |
30. Child table row: price cell badge / CTA
| State | When |
|---|
| Price + “See Buying Options” | extra or has_child. |
| Price + “Pre-Order” badge | Preorder (with or without preorder quantity). |
| Price + “In stock” badge | store_quantity > 0, not preorder. |
| Price + “Back Order” badge | store_quantity < 1, backorder allowed. |
| Price + “Sold Out” badge | store_quantity < 1, no backorder. |
31. Accordion: Description panel
| State | When |
|---|
| Text only | description set; no misc20 (video). |
| Text + video | description set; misc20 set; lite-youtube embed (desktop accord has script/link; responsive has embed). |
32. Accordion: Kit Includes panel
| State | When |
|---|
| Hidden | No misc28. |
| Shown | misc28 set; panel with thumb_list of kit products (up to 4). |
33. Accordion: Warranty panel
| State | When |
|---|
| Hidden | No warranty content. |
| Shown | warranty set; panel with warranty text. |
34. Accordion: Features panel
| State | When |
|---|
| Hidden | No features content. |
| Shown | features set; panel with features text. |
35. Accordion: Specifications panel
| State | When |
|---|
| Always present | Panel always shown. Optional specifications HTML; table with: item_specifics (dynamic rows), SKU row; then optional rows: manufacturer_model, barcode, brand, artist_author, weight, width, height, length, cubic, unit, actual_length/height/width, product_type, format (each only if set / > 0). |
36. Accordion: Reviews panel
| State | When |
|---|
| Hidden | config show_product_reviews off. |
| Shown | show_product_reviews on; panel with Reviews widget (desktop #ReviewsWidget; responsive #ReviewsWidgetResponsive). |
| State | When |
|---|
| More for your Vehicle | content_path (parts-finder) returns content; section title “More for your Vehicle”; thumb_list from category, limit 4, exclude current SKU. |
| Related products | Same content_path but ifempty; related_products block; title “Related products”. |
38. “You May Also Like” (cross-sell section)
| State | When |
|---|
| Empty / no items | crosssell has no items for product. |
| Has items | crosssell has items; section “You May Also Like” + product row. |
39. Recently Viewed
| State | When |
|---|
| Always present (if config/data) | product_history block; “Recently Viewed” + product row; not conditional on current product. |
40. Modals (always in DOM; open on trigger)
| Element | Trigger |
|---|
| ETA / Availability (eta_des) | Button in Availability information block (misc7). |
| Contact Us (contactEmail) | Email link in “Need Some Advice?”. |
| Price Match (priceMatch) | (If linked from somewhere.) |
| Backorder info (bck_order) | Info icon in “Backorder? No problem.” block. |
| Notify when in stock (notifymodal) | Notify Me CTA or bell icon. |
| Brand / vehicle finder (brand_finder) | “Click here to search for your…” when vehicle finder on. |
| State | When |
|---|
| AJAX-loaded | Template Product-header loads for current SKU; content can include components. |
Summary: element count
- 42 element groups above (some have multiple states).
- Stock banner: 11 states.
- Price block: 8 states.
- Primary CTA: 5 states.
- Anchor tabs: 16 combinations (Description + Specs + 0–4 optional).
- Child table row: 5 quantity-cell states × 5 price-cell badge states (mix per row).
- Documents: 3 states. Vehicle finder: 2 × (link, tags, strip) as in doc.
- All others: 2–3 states each.