Creative hardware and digital drawing
ugee
ugee's global creative-hardware store separates pen tablets, displays, standalone Android tablets and 3D printing into clear tasks, explaining compatibility and accessories within each path.
Visit the live project
Core implementation review
Three storefront journeys from model choice to purchase
ugee sells pen tablets, drawing displays, standalone Android tablets and entry-level 3D printers to a global creative audience. The costly mistake is choosing the wrong class of device: whether a computer is required, what the pen can do, and what arrives in the box all change with that first decision. The storefront sorts by creative task, uses a long model page to hold artwork and pen travel beside the configuration on sale, and keeps accessories plus market rules off the host product’s option list.
Project context
Define how customers choose before defining the storefront
Customers choose drawing pad, tablet, monitor, Android tablet or 3D printer, then compare UT2 or UT3, S640, M708 and UE12 or UE16 by display, size, pen, system and box contents. Student offers, VAT, delivery and accessories complete selection.
Shopify creative-hardware frontend, taxonomy, specification-led PDPs, accessories and global buying UX.
Send a drawing-pad shopper and a 3D-printer shopper down different first paths
Land people on a pen tablet, display, Android tablet or 3D printer path before they start comparing named models.
- 01Choose the creative task and device class
- 02Compare size, pen and standalone use inside the range
- 03Open a model for compatibility and box contents
Implementation
- Collections carry device class, so pen tablets, drawing displays, standalone Android tablets and entry-level 3D printers are first-level paths instead of a brand-term jumble.
- Display, size, pressure, pen and OS compatibility live on the product object; colour and sellable builds are variants, while nibs and stands stay out of that option set.
- Predictive Search returns both products and collections, so a model query and a drawing-pad query can still reach the right range.
Deployment and acceptance
- Key features, box contents and compatibility sit in sections and blocks bound to product fields, so a new model can enter an existing device class without rebuilding the taxonomy.
- Search includes typing, empty and keyboard states, rather than working only when the shopper already knows the SKU.
- Shoppers settle whether they need a screen and a host computer before they inspect a named model.
- 3D printing keeps its own material and accessory questions instead of crowding the drawing-device spec list.
View script and Shopify API evidence
predictive-search.jssearch-form.jsPredictive Search APIGive UT2 and UT3 their own long-page proof, not a cloned spec sheet
Near-twin drawing pads have to show artwork, pen travel and structure in a long story without losing the configuration that can actually be bought.
- 01Open the UT2 or UT3 page
- 02Watch artwork and pen travel on scroll
- 03See device structure in the same proportion system
- 04Switch specification panels in place
- 05Add the configuration still on screen
Implementation
- UT2 and UT3 load model-specific assets such as details-page-ut2-3.js and details-page-ut3-3.js, so the long-page timeline is maintained per SKU rather than shared across every pad.
- GSAP and ScrollTrigger pace the creative scenes; Swiper owns galleries and module carousels so scroll storytelling and swipe gestures do not fight.
- ugee_tab.js and details-tab.js switch specification panels inside the current template instead of reloading the product form.
- media-gallery.js and the product form share variant changes through pubsub.js, so the story describes the configuration that can be purchased.
Deployment and acceptance
- Secondary media can load later, keeping device identity and purchase controls on the first screen.
- The scroll story leaves room to pause, honour reduced motion and move focus, so the demo cannot trap the page.
- Model scripts attach only on their product; if they fail, specifications and the native product form remain readable and submittable.
- Close models can be told apart by pen feel and whether a computer is required, not by repeating the same table.
- After the creative story, the configuration on screen is still the one that enters the cart.
View script and Shopify API evidence
details-page-ut2-3.jsdetails-page-ut3-3.jsdetails-ut2.jsdetails-gsap.min.jsdetails-ScrollTrigger.min.jsdetails-swiper-bundle.min.jsdetails-lazy-2nd.jsdetails-tab.jsugee_tab.jsmedia-gallery.jspubsub.jsGSAPSwiperKeep nibs, stands and cover as fitted products beside the host, not as extra variant options
The host sells a buyable build. Consumables, stands and protection follow as separately fulfilled products linked by fit.
- 01Lock the host colour and sellable build
- 02Choose nibs, stand or cable by fit
- 03Add through Ajax and read the line items back
- 04Handle protection at the cart boundary
Implementation
- Accessories remain independent products linked by compatibility, so stock and after-sales stay separate from UT2 and UT3 hosts.
- product-form.js and product-info.js own the host variant; pubsub.js mirrors availability into the gallery and drawer without turning accessories into host options.
- quick-add.js on range surfaces submits only a confirmed host build, so the long page is not the only way to buy.
- The Carebox extension stays at warranty add-on in the cart and does not enter the product option set.
Deployment and acceptance
- The drawer treats Cart Ajax as source of truth; quantity changes and removal go through change and update so stale line items do not linger.
- Mobile quick-add and quantity controls stay clear of specification tabs so box-contents copy remains readable.
- Payment and wallet scripts remain on checkout, separate from how accessories are associated in the theme.
- Shoppers can tell a host, a consumable and protection apart, and operations can fulfil them separately.
- The drawer names the actual line items without forcing a jump away from the model page to confirm the kit.
View script and Shopify API evidence
product-form.jsproduct-info.jspubsub.jscart-drawer.jscart.jsquick-add.jsquantity-popover.jscarebox-cart.jsCart Ajax: addCart Ajax: changeCart Ajax: updateOperational handoff
The operating team can continue after launch
- The catalog is maintained by pen tablet, drawing display, standalone Android tablet and entry-level 3D printer, with models such as UT2, UT3, S640, M708 and UE12 / UE16 sitting under those tasks.
- Display, size, pressure, pen and OS compatibility belong on the product object; colour and sellable builds are variants.
- Nibs, stands and cables remain separate products linked by fit, so inventory and after-sales are not packed into the host option set.
- The live storefront defaults to English and the United States; region and language sit in both the theme localization form and the Transtore extension.
- VAT presentation, plugs, OS language, driver downloads, delivery and education offers are edited per market, while core specifications stay shared.
- Checkout payment and wallet scripts remain outside theme localization, so a market change does not rebuild the path from selection to add-to-cart.
Research notesPublic sources and verification boundary
Public research sources
Content verification
Industry, product and observable feature notes are verified against the brand site. Apps, admin configuration and commercial data that cannot be confirmed from the storefront are not inferred. WESWOO scope is stated only from project records and client authorization.
Public information last reviewed: 2026-08-12