CamClo AI Logo
Illustrated merchandiser arranging three lookbook boards, photo cards and a manifest, with link, crop and approval icons.
Ecommerce Tips

Fashion Lookbook Template for Ecommerce Collections

Copy a free fashion lookbook template in three editable HTML layouts, plus a 10-page plan and SKU-linked CSV to connect outfit images to shopping links.

Kush A

Kush A

Founder, CamClo AI

October 5, 2026
20 min read

Choose the Editorial Collection, Shop the Looks or Product-Detail Collection fashion lookbook template below. The complete HTML, page plan and CSV are free to copy, edit and save without registration. Replace the image slots and product information to connect your collection story to shopping links. Need more poses first? Our Catalogue Studio pose generator creates 4–12 poses from one model photo, keeping the same model and outfit.

Choose and copy your fashion lookbook template

A fashion lookbook presents a collection through styled imagery; an ecommerce version also identifies the products and variants in each look. Each editable layout includes image slots for your own photography. Photography is not included.

Editorial Collection

A restrained clothing lookbook template for campaign storytelling, with generous image space and compact product references.

Two printed fashion lookbook proofs on a wooden desk, with a cover image placeholder, paired outfit slots and SKU references.

Copy the Editorial Collection HTML. Select the complete source below and save it as editorial-collection.html.

<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>Everyday Layers: Editorial Collection</title> <style> :root{--accent:#8C2A8D}*{box-sizing:border-box}body{margin:0;background:#eee;color:#222;font-family:Arial,sans-serif;line-height:1.4}a{color:var(--accent);overflow-wrap:anywhere}a:focus-visible{outline:3px solid var(--accent)}.page{max-width:210mm;min-height:297mm;margin:16px auto;padding:24mm;background:white}h1{font-size:32pt;line-height:1.1}h2{font-size:23pt}.eyebrow{color:var(--accent);text-transform:uppercase}.photo{display:block;width:100%;height:115mm;object-fit:contain;background:#eee9ed}.hero{height:135mm}.detail{height:75mm}.pair,.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6mm}.pair p{margin:0}.refs{border-top:1px solid var(--accent);padding-top:3mm;font-size:9pt}.cards .photo{height:32mm}.cards p{font-size:9pt}.cards article{break-inside:avoid}@page{size:A4 portrait;margin:12mm}@media print{body{background:white}.page{max-width:none;min-height:0;margin:0;padding:0;break-after:page}.page:last-child{break-after:auto}}@media screen and (max-width:740px){.page{width:100%;min-height:0;padding:20px}.pair,.cards{grid-template-columns:1fr}h1{font-size:32px}} </style> </head> <body> <section class='page' data-page='1'> <p class='eyebrow'>Editorial Collection</p> <h1>Everyday Layers</h1> <p>A fictional collection of simple shapes and flexible combinations.</p> <img class='photo hero' src='images/o02-front.jpg' alt='O02 front silhouette'> <p>C01 · O02 front silhouette</p> <p>Market: UNSET · Currency: USD · Season: core</p> <a href='https://example.com/collections/everyday-layers'>Explore Everyday Layers</a> </section> <section class='page' data-page='2'> <h2>Built to combine</h2> <p>An ivory tee anchors three looks. Navy trousers create a clean base; a sand overshirt adds a layer. A charcoal skirt changes the silhouette without changing the collection's quiet palette.</p> <img class='photo' src='images/o03-alt.jpg' alt='O03 alternate pose'> <p>I01 · O03 alternate pose</p> <p class='refs'>Featured: P101, P103, P104. Product references: pages 7 and 9.</p> </section> <section class='page' data-page='3' data-outfit='O01'> <h2>The everyday base</h2> <p>An ivory tee and navy trousers establish the collection's simplest silhouette.</p> <section class='pair'> <p><img class='photo' src='images/o01-front.jpg' alt='O01 front silhouette'>O01-F · Front</p> <p><img class='photo' src='images/o01-quarter.jpg' alt='O01 three-quarter silhouette'>O01-Q · Three-quarter</p> </section> <p class='refs'> <a data-product-id='P101' data-sku='P101-IV-S' href='https://example.com/products/ivory-tee?variant=P101-IV-S'>P101 · Ivory tee · P101-IV-S</a><br> <a data-product-id='P102' data-sku='P102-NV-M' href='https://example.com/products/navy-trousers?variant=P102-NV-M'>P102 · Navy trousers · P102-NV-M</a> </p> </section> <section class='page' data-page='4' data-outfit='O01'> <h2>O01: movement and detail</h2> <section class='pair'> <p><img class='photo' src='images/o01-alt.jpg' alt='O01 alternate standing pose'>O01-A · Alternate</p> <p><img class='photo detail' src='images/p101-detail.jpg' alt='Original ivory tee neckline detail'>D101 · Original detail</p> </section> <p class='refs'>O01: P101-IV-S; P102-NV-M. Product links: page 3. Detail: P101.</p> </section> <section class='page' data-page='5' data-outfit='O02'> <h2>Add a layer</h2> <p>The sand overshirt joins the same tee and trousers to form outfit O02.</p> <section class='pair'> <p><img class='photo' src='images/o02-front.jpg' alt='O02 front silhouette'>O02-F · Front</p> <p><img class='photo' src='images/o02-quarter.jpg' alt='O02 three-quarter silhouette'>O02-Q · Three-quarter</p> </section> <p class='refs'> <a data-product-id='P101' data-sku='P101-IV-S' href='https://example.com/products/ivory-tee?variant=P101-IV-S'>P101 · Ivory tee · P101-IV-S</a><br> <a data-product-id='P102' data-sku='P102-NV-M' href='https://example.com/products/navy-trousers?variant=P102-NV-M'>P102 · Navy trousers · P102-NV-M</a><br> <a data-product-id='P103' data-sku='P103-SD-M' href='https://example.com/products/sand-overshirt?variant=P103-SD-M'>P103 · Sand overshirt · P103-SD-M</a> </p> </section> <section class='page' data-page='6' data-outfit='O02'> <h2>O02: shape and construction</h2> <section class='pair'> <p><img class='photo' src='images/o02-alt.jpg' alt='O02 alternate standing pose'>O02-A · Alternate</p> <p><img class='photo detail' src='images/p103-detail.jpg' alt='Original sand overshirt fastening detail'>D103 · Original detail</p> </section> <p class='refs'>O02: P101-IV-S; P102-NV-M; P103-SD-M. Product links: page 5. Detail: P103.</p> </section> <section class='page' data-page='7' data-outfit='O03'> <h2>Change the silhouette</h2> <p>Pair the tee and overshirt with a charcoal skirt to create the third look.</p> <section class='pair'> <p><img class='photo' src='images/o03-front.jpg' alt='O03 front silhouette'>O03-F · Front</p> <p><img class='photo' src='images/o03-quarter.jpg' alt='O03 three-quarter silhouette'>O03-Q · Three-quarter</p> </section> <p class='refs'> <a data-product-id='P101' data-sku='P101-IV-S' href='https://example.com/products/ivory-tee?variant=P101-IV-S'>P101 · Ivory tee · P101-IV-S</a><br> <a data-product-id='P103' data-sku='P103-SD-M' href='https://example.com/products/sand-overshirt?variant=P103-SD-M'>P103 · Sand overshirt · P103-SD-M</a><br> <a data-product-id='P104' data-sku='P104-CH-S' href='https://example.com/products/charcoal-skirt?variant=P104-CH-S'>P104 · Charcoal skirt · P104-CH-S</a> </p> </section> <section class='page' data-page='8' data-outfit='O03'> <h2>O03: styling and finish</h2> <section class='pair'> <p><img class='photo' src='images/o03-alt.jpg' alt='O03 alternate standing pose'>O03-A · Alternate</p> <p><img class='photo detail' src='images/p104-detail.jpg' alt='Original charcoal skirt construction detail'>D104 · Original detail</p> </section> <p class='refs'>O03: P101-IV-S; P103-SD-M; P104-CH-S. Product links: page 7. Detail: P104.</p> </section> <section class='page' data-page='9'> <h2>Collection details</h2> <p>Replace these sample variants and prices with current store information.</p> <section class='cards'> <article> <img class='photo detail' src='images/p101-detail.jpg' alt='Ivory tee detail'> <h3>P101 · Ivory tee</h3> <p>D101 · Ivory · Sample size S<br>P101-IV-S · USD $25<br><a href='https://example.com/products/ivory-tee?variant=P101-IV-S'>Shop ivory tee, size S</a></p> </article> <article> <img class='photo detail' src='images/p102-detail.jpg' alt='Navy trousers detail'> <h3>P102 · Navy trousers</h3> <p>D102 · Navy · Sample size M<br>P102-NV-M · USD $70<br><a href='https://example.com/products/navy-trousers?variant=P102-NV-M'>Shop navy trousers, size M</a></p> </article> <article> <img class='photo detail' src='images/p103-detail.jpg' alt='Sand overshirt detail'> <h3>P103 · Sand overshirt</h3> <p>D103 · Sand · Sample size M<br>P103-SD-M · USD $90<br><a href='https://example.com/products/sand-overshirt?variant=P103-SD-M'>Shop sand overshirt, size M</a></p> </article> <article> <img class='photo detail' src='images/p104-detail.jpg' alt='Charcoal skirt detail'> <h3>P104 · Charcoal skirt</h3> <p>D104 · Charcoal · Sample size S<br>P104-CH-S · USD $65<br><a href='https://example.com/products/charcoal-skirt?variant=P104-CH-S'>Shop charcoal skirt, size S</a></p> </article> </section> </section> <section class='page' data-page='10'> <h2>Find your combination</h2> <p>Shop individual pieces through the product references on page 9, or explore the complete collection online.</p> <p><a href='https://example.com/collections/everyday-layers'>Shop Everyday Layers</a></p> <a href='mailto:studio@example.com'>Contact the collection team</a> </section> </body> </html>

Shop the Looks

A shopping-focused layout with prominent links to each piece and a responsive reading order.

Paper fashion lookbook previews showing side-by-side desktop image placeholders and a stacked mobile shopping layout.

Copy the Shop the Looks HTML. Select the complete source below and save it as shop-the-looks.html.

<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>Everyday Layers: Shop the Looks</title> <style> :root{--accent:#8C2A8D}*{box-sizing:border-box}body{margin:0;color:#222;font-family:Arial,sans-serif;line-height:1.5}main{width:100%;margin:auto;padding:24px}a{color:var(--accent);overflow-wrap:anywhere}a:focus-visible{outline:3px solid var(--accent)}h1{font-size:clamp(32px,6vw,64px);line-height:1.1}h2{font-size:clamp(25px,4vw,32px)}.page{padding:32px 0;border-bottom:1px solid #ddd}.eyebrow{color:var(--accent);text-transform:uppercase}.photo{display:block;width:100%;max-width:480px;height:auto;aspect-ratio:2/3;object-fit:contain;margin:auto;background:#eee9ed}.detail{aspect-ratio:1/1}.pair,.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.pair p{margin:0}.refs a{display:block;margin:12px 0;padding:14px;border:1px solid var(--accent)}.cards article{border:1px solid #ddd;padding:16px;break-inside:avoid}.cards .photo{max-width:220px}@media(max-width:640px){main{padding:16px}.pair,.cards{grid-template-columns:1fr}}@page{size:A4 portrait;margin:12mm}@media print{main{width:auto;padding:0}.page{padding:0;border:0;break-after:page}.page:last-child{break-after:auto}h1{font-size:32pt}h2{font-size:22pt}.photo{max-width:75mm;max-height:115mm}.pair,.cards{gap:6mm;grid-template-columns:repeat(2,minmax(0,1fr))}.refs a{margin:2mm 0;padding:2mm;font-size:9pt}.cards .photo{width:32mm}.cards article{padding:3mm}.cards p{font-size:9pt}} </style> </head> <body> <main> <section class='page' data-page='1'> <p class='eyebrow'>Shop the Looks</p> <h1>Everyday Layers</h1> <p>Three looks. Four pieces. Choose your combination.</p> <img class='photo' src='images/o02-front.jpg' alt='O02 front silhouette'> <p>C01 · O02 front silhouette</p> <p>Fictional collection · Market: UNSET · Currency: USD · Season: core</p> <a href='https://example.com/collections/everyday-layers'>Shop the full Everyday Layers collection</a> </section> <section class='page' data-page='2'> <h2>Build your everyday wardrobe</h2> <p>Start with an ivory tee. Add navy trousers, layer a sand overshirt, or switch to a charcoal skirt. Each look lists its exact sample variants, so you can shop the pieces separately.</p> <img class='photo' src='images/o03-alt.jpg' alt='O03 alternate pose'> <p>I01 · O03 alternate pose</p> <p>Featured: P101, P103, P104. See look O03 below.</p> </section> <section class='page' data-page='3' data-outfit='O01'> <h2>The everyday base</h2> <p>An ivory tee and navy trousers establish the collection's simplest silhouette.</p> <section class='pair'> <p><img class='photo' src='images/o01-front.jpg' alt='O01 front silhouette'>O01-F · Front</p> <p><img class='photo' src='images/o01-quarter.jpg' alt='O01 three-quarter silhouette'>O01-Q · Three-quarter</p> </section> <p class='refs'> <a data-product-id='P101' data-sku='P101-IV-S' href='https://example.com/products/ivory-tee?variant=P101-IV-S'>Shop ivory tee · Size S · P101-IV-S</a> <a data-product-id='P102' data-sku='P102-NV-M' href='https://example.com/products/navy-trousers?variant=P102-NV-M'>Shop navy trousers · Size M · P102-NV-M</a> </p> </section> <section class='page' data-page='4' data-outfit='O01'> <h2>O01: see the details</h2> <section class='pair'> <p><img class='photo' src='images/o01-alt.jpg' alt='O01 alternate standing pose'>O01-A · Alternate</p> <p><img class='photo detail' src='images/p101-detail.jpg' alt='Original ivory tee neckline detail'>D101 · Original detail</p> </section> <p>O01: P101-IV-S; P102-NV-M. Shop through the preceding look's links. Detail: P101.</p> </section> <section class='page' data-page='5' data-outfit='O02'> <h2>Add a layer</h2> <p>The sand overshirt joins the same tee and trousers to form outfit O02.</p> <section class='pair'> <p><img class='photo' src='images/o02-front.jpg' alt='O02 front silhouette'>O02-F · Front</p> <p><img class='photo' src='images/o02-quarter.jpg' alt='O02 three-quarter silhouette'>O02-Q · Three-quarter</p> </section> <p class='refs'> <a data-product-id='P101' data-sku='P101-IV-S' href='https://example.com/products/ivory-tee?variant=P101-IV-S'>Shop ivory tee · Size S · P101-IV-S</a> <a data-product-id='P102' data-sku='P102-NV-M' href='https://example.com/products/navy-trousers?variant=P102-NV-M'>Shop navy trousers · Size M · P102-NV-M</a> <a data-product-id='P103' data-sku='P103-SD-M' href='https://example.com/products/sand-overshirt?variant=P103-SD-M'>Shop sand overshirt · Size M · P103-SD-M</a> </p> </section> <section class='page' data-page='6' data-outfit='O02'> <h2>O02: see the construction</h2> <section class='pair'> <p><img class='photo' src='images/o02-alt.jpg' alt='O02 alternate standing pose'>O02-A · Alternate</p> <p><img class='photo detail' src='images/p103-detail.jpg' alt='Original sand overshirt fastening detail'>D103 · Original detail</p> </section> <p>O02: P101-IV-S; P102-NV-M; P103-SD-M. Shop through the preceding look's links. Detail: P103.</p> </section> <section class='page' data-page='7' data-outfit='O03'> <h2>Change the silhouette</h2> <p>Pair the tee and overshirt with a charcoal skirt to create the third look.</p> <section class='pair'> <p><img class='photo' src='images/o03-front.jpg' alt='O03 front silhouette'>O03-F · Front</p> <p><img class='photo' src='images/o03-quarter.jpg' alt='O03 three-quarter silhouette'>O03-Q · Three-quarter</p> </section> <p class='refs'> <a data-product-id='P101' data-sku='P101-IV-S' href='https://example.com/products/ivory-tee?variant=P101-IV-S'>Shop ivory tee · Size S · P101-IV-S</a> <a data-product-id='P103' data-sku='P103-SD-M' href='https://example.com/products/sand-overshirt?variant=P103-SD-M'>Shop sand overshirt · Size M · P103-SD-M</a> <a data-product-id='P104' data-sku='P104-CH-S' href='https://example.com/products/charcoal-skirt?variant=P104-CH-S'>Shop charcoal skirt · Size S · P104-CH-S</a> </p> </section> <section class='page' data-page='8' data-outfit='O03'> <h2>O03: see the details</h2> <section class='pair'> <p><img class='photo' src='images/o03-alt.jpg' alt='O03 alternate standing pose'>O03-A · Alternate</p> <p><img class='photo detail' src='images/p104-detail.jpg' alt='Original charcoal skirt construction detail'>D104 · Original detail</p> </section> <p>O03: P101-IV-S; P103-SD-M; P104-CH-S. Shop through the preceding look's links. Detail: P104.</p> </section> <section class='page' data-page='9'> <h2>Shop individual pieces</h2> <p>Replace these sample variants and prices with current store information.</p> <section class='cards'> <article> <img class='photo detail' src='images/p101-detail.jpg' alt='Ivory tee detail'> <h3>P101 · Ivory tee</h3> <p>D101 · Ivory · Sample size S<br>P101-IV-S · USD $25</p> <a href='https://example.com/products/ivory-tee?variant=P101-IV-S'>Shop ivory tee, size S</a> </article> <article> <img class='photo detail' src='images/p102-detail.jpg' alt='Navy trousers detail'> <h3>P102 · Navy trousers</h3> <p>D102 · Navy · Sample size M<br>P102-NV-M · USD $70</p> <a href='https://example.com/products/navy-trousers?variant=P102-NV-M'>Shop navy trousers, size M</a> </article> <article> <img class='photo detail' src='images/p103-detail.jpg' alt='Sand overshirt detail'> <h3>P103 · Sand overshirt</h3> <p>D103 · Sand · Sample size M<br>P103-SD-M · USD $90</p> <a href='https://example.com/products/sand-overshirt?variant=P103-SD-M'>Shop sand overshirt, size M</a> </article> <article> <img class='photo detail' src='images/p104-detail.jpg' alt='Charcoal skirt detail'> <h3>P104 · Charcoal skirt</h3> <p>D104 · Charcoal · Sample size S<br>P104-CH-S · USD $65</p> <a href='https://example.com/products/charcoal-skirt?variant=P104-CH-S'>Shop charcoal skirt, size S</a> </article> </section> </section> <section class='page' data-page='10'> <h2>Make the collection yours</h2> <p>Choose the pieces that suit your wardrobe. Check your preferred size and local availability on each product page.</p> <p><a href='https://example.com/collections/everyday-layers'>Shop the Everyday Layers collection</a></p> <a href='mailto:studio@example.com'>Ask the collection team a question</a> </section> </main> </body> </html>

Product-Detail Collection

A specification-led layout for detailed retail review or a wholesale presentation.

Hands review two fashion lookbook proofs with a collection cover and four labeled product-reference cards on a desk.

Copy the Product-Detail Collection HTML. Select the complete source below and save it as product-detail-collection.html.

<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>Everyday Layers: Product-Detail Collection</title> <style> :root{--accent:#8C2A8D}*{box-sizing:border-box}body{margin:0;background:#eee;color:#222;font-family:Arial,sans-serif;line-height:1.4}a{color:var(--accent);overflow-wrap:anywhere}a:focus-visible{outline:3px solid var(--accent)}h1{font-size:32pt;line-height:1.1}h2{font-size:22pt}.page{max-width:8.5in;min-height:11in;margin:16px auto;padding:0.75in;background:white}.eyebrow{color:var(--accent);text-transform:uppercase}.photo{display:block;width:100%;max-width:65mm;height:95mm;object-fit:contain;margin:auto;background:#eee9ed}.detail{height:65mm}.pair,.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6mm}.pair p{margin:0}.refs{padding:5mm;background:#f4edf4;border-left:2mm solid var(--accent);font-size:10pt}.cards article{border:1px solid #ccc;padding:3mm;break-inside:avoid}.cards .photo{height:25mm;width:25mm;margin:0}.cards p{font-size:9pt}@page{size:letter portrait;margin:0.5in}@media print{body{background:white}.page{max-width:none;min-height:0;margin:0;padding:0;break-after:page}.page:last-child{break-after:auto}}@media screen and (max-width:740px){.page{width:100%;min-height:0;padding:20px}.pair,.cards{grid-template-columns:1fr}h1{font-size:32px}} </style> </head> <body> <section class='page' data-page='1'> <p class='eyebrow'>Product-Detail Collection</p> <h1>Everyday Layers</h1> <p>A fictional four-product collection for retail and buyer review.</p> <img class='photo' src='images/o02-front.jpg' alt='O02 front silhouette'> <p>C01 · O02 front silhouette</p> <p class='refs'>Market: UNSET<br>Currency: USD<br>Season: core<br>Products: P101, P102, P103, P104</p> </section> <section class='page' data-page='2'> <h2>Collection overview</h2> <p>Four products form three styled combinations. Review each look's component variants, then use the product-detail cards for sample sizes, colors and prices. Replace sample specifications with your approved collection data.</p> <img class='photo' src='images/o03-alt.jpg' alt='O03 alternate pose'> <p>I01 · O03 alternate pose</p> <p class='refs'>For buyers, add available size runs, colorways, materials, an ordering contact, minimum quantities and delivery terms.</p> </section> <section class='page' data-page='3' data-outfit='O01'> <h2>The everyday base</h2> <p>An ivory tee and navy trousers establish the collection's simplest silhouette.</p> <section class='pair'> <p><img class='photo' src='images/o01-front.jpg' alt='O01 front silhouette'>O01-F · Front</p> <p><img class='photo' src='images/o01-quarter.jpg' alt='O01 three-quarter silhouette'>O01-Q · Three-quarter</p> </section> <p class='refs'> <a data-product-id='P101' data-sku='P101-IV-S' href='https://example.com/products/ivory-tee?variant=P101-IV-S'>P101 · Ivory tee · Size S · P101-IV-S</a><br> <a data-product-id='P102' data-sku='P102-NV-M' href='https://example.com/products/navy-trousers?variant=P102-NV-M'>P102 · Navy trousers · Size M · P102-NV-M</a> </p> </section> <section class='page' data-page='4' data-outfit='O01'> <h2>O01: silhouette and neckline</h2> <section class='pair'> <p><img class='photo' src='images/o01-alt.jpg' alt='O01 alternate standing pose'>O01-A · Alternate</p> <p><img class='photo detail' src='images/p101-detail.jpg' alt='Original ivory tee neckline detail'>D101 · Original detail</p> </section> <p class='refs'>Outfit: O01<br>Components: P101-IV-S; P102-NV-M<br>Detail product: P101<br>Product references: page 3</p> </section> <section class='page' data-page='5' data-outfit='O02'> <h2>Add a layer</h2> <p>The sand overshirt joins the same tee and trousers to form outfit O02.</p> <section class='pair'> <p><img class='photo' src='images/o02-front.jpg' alt='O02 front silhouette'>O02-F · Front</p> <p><img class='photo' src='images/o02-quarter.jpg' alt='O02 three-quarter silhouette'>O02-Q · Three-quarter</p> </section> <p class='refs'> <a data-product-id='P101' data-sku='P101-IV-S' href='https://example.com/products/ivory-tee?variant=P101-IV-S'>P101 · Ivory tee · Size S · P101-IV-S</a><br> <a data-product-id='P102' data-sku='P102-NV-M' href='https://example.com/products/navy-trousers?variant=P102-NV-M'>P102 · Navy trousers · Size M · P102-NV-M</a><br> <a data-product-id='P103' data-sku='P103-SD-M' href='https://example.com/products/sand-overshirt?variant=P103-SD-M'>P103 · Sand overshirt · Size M · P103-SD-M</a> </p> </section> <section class='page' data-page='6' data-outfit='O02'> <h2>O02: layering and fastening</h2> <section class='pair'> <p><img class='photo' src='images/o02-alt.jpg' alt='O02 alternate standing pose'>O02-A · Alternate</p> <p><img class='photo detail' src='images/p103-detail.jpg' alt='Original sand overshirt fastening detail'>D103 · Original detail</p> </section> <p class='refs'>Outfit: O02<br>Components: P101-IV-S; P102-NV-M; P103-SD-M<br>Detail product: P103<br>Product references: page 5</p> </section> <section class='page' data-page='7' data-outfit='O03'> <h2>Change the silhouette</h2> <p>Pair the tee and overshirt with a charcoal skirt to create the third look.</p> <section class='pair'> <p><img class='photo' src='images/o03-front.jpg' alt='O03 front silhouette'>O03-F · Front</p> <p><img class='photo' src='images/o03-quarter.jpg' alt='O03 three-quarter silhouette'>O03-Q · Three-quarter</p> </section> <p class='refs'> <a data-product-id='P101' data-sku='P101-IV-S' href='https://example.com/products/ivory-tee?variant=P101-IV-S'>P101 · Ivory tee · Size S · P101-IV-S</a><br> <a data-product-id='P103' data-sku='P103-SD-M' href='https://example.com/products/sand-overshirt?variant=P103-SD-M'>P103 · Sand overshirt · Size M · P103-SD-M</a><br> <a data-product-id='P104' data-sku='P104-CH-S' href='https://example.com/products/charcoal-skirt?variant=P104-CH-S'>P104 · Charcoal skirt · Size S · P104-CH-S</a> </p> </section> <section class='page' data-page='8' data-outfit='O03'> <h2>O03: styling and finish</h2> <section class='pair'> <p><img class='photo' src='images/o03-alt.jpg' alt='O03 alternate standing pose'>O03-A · Alternate</p> <p><img class='photo detail' src='images/p104-detail.jpg' alt='Original charcoal skirt construction detail'>D104 · Original detail</p> </section> <p class='refs'>Outfit: O03<br>Components: P101-IV-S; P103-SD-M; P104-CH-S<br>Detail product: P104<br>Product references: page 7</p> </section> <section class='page' data-page='9'> <h2>Product reference cards</h2> <p>Replace these sample variants and retail prices with your collection data. Add approved size runs, colorways and buyer terms for wholesale use.</p> <section class='cards'> <article> <img class='photo detail' src='images/p101-detail.jpg' alt='Ivory tee detail'> <h3>P101 · Ivory tee</h3> <p>D101 · Color: ivory<br>Sample size: S<br>SKU: P101-IV-S<br>Retail: USD $25<br><a href='https://example.com/products/ivory-tee?variant=P101-IV-S'>Ivory tee product reference</a></p> </article> <article> <img class='photo detail' src='images/p102-detail.jpg' alt='Navy trousers detail'> <h3>P102 · Navy trousers</h3> <p>D102 · Color: navy<br>Sample size: M<br>SKU: P102-NV-M<br>Retail: USD $70<br><a href='https://example.com/products/navy-trousers?variant=P102-NV-M'>Navy trousers product reference</a></p> </article> <article> <img class='photo detail' src='images/p103-detail.jpg' alt='Sand overshirt detail'> <h3>P103 · Sand overshirt</h3> <p>D103 · Color: sand<br>Sample size: M<br>SKU: P103-SD-M<br>Retail: USD $90<br><a href='https://example.com/products/sand-overshirt?variant=P103-SD-M'>Sand overshirt product reference</a></p> </article> <article> <img class='photo detail' src='images/p104-detail.jpg' alt='Charcoal skirt detail'> <h3>P104 · Charcoal skirt</h3> <p>D104 · Color: charcoal<br>Sample size: S<br>SKU: P104-CH-S<br>Retail: USD $65<br><a href='https://example.com/products/charcoal-skirt?variant=P104-CH-S'>Charcoal skirt product reference</a></p> </article> </section> </section> <section class='page' data-page='10'> <h2>Next steps for buyers</h2> <p>Contact the collection team for current availability, size runs, colorways and ordering terms. Product references are listed on page 9.</p> <p class='refs'><a href='mailto:studio@example.com'>Request Everyday Layers ordering information</a><br><a href='https://example.com/collections/everyday-layers'>View the collection reference page</a></p> </section> </body> </html>

The print layouts use A4 (210 × 297 mm) and US Letter (8.5 × 11 inches), as listed in MDN’s page-size reference. Adjust the page counts to suit your collection.

LayoutAudiencePages or sectionsDimensions and orientationEditing and delivery
Editorial CollectionCampaign viewers10 pagesA4, 210 × 297 mm, portraitHTML with embedded CSS; browser-print PDF
Shop the LooksOnline shoppers10 sectionsResponsive width; vertical flowHTML with embedded CSS; digital-first
Product-Detail CollectionRetail reviewers and wholesale buyers10 pagesUS Letter, 8.5 × 11 inches, portraitHTML with embedded CSS; browser-print PDF

Paste your chosen HTML into a plain-text editor and save it with the filename listed above. Create an images folder beside it, then replace the filenames, copy, colors, IDs, SKUs and URLs. Open the file in a browser. The system fonts need no installation; use images you have permission to publish. Compare AI fashion model generators if you still need on-model imagery.

Adapt a spread for accessories, kids or baby collections. The replacement sections below reuse the base styles. Replace pages 3–4 of the specified layout with the matching HTML, then repeat the pattern for the remaining spreads and update the cover and product cards. All sample products below are fictional.

Accessory Detail: add worn context, a close-up, a scale reference and fastening details to Product-Detail Collection.

Copy the Accessory Detail replacement HTML.

<section class='page' data-page='3' data-outfit='A01'> <p class='eyebrow'>Accessory Detail</p> <h2>Silver-tone bracelet</h2> <p>Sample product: A201. Variant: A201-SV-ONE. Finish: silver-tone. Size: one sample size.</p> <section class='pair'> <p><img class='photo' src='images/accessory-worn.jpg' alt='Bracelet worn on wrist'>Worn context</p> <p><img class='photo detail' src='images/accessory-close.jpg' alt='Original bracelet finish close-up'>Original close-up</p> </section> <p class='refs'><a data-product-id='A201' data-sku='A201-SV-ONE' href='https://example.com/products/bracelet?variant=A201-SV-ONE'>A201 · Silver-tone bracelet · A201-SV-ONE</a></p> </section> <section class='page' data-page='4' data-outfit='A01'> <h2>Scale and construction</h2> <section class='pair'> <p><img class='photo detail' src='images/accessory-scale.jpg' alt='Original bracelet beside a metric ruler'>Scale reference</p> <p><img class='photo detail' src='images/accessory-fastening.jpg' alt='Original bracelet fastening detail'>Fastening detail</p> </section> <p class='refs'>Product: A201<br>SKU: A201-SV-ONE<br>Add verified measurements, materials, price and currency. Use original photographs for scale and construction.</p> </section>

Kids Everyday: use age-appropriate or flat-lay photography and explicit size fields in Shop the Looks.

Copy the Kids Everyday replacement HTML.

<section class='page' data-page='3' data-outfit='K01'> <p class='eyebrow'>Kids Everyday</p> <h2>Blue everyday top</h2> <p>Sample product: K201. Color: blue. Size label: 6 years. SKU: K201-BL-6Y. Replace with your own size system and measurements.</p> <section class='pair'> <p><img class='photo' src='images/kids-context.jpg' alt='Age-appropriate collection photograph of the blue top'>Age-appropriate context</p> <p><img class='photo detail' src='images/kids-flat-lay.jpg' alt='Original blue top flat lay'>Flat lay</p> </section> <p class='refs'><a data-product-id='K201' data-sku='K201-BL-6Y' href='https://example.com/products/kids-top?variant=K201-BL-6Y'>Shop blue top · Size 6 years · K201-BL-6Y</a></p> </section> <section class='page' data-page='4' data-outfit='K01'> <h2>Construction and size</h2> <section class='pair'> <p><img class='photo detail' src='images/kids-detail.jpg' alt='Original blue top neckline and seam detail'>Garment detail</p> <p><img class='photo detail' src='images/kids-size-reference.jpg' alt='Original blue top size reference photograph'>Size reference</p> </section> <p class='refs'>Product: K201<br>Variant: K201-BL-6Y<br>Add approved size chart, available sizes, price, currency and market. Use age-appropriate photography or flat lays.</p> </section>

Baby Essentials: add flat lays, fastening details and age/size labels to Product-Detail Collection.

Copy the Baby Essentials replacement HTML.

<section class='page' data-page='3' data-outfit='B01'> <p class='eyebrow'>Baby Essentials</p> <h2>Cream bodysuit</h2> <p>Sample product: B201. Color: cream. Age/size label: 0-3 months. SKU: B201-CR-0_3M.</p> <section class='pair'> <p><img class='photo' src='images/baby-flat-lay.jpg' alt='Original cream bodysuit front flat lay'>Front flat lay</p> <p><img class='photo detail' src='images/baby-fastening.jpg' alt='Original bodysuit fastening detail'>Fastening detail</p> </section> <p class='refs'><a data-product-id='B201' data-sku='B201-CR-0_3M' href='https://example.com/products/baby-bodysuit?variant=B201-CR-0_3M'>B201 · Cream bodysuit · 0-3 months · B201-CR-0_3M</a></p> </section> <section class='page' data-page='4' data-outfit='B01'> <h2>Back view and fabric</h2> <section class='pair'> <p><img class='photo' src='images/baby-back-flat-lay.jpg' alt='Original cream bodysuit back flat lay'>Back flat lay</p> <p><img class='photo detail' src='images/baby-fabric.jpg' alt='Original bodysuit fabric and seam detail'>Fabric detail</p> </section> <p class='refs'>Product: B201<br>SKU: B201-CR-0_3M<br>Add approved age/size labels, measurements, price, currency and market. Use original flat lays and detail photographs.</p> </section>

Copy the page plan and SKU-linked asset manifest

Use stable product IDs for garments, variant SKUs for exact versions, and outfit IDs for combinations. Keep each garment’s product ID consistent, following Google Merchant Center’s guidance.

Copy the page-plan table into a spreadsheet and save the CSV below as assets.csv.

The 10-page collection plan

Example: Everyday Layers outfit mapping

Use these four sample variants for Everyday Layers: P101-IV-S, ivory tee, USD $25; P102-NV-M, navy trousers, USD $70; P103-SD-M, sand overshirt, USD $90; and P104-CH-S, charcoal skirt, USD $65.

  1. O01: tee + trousers.
  2. O02: tee + trousers + overshirt.
  3. O03: tee + skirt + overshirt.

O02 needs three product associations per outfit image, not one “outfit SKU.” Place front and three-quarter views together for comparison, then use the second page for an alternate pose and an original close-up. Adjust the copy limits below as needed; they exclude product labels.

Page and purposeImage slotsCopy limitOutfit and productsShopping destination
1: coverC01, reuse O02-FTitle + short subtitleO02; P101, P102, P103Collection URL
2: introductionI01, reuse O03-A60 wordsO03; P101, P103, P104O03 references
3: O01 silhouetteO01-F, O01-QOne styling sentence across pages 3–4O01; P101, P102Two variant URLs
4: O01 styling and detailO01-A, D101Shared with page 3O01; P101, P102; detail P101Page 3 references
5: O02 silhouetteO02-F, O02-QOne styling sentence across pages 5–6O02; P101, P102, P103Three variant URLs
6: O02 styling and detailO02-A, D103Shared with page 5O02; P101, P102, P103; detail P103Page 5 references
7: O03 silhouetteO03-F, O03-QOne styling sentence across pages 7–8O03; P101, P103, P104Three variant URLs
8: O03 styling and detailO03-A, D104Shared with page 7O03; P101, P103, P104; detail P104Page 7 references
9: four product cardsD101, D102, D103, D10425 words per card, plus fieldsP101–P104; exact SKUs, colors, sizes, pricesFour variant URLs
10: closing referencesNo image requiredBrief shopping or ordering instructionO01–O03; P101–P104Collection URL + contact

The image-to-product CSV

Each row connects one asset to one product variant. Repeat filenames to link every piece in a multi-product look. Track source photographs and generation runs in their own fields. The manifest includes every selected image and an unused alternative. Before publishing, complete the approvals and replace UNSET with your target country.

asset_id,product_id,variant_sku,outfit_id,component_skus,filename,source_image,generation_run_id,pose_slot,page_placement,crop,product_url,country,price_currency,credit_line,rights_notes,approval_status,selection_status A01F,P101,P101-IV-S,O01,"P101-IV-S;P102-NV-M",images/o01-front.jpg,sources/o01.jpg,DEMO-O01-01,front,p3,2:3 centered,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A01F,P102,P102-NV-M,O01,"P101-IV-S;P102-NV-M",images/o01-front.jpg,sources/o01.jpg,DEMO-O01-01,front,p3,2:3 centered,https://example.com/products/navy-trousers?variant=P102-NV-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A01Q,P101,P101-IV-S,O01,"P101-IV-S;P102-NV-M",images/o01-quarter.jpg,sources/o01.jpg,DEMO-O01-01,three-quarter,p3,2:3 centered,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A01Q,P102,P102-NV-M,O01,"P101-IV-S;P102-NV-M",images/o01-quarter.jpg,sources/o01.jpg,DEMO-O01-01,three-quarter,p3,2:3 centered,https://example.com/products/navy-trousers?variant=P102-NV-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A01A,P101,P101-IV-S,O01,"P101-IV-S;P102-NV-M",images/o01-alt.jpg,sources/o01.jpg,DEMO-O01-01,alternate,p4,2:3 centered,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A01A,P102,P102-NV-M,O01,"P101-IV-S;P102-NV-M",images/o01-alt.jpg,sources/o01.jpg,DEMO-O01-01,alternate,p4,2:3 centered,https://example.com/products/navy-trousers?variant=P102-NV-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A02F,P101,P101-IV-S,O02,"P101-IV-S;P102-NV-M;P103-SD-M",images/o02-front.jpg,sources/o02.jpg,DEMO-O02-01,front,"p1;p5",2:3 centered,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A02F,P102,P102-NV-M,O02,"P101-IV-S;P102-NV-M;P103-SD-M",images/o02-front.jpg,sources/o02.jpg,DEMO-O02-01,front,"p1;p5",2:3 centered,https://example.com/products/navy-trousers?variant=P102-NV-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A02F,P103,P103-SD-M,O02,"P101-IV-S;P102-NV-M;P103-SD-M",images/o02-front.jpg,sources/o02.jpg,DEMO-O02-01,front,"p1;p5",2:3 centered,https://example.com/products/sand-overshirt?variant=P103-SD-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A02Q,P101,P101-IV-S,O02,"P101-IV-S;P102-NV-M;P103-SD-M",images/o02-quarter.jpg,sources/o02.jpg,DEMO-O02-01,three-quarter,p5,2:3 centered,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A02Q,P102,P102-NV-M,O02,"P101-IV-S;P102-NV-M;P103-SD-M",images/o02-quarter.jpg,sources/o02.jpg,DEMO-O02-01,three-quarter,p5,2:3 centered,https://example.com/products/navy-trousers?variant=P102-NV-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A02Q,P103,P103-SD-M,O02,"P101-IV-S;P102-NV-M;P103-SD-M",images/o02-quarter.jpg,sources/o02.jpg,DEMO-O02-01,three-quarter,p5,2:3 centered,https://example.com/products/sand-overshirt?variant=P103-SD-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A02A,P101,P101-IV-S,O02,"P101-IV-S;P102-NV-M;P103-SD-M",images/o02-alt.jpg,sources/o02.jpg,DEMO-O02-01,alternate,p6,2:3 centered,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A02A,P102,P102-NV-M,O02,"P101-IV-S;P102-NV-M;P103-SD-M",images/o02-alt.jpg,sources/o02.jpg,DEMO-O02-01,alternate,p6,2:3 centered,https://example.com/products/navy-trousers?variant=P102-NV-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A02A,P103,P103-SD-M,O02,"P101-IV-S;P102-NV-M;P103-SD-M",images/o02-alt.jpg,sources/o02.jpg,DEMO-O02-01,alternate,p6,2:3 centered,https://example.com/products/sand-overshirt?variant=P103-SD-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A03F,P101,P101-IV-S,O03,"P101-IV-S;P103-SD-M;P104-CH-S",images/o03-front.jpg,sources/o03.jpg,DEMO-O03-01,front,p7,2:3 centered,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A03F,P103,P103-SD-M,O03,"P101-IV-S;P103-SD-M;P104-CH-S",images/o03-front.jpg,sources/o03.jpg,DEMO-O03-01,front,p7,2:3 centered,https://example.com/products/sand-overshirt?variant=P103-SD-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A03F,P104,P104-CH-S,O03,"P101-IV-S;P103-SD-M;P104-CH-S",images/o03-front.jpg,sources/o03.jpg,DEMO-O03-01,front,p7,2:3 centered,https://example.com/products/charcoal-skirt?variant=P104-CH-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A03Q,P101,P101-IV-S,O03,"P101-IV-S;P103-SD-M;P104-CH-S",images/o03-quarter.jpg,sources/o03.jpg,DEMO-O03-01,three-quarter,p7,2:3 centered,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A03Q,P103,P103-SD-M,O03,"P101-IV-S;P103-SD-M;P104-CH-S",images/o03-quarter.jpg,sources/o03.jpg,DEMO-O03-01,three-quarter,p7,2:3 centered,https://example.com/products/sand-overshirt?variant=P103-SD-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A03Q,P104,P104-CH-S,O03,"P101-IV-S;P103-SD-M;P104-CH-S",images/o03-quarter.jpg,sources/o03.jpg,DEMO-O03-01,three-quarter,p7,2:3 centered,https://example.com/products/charcoal-skirt?variant=P104-CH-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A03A,P101,P101-IV-S,O03,"P101-IV-S;P103-SD-M;P104-CH-S",images/o03-alt.jpg,sources/o03.jpg,DEMO-O03-01,alternate,"p2;p8",2:3 centered,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A03A,P103,P103-SD-M,O03,"P101-IV-S;P103-SD-M;P104-CH-S",images/o03-alt.jpg,sources/o03.jpg,DEMO-O03-01,alternate,"p2;p8",2:3 centered,https://example.com/products/sand-overshirt?variant=P103-SD-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A03A,P104,P104-CH-S,O03,"P101-IV-S;P103-SD-M;P104-CH-S",images/o03-alt.jpg,sources/o03.jpg,DEMO-O03-01,alternate,"p2;p8",2:3 centered,https://example.com/products/charcoal-skirt?variant=P104-CH-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected D101,P101,P101-IV-S,NONE,P101-IV-S,images/p101-detail.jpg,products/p101.jpg,,original detail,"p4;p9",1:1 detail,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected D102,P102,P102-NV-M,NONE,P102-NV-M,images/p102-detail.jpg,products/p102.jpg,,original detail,p9,1:1 detail,https://example.com/products/navy-trousers?variant=P102-NV-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected D103,P103,P103-SD-M,NONE,P103-SD-M,images/p103-detail.jpg,products/p103.jpg,,original detail,"p6;p9",1:1 detail,https://example.com/products/sand-overshirt?variant=P103-SD-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected D104,P104,P104-CH-S,NONE,P104-CH-S,images/p104-detail.jpg,products/p104.jpg,,original detail,"p8;p9",1:1 detail,https://example.com/products/charcoal-skirt?variant=P104-CH-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,selected A01S,P101,P101-IV-S,O01,"P101-IV-S;P102-NV-M",images/o01-side-unused.jpg,sources/o01.jpg,DEMO-O01-01,side,NONE,2:3 centered,https://example.com/products/ivory-tee?variant=P101-IV-S,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,unused alternative A01S,P102,P102-NV-M,O01,"P101-IV-S;P102-NV-M",images/o01-side-unused.jpg,sources/o01.jpg,DEMO-O01-01,side,NONE,2:3 centered,https://example.com/products/navy-trousers?variant=P102-NV-M,UNSET,USD,Replace credit,"Fictional row, verify rights",pending,unused alternative

Replace example.com destinations with live links that preselect the variant, following Google’s landing-page guidance. Complete the credit and rights fields too. Use the supplier’s requested publication credit for Credit Line, as defined in IPTC’s metadata guide.

Allocate image slots before producing new poses

Plan four selected slots per outfit spread: three on-model views and one original garment detail. Full-length views explain silhouette; alternate angles explain styling; close-ups verify construction. Google’s additional-image guidance supports both in-use imagery and views highlighting product parts.

Example: Four slots for O01

Use our Catalogue Studio to request front, three-quarter, side and alternate standing candidates. Select three, then add the original tee detail. Generate alternatives without expanding the published layout: 4 roles × 2 candidates = 8 outputs; 4 roles × 3 candidates = 12 outputs.

Needed imageStarting referenceManifest action
Another pose of O01Existing O01 model photoKeep O01; record new asset and run
New combination O02Source imagery showing O02Assign O02 and all three component SKUs
Seam or fastening detailRelevant original product photographRecord product SKU; leave generation run empty

Upload JPEG, PNG or WebP files up to 10MB. Auto Mode offers optional guidance and background preservation; Manual Mode lets you describe each pose individually. A pose variation keeps the existing outfit, so adding an overshirt requires source imagery of that combination. Check exact color, pattern, finish and material against the product references before approval, as Google’s variant-image guidance requires.

Adapt the layouts for your collection

Match the layout and image slots to the collection’s garments, audience and shopping needs.

CollectionLayout adaptationImage and information changes
Denim and outerwearEditorial CollectionFull silhouette, layering view, seams and closures
Dresses and sportswearShop the LooksProportion, movement and construction views
Jewelry and accessoriesAccessory Detail replacement spreadWorn context, close-up, scale reference, exact finish SKU
ChildrenswearKids Everyday replacement spreadAge-appropriate photography or flat lays; size labels
Baby fashionBaby Essentials replacement spreadFlat lays, fastening details, age or size labels
Warm-weather campaignShop the LooksDresses and lightweight tops; prioritize unlayered silhouettes and fabric details. Keep Everyday Layers as the master name, use Light Layers for the campaign, and specify your destination market.
Cold-weather campaignEditorial CollectionOvershirts and outerwear; prioritize layered combinations and closure details. Keep Everyday Layers as the master name, use Layered Days for the campaign, and specify your destination market.
WholesaleProduct-Detail CollectionSize runs, colorways, approved commercial terms and buyer contact

Our AI product photography turns flat lays and product shots into on-model imagery for clothing, bags, footwear, necklaces, earrings, rings and bracelets. Retain original detail photographs. For kids and baby collections, use age-appropriate photography or flat lays. Google’s age-group guidance notes that newborn labels commonly use “newborn” or 0–3 months.

Keep a season-neutral master name and update campaign styling and market copy separately. Preserve product IDs, specify the country and local URLs, and use currency codes such as USD, following Schema.org’s currency guidance. The structure also works for product or lifestyle lookbooks beyond fashion.

Check the printable and digital versions

Choose A4 or US Letter to suit your printer and audience. Use responsive HTML for mobile shopping.

  • Consistency: check model identity, garment details, lighting, background, crop and asset approval. Keep important garment features inside each crop.
  • Shopping: test every URL, preselected variant, country destination, currency and product reference against the manifest.
  • Digital: verify that ordinary content reflows at 320 CSS pixels, following W3C’s reflow guidance. Use descriptive shopping links, following W3C’s link-text guidance.
  • Browser-print PDF: choose the intended paper, disable unwanted browser headers and footers, and inspect margins, page breaks, resolution, crops and saved links. The templates use image elements rather than CSS backgrounds; verify that every photograph appears in the saved PDF. MDN’s printing guide explains the embedded @page controls.
  • Professional print: ask the provider about resolution, color and bleed. Adobe’s bleed guidance gives a typical 3 mm bleed; printer requirements take priority. Prepare full-bleed press files with your print provider.
  • Interactive delivery: publish the responsive HTML for mobile reading. For an interactive PDF, Adobe’s interactive PDF guide covers an InDesign workflow. These templates are HTML; no InDesign file is included.

Start with one outfit spread

Copy your chosen layout, replace one spread, and complete its component rows. Verify the images and shopping links before duplicating the pattern. If you need more poses of the same outfit, explore our image-production tools.