DGU Product Page — Implementation Notes
Reviewed 2026-11-10

Implementation reference for the approved product-page prototype. Requirements below describe the current intended experience; production-connection notes identify demo data or missing live services. UX-audit suggestions are not added to the approved scope unless explicitly described below.

45 implementation notes across 8 page areas. Reference IDs match the on-screen Implementation Notes panel.

Use index.html, styles.css, script.js, video-config.js, and assets/ as the visual/interaction reference. change-log.js is the single source for this guide and the in-page notes.

Run npm run build after editing change-log.js to regenerate both handoff formats and copy the current prototype into dist/.

Review controls, annotation badges, sample inventory/prices/reviews, and simulated service responses are not production storefront UI. Integrate the approved behavior with the existing live Magento implementation.

CONTENTS
HDR — Header & Purchase Summary (6 notes)
IMG — Main Image Window (9 notes)
SIDE — Sidebar (5 notes)
LOW — Lower Product Section (6 notes)
PICK — Stock Picker Overlay (7 notes)
CART — Cart Drawer & Purchase Feedback (3 notes)
MOB — Mobile Layout & Page Theme (4 notes)
PREV — Review Controls & Implementation Handoff (5 notes)


HDR — HEADER & PURCHASE SUMMARY
Global navigation and the product identity, price, and selection entry point.

HDR-01 | Branded Header & Catalog Navigation
- Use the DGU logo and green header with Discs, Plastics, Shop, Deals, and Blog navigation.
- Discs opens a family selector and related model links. Plastics opens a direct grouped directory with every plastic option visible. Search, account, and cart remain accessible; menus close on outside click or Escape.
- On phones, keep the logo and utility controls above a separate navigation row.
Live implementation: Connect category links, search, account, and cart to the live Magento routes. The preview uses sample menu data.
Reference element: .dgu-site-header

HDR-02 | Product Title, Price & Select Discs
- Place the product title, price, and primary Select Discs action together above the gallery/sidebar.
- Select Discs opens the stock picker. Use the active product name and price consistently in the page, picker/cart data, and mobile selection bar.
Live implementation: Bind name, price, and available variants to the current product. The Omega price is a labeled sample, not an approved retail price.
Reference element: .product-summary-bar

HDR-03 | Readable Typography & Page Surfaces
- Preserve the current DGU heading treatment, readable body copy, square card surfaces, and green primary actions.
- Use Title Case section headings. Keep focus states, text contrast, touch targets, and responsive wrapping. Use the current CSS as the visual reference.
Reference element: .product-summary-bar

HDR-04 | Per-Person Purchase Limit Notice
- Display LIMIT 1 TOTAL PER PERSON in a readable amber notice directly beneath the product title, price, and Select Discs row. Keep it visible in the purchase summary on desktop and phones.
- Repeat the same notice beneath the stock-picker heading in both Grid and Simple layouts, before shoppers choose quantities. Associate the notice with selection buttons and the picker dialog for assistive technology.
- Preview Controls → Purchase Limits → Limit 1 Total Per Person toggles both notices together. Default off; synchronize the setting with the embedded phone preview and retain it when switching example products.
- Use equal 16px outer gutters and row spacing around the summary notice. In the picker, use equal 16px notice margins (12px on phones), with no extra top padding added by the following option panel.
Live implementation: Use the existing live product purchase-limit setting and actual limit value. Render the notice only on restricted products. The prototype toggle demonstrates the message only; it does not enforce purchase limits. Preserve server-side enforcement across all color/weight variants combined, cart updates, and checkout using the current per-person policy. Remove the review toggle from the shopper-facing site.
Reference element: #summaryPurchaseLimit

HDR-05 | Plastics Menu Directory
- Replace the Plastics family tabs with a direct directory: DX links directly to its category; Pro, Champion, Star, and Halo each list their available options. Display all 31 existing category links without an extra family-selection step.
- Separate Special Features beneath the plastic families, with a six-column link grid on wide screens, four columns at intermediate widths, and two columns on phones. Include a Shop All Plastics link.
- On phones, show DX as a full-width direct link and the remaining families in two columns. Keep the menu vertically scrollable, its Close control available, and link targets at least 44px high. Hide the mobile purchase bar while a catalog menu is open so it cannot cover menu links or Close.
- Retain the existing Discs family-selector layout. Support Tab navigation, Arrow Down from the Plastics trigger, Escape to close and return focus, and outside-click dismissal.
Live implementation: Use live category names and URLs; the prototype retains its existing sample catalog links.
Reference element: #plasticsDirectory

HDR-05 | Sold Out & Restock Signup
- When sold out, disable both Select Discs buttons, change their text to SOLD OUT, and use a neutral grey background and text.
- Show a separate white card directly below the top purchase summary with “Get notified when this item gets restocked”, a labeled email field, and Notify me. Hide the gallery stock-alert icon while this card is shown.
- Keep the availability setting synchronized between desktop and phone previews. Restore purchase actions and stock alerts when availability is switched back.
Live implementation: Bind availability to live inventory and connect the validated email signup to the existing restock notification service. This prototype only displays a clearly labeled local confirmation and does not send email.
Reference element: #restockCard


IMG — MAIN IMAGE WINDOW
Image browsing, hanging product-status banners, and product actions.

IMG-01 | Featured Image & Thumbnail Navigation
- Use a large featured image plus a horizontally browsable thumbnail strip and Previous/Next arrows.
- Remove square borders around thumbnails; mark the featured image with a small green underline. Keep selected state synchronized with arrows and image changes.
- On phones, replace image thumbnails and gallery arrows with centered round indicators. Keep every image available through horizontal swiping and indicator selection; highlight the current image.
Reference element: .product-after .gallery-strip

IMG-02 | Swipeable Mobile Gallery
- On phones, swipe horizontally between product images using scroll snapping; vertical page scrolling must remain usable.
- Keep the featured image, current image indicator, and accessible image-position announcement synchronized. Keyboard Left/Right also navigates the focused carousel.
- Rebuild the image set and reset to its first image when changing the preview product; preserve the selected image across viewport changes.
Reference element: #mobileGalleryTrack

IMG-03 | On Sale Banner
- Muted red banner with a simple percent sign. Hang the banner from the upper-left edge of the image frame.
- Use this explanatory message: “Reduced price on this disc.”
- Allow multiple banners together. Show explanations on hover, keyboard focus, or tap; keep mobile tooltips inside the viewport. Do not duplicate tags in the sidebar.
Live implementation: Drive visibility from live product/promotion metadata; the preview checkboxes only simulate that state.
Reference element: .hanging-tag[data-ribbon="sale"]

IMG-04 | DGUnicorn Banner
- Pale purple banner with a simple sparkle symbol for a collectible. Hang the banner from the upper-left edge of the image frame.
- Use this explanatory message: “Rare & collectible discs with original DGU artwork.”
- Allow multiple banners together. Show explanations on hover, keyboard focus, or tap; keep mobile tooltips inside the viewport. Do not duplicate tags in the sidebar.
Live implementation: Drive visibility from live product/promotion metadata; the preview checkboxes only simulate that state.
Reference element: .hanging-tag[data-ribbon="unicorn"]

IMG-05 | Stock Disc Promo Banner
- Pale gold banner with a simple gift symbol for the multi-disc promotion. Hang the banner from the upper-left edge of the image frame.
- Use this explanatory message: “Buy any combination of 3+ stock discs and save 10%.”
- Allow multiple banners together. Show explanations on hover, keyboard focus, or tap; keep mobile tooltips inside the viewport. Do not duplicate tags in the sidebar.
Live implementation: Drive visibility from live product/promotion metadata; the preview checkboxes only simulate that state. Apply the eligible promotion through live pricing/cart rules; the prototype does not calculate the discount.
Reference element: .hanging-tag[data-ribbon="promo"]

IMG-06 | Discontinued Disc Banner
- Pale red banner with the existing skull shape in muted red. Use dark colored ink on a pale matching tint consistently across all banners.
- Use this explanatory message: “This disc will not be restocked. Once it sells out, it’s gone.”
- Allow multiple banners together. Show explanations on hover, keyboard focus, or tap; keep mobile tooltips inside the viewport. Do not duplicate tags in the sidebar.
Live implementation: Drive visibility from live product/promotion metadata; the preview checkboxes only simulate that state.
Reference element: .hanging-tag[data-ribbon="discontinued"]

IMG-07 | Limited Production Banner
- Pale blue banner with a simple star symbol for limited production. On phones, banners are 32 × 47px with 20px symbols.
- Use this explanatory message: “This disc is not widely available and is made only in limited production through official Innova outlets.”
- Allow multiple banners together. Show explanations on hover, keyboard focus, or tap; keep mobile tooltips inside the viewport. Do not duplicate tags in the sidebar.
Live implementation: Drive visibility from live product/promotion metadata; the preview checkboxes only simulate that state.
Reference element: .hanging-tag[data-ribbon="limited"]

IMG-08 | Save, Share & Stock Alerts
- Group Save, Share, and Alerts at the upper-right of the main image window.
- Save toggles its selected state; Share opens a copyable product link; Alerts opens an email signup. Share and Alerts close each other.
- Keep actions clear of banners when many tags are active on a small phone. Show accessible feedback for each action.
- On phones, use smaller 32px round action buttons with 16px icons. Hide the stock-alert action while Sold Out; show the separate restock card instead.
Live implementation: Save is a local visual toggle and alert signup does not send mail. Connect wishlist persistence and email subscription services. Share must use the canonical live product URL.
Reference element: .gallery-actions-wrap

IMG-09 | Sample-Image Disclaimer
- Keep the disclaimer below image navigation: “Stamp & disc colors may vary.”
- Keep it on one row on phones, using 11px text. Gallery color selection changes sample imagery and does not reserve a stock variant.
Reference element: .product-after .thumb-note


SIDE — SIDEBAR
Desktop product-information cards; mobile exceptions are described in each note.

SIDE-01 | Combined Description & Centered Ratings
- Make the short description and centered rating summary the first sidebar card. Keep the gap between heading and body compact.
- Fit the short description to three lines, truncating at a word boundary with ... followed by a little space and the inline Read more link on the final line. Remove arrows from Read more and Read all reviews. These links open the corresponding lower section and navigate to its header.
- On phones, the short description and ratings stay visible without an accordion. Hide rating content when the product has no ratings.
Live implementation: Use real rating/review counts. The Aviar statistics and reviews are sample content.
Reference element: .product-overview

SIDE-02 | Flight Numbers & Explanation Link
- Show Speed, Glide, Turn, and Fade as four readable, selectable tiles.
- Keep the explanation link beside the Flight Numbers heading. Use product-specific values and a clearly selected state.
- On phones, Flight Numbers has its own accordion.
- Reserve dark green for links, headings, and actions. Flight tiles use neutral text, a pale green active fill, and a grey hover fill; the View All navigation action remains dark green.
Reference element: .panel-flight

SIDE-03 | Flight-Number Explorer
- Selecting a flight tile opens its numeric choices and a View All matching-discs action below the tiles.
- For Speed, show exactly 1–7 on the first row and 8–14 on the second; keep this arrangement on phones.
- Use readable button/link text; selecting another metric updates its scale, and selecting the open metric closes the explorer.
- Reference scales: Speed 1–14; Glide 1–6; Turn +1, 0, then −1 through −5; Fade 0–5. Format positive Turn as +1.
- Numeric choices use the same pale green active fill and grey hover fill as flight tiles.
Live implementation: Map each View All action to the live attribute-filtered catalog. The prototype currently links to catalog search queries.
Reference element: #flightExplorer

SIDE-04 | Disc Specs Table
- Keep the specification labels and values in a left-aligned, readable table. Retain relevant category/attribute links.
- Use Disc Specs and Other Plastics tabs within the desktop card. On phones, these become separate accordion sections that follow the single-open rule.
- Keep the description and flight cards compact when ratings are absent; put remaining column height below the specs content instead of distributing it across cards.
Live implementation: Populate verified attributes per product. Aviar and Omega preview different sample fields; do not treat either table as a mandatory universal schema.
Reference element: #specsPanel

SIDE-05 | Other Plastics
- Use the label Other Plastics, replacing Available Plastics. Exclude the current plastic.
- Each alternative has one plastic-name button linking to that option and a short feel/durability explanation. Remove the extra Shop Plastic text links.
- On phones, use a separate Other Plastics accordion. Show an honest empty state when no alternatives are configured.
Live implementation: Resolve actual related plastic products and URLs. The preview uses search links and has no configured Omega alternatives.
Reference element: #plasticsPanel


LOW — LOWER PRODUCT SECTION
Description, reviews, videos, articles, and related products below the main product columns.

LOW-01 | Description Tab & Read More Destination
- Keep the desktop Description tab and the full product description with scannable headings and lists.
- Read More opens/selects this content and navigates to it. On phones, Description remains an accordion with a Title Case header.
Live implementation: Use the product’s maintained long description rather than the preview copy.
Reference element: #after-details

LOW-02 | Reviews Presentation
- Keep the desktop Reviews tab with its count and a centered rating summary/review presentation.
- On phones, reviews are an accordion closed by default. The review-count link opens it and jumps to its sticky section heading. Hide unavailable review content for unrated products, as in the Omega preview.
Live implementation: Connect real reviews and counts. The prototype displays three sample review cards, not all 22 advertised reviews.
Reference element: #after-reviews

LOW-03 | Videos Tab & Basic Player Overlay
- Add Videos to the lower tabs; remove video-launch icons from the main image window.
- On desktop, show one plain main-player wireframe with additional clip thumbnails. On phones, show equal 16:9 video tiles stacked vertically in a scrollable list; tapping any tile opens that clip in the full-screen player overlay.
- The overlay contains a main player, clip thumbnails, and a close control only: no product photos, headings, or descriptive headers. Keep clip selection, duration, close/Escape behavior, and mobile scrolling usable.
Live implementation: Video sources are empty placeholders in video-config.js. Supply live clips; hide video access when unavailable. Do not ship simulated playback as a real video.
Reference element: #after-videos

LOW-04 | Video Overlay Interaction
- Use the minimal player layout on both devices. The mobile player dialog fills the viewport, keeps the clip aspect ratio, and has an accessible close control.
- Closing pauses media and returns focus to its opener. Support backdrop/Escape dismissal, a keyboard focus loop, and clip navigation.
Live implementation: Retain native video controls when a real clip source is supplied.
Reference element: #videoOverlay .video-dialog

LOW-05 | Articles Tab
- Rename Learn More to Articles in desktop tabs and mobile accordion headers.
- Use linked article cards with a visual area, readable title, and short introduction.
Live implementation: Replace sample blog/search links and artwork with the correct maintained article destinations.
Reference element: #after-learn

LOW-06 | You May Also Like
- Place related products below the lower content; use horizontally scrollable cards and Previous/Next controls.
- Disable navigation at the ends and keep horizontal touch scrolling available. On phones, use a separate You May Also Like accordion.
Live implementation: The preview reuses sample disc images and search links. Supply genuine related products and destinations; Omega currently hides this sample section.
Reference element: .product-after .recommendations


PICK — STOCK PICKER OVERLAY
Variant selection, inventory visibility, item notes, and quantity validation.

PICK-01 | Bulk Color/Weight Grid
- Open the picker from either Select Discs action. Display colors as rows and weight ranges as columns, with a separate quantity input per available combination.
- Show unavailable combinations as non-selectable empty cells. Keep the selected-cell highlight and live total selected/subtotal feedback.
- Use lowercase g for grams and readable text across headings, stock counts, inputs, and actions. Remove the Sample inventory and price banner.
Live implementation: Use actual variant inventory and prices. Preview inventory is hard-coded; replace it before launch.
Reference element: .stock-grid

PICK-02 | Pinned Mobile Color Column
- On phones, allow horizontal scrolling while keeping color names and the Color corner pinned on the left.
- Keep weight headings visible on vertical scrolling, with the corner above both layers and opaque pinned backgrounds.
- Use a compact 40px weight-header row, 80px inventory rows, and accessible numeric inputs. Do not reduce heading text to fit the full grid.
Reference element: .stock-grid

PICK-03 | Quantity Limits & Selection Summary
- Require a valid positive selection before adding to cart; accept whole quantities and constrain them to available stock.
- Recheck the selection against quantities already in the cart and provide an inline availability error when necessary.
- Update selected count and subtotal as inputs change. Keep actions accessible in a fixed/mobile footer and support keyboard movement between grid inputs.
Live implementation: Validate stock and prices server-side at add-to-cart and checkout. Preserve currency precision; the preview subtotal display rounds to whole dollars.
Reference element: .picker-foot

PICK-04 | Simple Picker: Weight & Color
- Provide the alternate Simple layout demonstrated in Preview Controls. Choose weight, then an available color, then quantity.
- Keep unavailable options disabled, the quantity bounded by inventory, and Add to Cart in the footer. Use explicit select arrows and readable labels.
- Use a compact single-column dialog with explicit dropdown arrows and quantity/Add to Cart controls in the footer.
Live implementation: Choose the appropriate layout from real product configuration, not a shopper-facing prototype switch.
Reference element: #simplePicker

PICK-05 | Simple Picker: Color Only
- The one-attribute example removes the weight selector and allows choosing color and quantity.
- Keep the same validation and footer behavior as the two-attribute Simple layout.
Live implementation: The preview aggregates sample stock across weight ranges. Use this mode only for products whose live configuration genuinely has one selectable attribute; do not silently combine real weight variants.
Reference element: #simplePicker

PICK-06 | Inventory-Count Visibility
- Support the Show Stock Counts setting in both Grid and Simple preview modes.
- Hiding counts removes the displayed inventory quantities, while availability, disabled options, and quantity limits still apply.
Live implementation: Expose inventory-count visibility through the desired site/product configuration. Preview controls are review tools only.
Reference element: .stock-grid

PICK-07 | Optional Item Notes
- Keep an optional Item Specific Notes disclosure with a color/stamp preference text area.
- Carry submitted notes into the relevant cart item and reset picker notes after successful addition.
Live implementation: The prototype applies one submitted note to the variants added in that operation. Match Magento’s required cart-item/custom-option storage and note handling.
Reference element: .picker-notes


CART — CART DRAWER & PURCHASE FEEDBACK
Cart presentation and the live services that must replace preview-only behavior.

CART-01 | Add-to-Cart Confirmation & Drawer
- After a successful add, update the header count, show confirmation feedback, and open the cart drawer.
- Show the product image/name, chosen color/weight, unit price, quantity, optional notes, cart count, and subtotal.
Live implementation: The demo cart exists only in JavaScript memory. Connect add-to-cart, persistence, and authenticated/guest carts to Magento.
Reference element: .cart-drawer

CART-02 | Edit Quantity, Remove & Continue
- Allow cart quantity edits within available-stock limits and item removal; update all counts/totals.
- Keep Close, Continue Shopping, empty-cart messaging, and the checkout action. Preserve focus return and backdrop/Escape behavior.
Live implementation: The checkout button is not connected in the preview. Use the real checkout flow and authoritative inventory; do not copy the placeholder message into production.
Reference element: .cart-items

CART-03 | Promotion, Pricing & Service Connections
- Connect the advertised 3+ stock-disc / 10% promotion to the actual cart pricing rules and show the applied result accurately.
- Use the live product’s price, inventory, eligibility, review data, canonical URL, wishlist service, and alert subscriptions.
Live implementation: The prototype currently shows three $12 discs as $36 without a promotion calculation. This is an integration gap, not evidence that the discount works. Shipping/returns, zoom, new review tools, and other suggestions from the UX audit are not approved implementations in this reference.
Reference element: .cart-summary


MOB — MOBILE LAYOUT & PAGE THEME
Responsive behavior shared across the page and the optional DGUnicorn background.

MOB-01 | Single-Open Mobile Sections
- At phone widths (760px and below), use separate Flight Numbers, Disc Specs, Other Plastics, Description, Reviews, Videos, Articles, and You May Also Like sections wherever content exists. Start all sections closed.
- Keep the swipe gallery, image indicators, short description, and rating summary visible outside accordions.
- Only one section can be open at a time. Opening another closes the previous one. Automatically close the active section once its complete heading/content area scrolls out of view; preserve the reading position when collapsing content above the viewport.
- Opening or linking to a section aligns its heading with the top of the viewport. Keep that heading sticky while scrolling through the section, constrained to its own section bounds. Use Title Case, +/− indicators, bordered content, and 12px between sections.
Reference element: #after-info

MOB-02 | Persistent Mobile Select Discs Bar
- After the main purchase summary scrolls offscreen, show a bottom bar with current product name, price, and Select Discs.
- Open the same picker, respect safe-area insets, and avoid covering content with the fixed bar.
- When Sold Out, disable the selection action and show SOLD OUT in the same neutral grey treatment as the top purchase button.
Reference element: .mobile-cart-bar

MOB-03 | Subtle Animated Rainbow Background
- Use a single optional full-page DGUnicorn rainbow gradient. Keep surrounding page/card gutters transparent so they reveal that same gradient without a second wash or gradient border. Keep the content cards white.
- Keep movement slight and slow (24-second alternating reference), with a static background for reduced-motion preferences.
- Preview settings control enable/disable, saturation (0–100%, default 45%), and brightness (75–100%, default 93%).
Live implementation: Drive the live theme from approved product/site configuration. Do not publish the preview sliders as shopper controls.
Reference element: .product-breadcrumb

MOB-04 | Responsive & Accessible Interactions
- Retain the desktop two-column product presentation, single-column intermediate layout, and mobile treatment. Reference breakpoints are 1180px and 760px.
- Keep keyboard focus visible, meaningful control labels, selected/expanded states, touch targets, image descriptions, and live feedback.
- Picker, video, and cart overlays isolate the background, trap keyboard focus, close with Escape, and return focus. Test mobile keyboards, safe areas, and reduced motion.
Reference element: .product-summary-bar


PREV — REVIEW CONTROLS & IMPLEMENTATION HANDOFF
Review-only controls; exclude these tools and annotation markers from the live storefront.

PREV-01 | Before, After, Compare & Device Preview
- Keep Before, After, and Compare modes for reviewing the redesign.
- Desktop/Phone switches provide an embedded 390px phone preview on wide screens. Preview product/settings are synchronized into the embedded view.
Live implementation: These are review tools, not live storefront features.
Reference element: .prototype-bar .control-group

PREV-02 | Product Examples
- Switch between DX Aviar stock and Millennium Omega SuperSoft DGUnicorn examples.
- Update product title, images, colors, flight values, specs, description, articles, rating/video availability, theme, picker labels, and mobile bar together.
- Reset product-specific sample selections and default tags when switching. Discontinued Disc and Limited Production are off by default; do not infer either status for these products.
Live implementation: Replace example switching and hard-coded product records with live product data and navigation.
Reference element: #previewProduct

PREV-03 | Product Tags & Background Settings
- Provide independent review toggles for On Sale, DGUnicorn, Stock Disc Promo, Discontinued Disc, and Limited Production.
- Support multiple active banners and keep their tooltips/actions usable down to 320px.
- The same drawer contains the rainbow enable switch and saturation/brightness sliders.
- Availability → Sold Out toggles both purchase buttons, the restock card, and stock-alert visibility together. Synchronize it with the embedded phone preview and retain it while switching products.
Live implementation: Map relevant values to live metadata/configuration; remove review toggles from shopper UI.
Reference element: .ribbon-controls

PREV-04 | Picker Layout & Inventory Settings
- Expose Grid/Simple, Show Stock Counts, and the Simple Weight and Color / Color Only examples in the review drawer.
- Changing layout affects the same stock-picker overlay and is synchronized with the embedded phone preview.
Live implementation: Choose production behavior using real product configuration and inventory policy.
Reference element: .unicorn-preview-options .preview-group:last-child

PREV-05 | Grouped Notes, Indicators & Export
- Organize this implementation log by page area, with stable IDs matching the downloadable guide.
- Use one area marker per region to avoid dozens of overlapping badges; each note can reveal and highlight its own feature.
- Show Change Notes controls review indicators only. The downloadable text and printable HTML are generated from this same source.
Live implementation: Remove Preview Controls, before/after UI, change markers, and the implementation-notes drawer from the live storefront.
Reference element: #changePanel