From collection to clothing rack.
1. Install and choose your plan
Install Hookline in Shopify, then open the app from Shopify Admin. The public beta is accessed by invitation. Free includes one rack with ten items and Hookline branding; Starter and Pro limits appear in the app. Shopify hosts plan selection and billing.
2. Create your rack
Select Create rack. Import a collection or handpick products. Hookline suggests title, price, garment type, color and the product image. Review these suggestions before publishing.
3. Prepare the garments
For photo mode, use a front-facing, flat garment photo with a transparent background. A photo on an opaque backdrop will not become a cut-out automatically. For print mode, pick tee, long sleeve or crewneck, choose a base color, then upload front, back or all-over artwork. Crop and normalize images in the upload dialog; position prints in the editor.
4. Set the scene
Choose a background, rail and hanger finish, spacing, typography and metadata display. The default font inherits your Shopify theme. The live preview uses the storefront renderer. Try desktop, mobile, pagination and keyboard interaction.
5. Add it to your theme
Save your rack, then select Add to theme. Shopify's theme editor opens with the app block ready to add. Select your rack in the block's picker and save your theme. Saving a rack in Hookline does not publish your Shopify theme.
Sync and actions
Sync collection adds new items and refreshes unedited source properties while keeping your manual changes and item order. Link actions open your product pages. Event actions emit a stable payload; your theme implements the behavior. Hookline does not manage your cart, checkout or quick view.
document.addEventListener('hookline:action', (event) => {
const { rackId, itemId, productId, variantId,
handle, index, actionId } = event.detail;
// Connect your theme's existing quick view or cart here.
});Accessibility and performance
Use arrows to select garments, Enter to inspect and Escape to close. The heavy renderer loads near the viewport and pauses rendering offscreen. A readable HTML catalog remains available when WebGL fails or reduced motion is enabled.