Surface Nested Cart Lines (#3803)

graciebee · web-flow · commit d6f6b7d20678 · 2025-07-08T09:08:43.000-04:00
diff --git a/assets/component-cart-drawer.css b/assets/component-cart-drawer.css
@@ -218,6 +218,11 @@ cart-drawer-items {
   max-width: 100%;
 }
 
+.cart-drawer .cart-item__nested-line .cart-item__image {
+  max-width: 60%;
+  float: right;
+}
+
 .cart-drawer .cart-items thead {
   margin-bottom: 0.5rem;
 }
@@ -255,6 +260,10 @@ cart-drawer-items {
   padding-top: 1.7rem;
 }
 
+.cart-drawer .cart-items .cart-item__nested-line td:not(.cart-item__quantity) {
+  padding-top: 1rem;
+}
+
 .cart-drawer .cart-item > td + td {
   padding-left: 1rem;
 }
diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css
@@ -32,6 +32,14 @@ cart-items .title-wrapper-with-link {
   align-items: flex-start;
 }
 
+.cart-item__nested-line .cart-item__image-container {
+  min-width: calc(10rem / var(--font-body-scale));
+  justify-content: right;
+  img {
+    width: 60%;
+  }
+}
+
 .cart-item__image-container:after {
   content: none;
 }
@@ -237,6 +245,10 @@ cart-remove-button .icon-remove {
     margin-bottom: 3.5rem;
   }
 
+  .cart-item:has(+ .cart-item__nested-line) {
+    margin-bottom: 1.5rem;
+  }
+
   .cart-item:last-child {
     margin-bottom: 0;
   }
@@ -290,6 +302,10 @@ cart-remove-button .icon-remove {
     padding-top: 4rem;
   }
 
+  .cart-items .cart-item__nested-line td {
+    padding-top: 1rem;
+  }
+
   .cart-item {
     display: table-row;
   }
diff --git a/locales/bg.json b/locales/bg.json
@@ -155,6 +155,7 @@
         "load_video": "Пускане на видео {{ index }} във визуализатора на галерията",
         "image_available": "Изображение {{ index }} вече е налично във визуализатора на галерията"
       },
+      "nested_label": "{{ product_title }} за {{ parent_title }}",
       "view_full_details": "Покажи пълните подробности",
       "shipping_policy_html": "<a href=\"{{ link }}\">Доставката</a> се изчислява при плащане.",
       "choose_options": "Изберете опции",
diff --git a/locales/cs.json b/locales/cs.json
@@ -157,6 +157,7 @@
         "load_video": "Přehrát video {{ index }} v zobrazení galerie",
         "image_available": "Obrázek {{ index }} je nyní k dispozici v zobrazení galerie"
       },
+      "nested_label": "{{ product_title }} pro {{ parent_title }}",
       "view_full_details": "Zobrazit veškeré podrobnosti",
       "shipping_policy_html": "<a href=\"{{ link }}\">Poštovné</a> se vypočítá na pokladně.",
       "choose_options": "Výběr možností",
diff --git a/locales/da.json b/locales/da.json
@@ -155,6 +155,7 @@
         "load_video": "Afspil videoen {{ index }} i gallerivisning",
         "image_available": "Billedet {{ index }} er nu tilgængeligt i gallerivisning"
       },
+      "nested_label": "{{ product_title }} til {{ parent_title }}",
       "view_full_details": "Se komplette oplysninger",
       "shipping_policy_html": "<a href=\"{{ link }}\">Levering</a> beregnes ved betaling.",
       "choose_options": "Vælg muligheder",
diff --git a/locales/de.json b/locales/de.json
@@ -155,6 +155,7 @@
         "load_video": "Video {{ index }} in Galerieansicht abspielen",
         "image_available": "Bild {{ index }} ist nun in der Galerieansicht verfügbar"
       },
+      "nested_label": "{{ product_title }} für {{ parent_title }}",
       "view_full_details": "Vollständige Details anzeigen",
       "shipping_policy_html": "<a href=\"{{ link }}\">Versand</a> wird beim Checkout berechnet",
       "choose_options": "Optionen auswählen",
diff --git a/locales/el.json b/locales/el.json
@@ -156,6 +156,7 @@
         "load_video": "Αναπαραγωγή βίντεο {{ index }} στην προβολή συλλογής",
         "image_available": "Η εικόνα {{ index }} είναι τώρα διαθέσιμη στην προβολή συλλογής"
       },
+      "nested_label": "{{ product_title }} για {{ parent_title }}",
       "view_full_details": "Προβολή όλων των λεπτομερειών",
       "shipping_policy_html": "Τα <a href=\"{{ link }}\">έξοδα αποστολής</a> υπολογίζονται κατά την ολοκλήρωση της αγοράς.",
       "choose_options": "Ορίστε επιλογές",
diff --git a/locales/en.default.json b/locales/en.default.json
@@ -129,6 +129,7 @@
         "play_model": "Play 3D Viewer",
         "play_video": "Play video"
       },
+      "nested_label": "{{ title }} for {{ parent_title }}",
       "quantity": {
         "label": "Quantity",
         "input_label": "Quantity for {{ product }}",
diff --git a/locales/es.json b/locales/es.json
@@ -156,6 +156,7 @@
         "load_video": "Reproducir el video {{ index }} en la vista de la galería",
         "image_available": "La imagen {{ index }} ya está disponible en la vista de la galería"
       },
+      "nested_label": "{{ product_title }} para {{ parent_title }}",
       "view_full_details": "Ver todos los detalles",
       "shipping_policy_html": "Los <a href=\"{{ link }}\">gastos de envío</a> se calculan en la pantalla de pago.",
       "choose_options": "Seleccionar opciones",
diff --git a/locales/fi.json b/locales/fi.json
@@ -155,6 +155,7 @@
         "load_video": "Toista video {{ index }} gallerianäkymässä",
         "image_available": "Kuva {{ index }} on nyt saatavilla gallerianäkymässä"
       },
+      "nested_label": "{{ product_title }} {{ parent_title }}:lle",
       "view_full_details": "Näytä kaikki tiedot",
       "shipping_policy_html": "<a href=\"{{ link }}\">Toimituskulut</a> lasketaan kassalla.",
       "choose_options": "Valitse vaihtoehdot",
diff --git a/locales/fr.json b/locales/fr.json
@@ -157,6 +157,7 @@
         "load_video": "Lire la vidéo {{ index }} dans la galerie",
         "image_available": "L'image {{ index }} est maintenant disponible dans la galerie"
       },
+      "nested_label": "{{ product_title }} pour {{ parent_title }}",
       "view_full_details": "Afficher tous les détails",
       "shipping_policy_html": "<a href=\"{{ link }}\">Frais d'expédition</a> calculés à l'étape de paiement.",
       "choose_options": "Choisir des options",
diff --git a/locales/hr.json b/locales/hr.json
@@ -157,6 +157,7 @@
         "load_video": "Reproduciraj videozapis {{ index }} u galerijskom prikazu",
         "image_available": "Slika {{ index }} sada je dostupna za prikaz u galeriji"
       },
+      "nested_label": "{{ product_title }} za {{ parent_title }}",
       "view_full_details": "Prikaži sve pojedinosti",
       "shipping_policy_html": "<a href=\"{{ link }}\">Poštarina </a> se obračunava prilikom završetka kupnje.",
       "choose_options": "Odaberite opcije",
diff --git a/locales/hu.json b/locales/hu.json
@@ -156,6 +156,7 @@
         "load_video": "{{ index }}. videó lejátszása galérianézetben",
         "image_available": "{{ index }}. kép betöltve galérianézetben"
       },
+      "nested_label": "{{ product_title }} {{ parent_title }} számára",
       "view_full_details": "Minden részlet megtekintése",
       "shipping_policy_html": "A <a href=\"{{ link }}\">szállítási költséget</a> a megrendeléskor számítjuk ki.",
       "choose_options": "Válassz a lehetőségek közül",
diff --git a/locales/id.json b/locales/id.json
@@ -156,6 +156,7 @@
         "load_video": "Putar video {{ index }} di tampilan galeri",
         "image_available": "Gambar {{ index }} kini tersedia di tampilan galeri"
       },
+      "nested_label": "{{ product_title }} untuk {{ parent_title }}",
       "view_full_details": "Lihat detail lengkap",
       "shipping_policy_html": "<a href=\"{{ link }}\">Biaya pengiriman</a> dihitung saat checkout.",
       "choose_options": "Pilih opsi",
diff --git a/locales/it.json b/locales/it.json
@@ -156,6 +156,7 @@
         "load_video": "Riproduci video {{ index }} in visualizzazione galleria",
         "image_available": "L'immagine {{ index }} è ora disponibile in visualizzazione galleria"
       },
+      "nested_label": "{{ product_title }} per {{ parent_title }}",
       "view_full_details": "Visualizza dettagli completi",
       "shipping_policy_html": "<a href=\"{{ link }}\">Spese di spedizione</a> calcolate al check-out.",
       "choose_options": "Scegli opzioni",
diff --git a/locales/ja.json b/locales/ja.json
@@ -156,6 +156,7 @@
         "load_video": "ギャラリービューでビデオ ({{ index }}) を再生する",
         "image_available": "ギャラリービューで画像 ({{ index }}) が利用できるようになりました"
       },
+      "nested_label": "{{ parent_title }}用の{{ product_title }}",
       "view_full_details": "詳細を表示する",
       "shipping_policy_html": "<a href=\"{{ link }}\">配送料</a>はチェックアウト時に計算されます。",
       "choose_options": "オプションを選択",
diff --git a/locales/ko.json b/locales/ko.json
@@ -156,6 +156,7 @@
         "load_video": "갤러리 뷰에서 동영상 {{ index }} 재생",
         "image_available": "이제 갤러리 뷰에서 이미지 {{ index }} 사용 가능"
       },
+      "nested_label": "{{ parent_title }}용 {{ product_title }}",
       "view_full_details": "전체 세부 정보 보기",
       "shipping_policy_html": "<a href=\"{{ link }}\">배송료</a>는 결제 시 계산됩니다.",
       "choose_options": "옵션 선택하기",
diff --git a/locales/lt.json b/locales/lt.json
@@ -158,6 +158,7 @@
         "load_video": "Leisti vaizdo įrašą {{ index }} galerijos rodinyje",
         "image_available": "Vaizdas {{ index }} dabar prieinamas galerijos rodinyje"
       },
+      "nested_label": "{{ product_title }} {{ parent_title }}",
       "view_full_details": "Žiūrėti visą informaciją",
       "shipping_policy_html": "<a href=\"{{ link }}\">Siuntimo išlaidos</a> apskaičiuojamos atsiskaitant.",
       "choose_options": "Rinktis variantus",
diff --git a/locales/nb.json b/locales/nb.json
@@ -155,6 +155,7 @@
         "load_video": "Spill av video {{ index }} i gallerivisning",
         "image_available": "Bilde {{ index }} er nå tilgjengelig i gallerivisning"
       },
+      "nested_label": "{{ product_title }} for {{ parent_title }}",
       "view_full_details": "Vis alle detaljer",
       "shipping_policy_html": "<a href=\"{{ link }}\">Frakt</a> beregnes ved kassen.",
       "choose_options": "Velg alternativer",
diff --git a/locales/nl.json b/locales/nl.json
@@ -155,6 +155,7 @@
         "load_video": "Video {{ index }} afspelen in gallery-weergave",
         "image_available": "Afbeelding {{ index }} is nu beschikbaar in gallery-weergave"
       },
+      "nested_label": "{{ product_title }} voor {{ parent_title }}",
       "view_full_details": "Alle details bekijken",
       "shipping_policy_html": "<a href=\"{{ link }}\">Verzendkosten</a> worden berekend bij de checkout.",
       "choose_options": "Opties kiezen",
diff --git a/locales/pl.json b/locales/pl.json
@@ -157,6 +157,7 @@
         "load_video": "Odtwórz film {{ index }} w widoku galerii",
         "image_available": "Obraz {{ index }} jest teraz dostępny w widoku galerii"
       },
+      "nested_label": "{{ product_title }} dla {{ parent_title }}",
       "view_full_details": "Pokaż kompletne dane",
       "shipping_policy_html": "<a href=\"{{ link }}\">Koszt wysyłki</a> obliczony przy realizacji zakupu.",
       "choose_options": "Wybierz opcje",
diff --git a/locales/pt-BR.json b/locales/pt-BR.json
@@ -156,6 +156,7 @@
         "load_video": "Reproduzir vídeo {{ index }} no visualizador da galeria",
         "image_available": "A imagem {{ index }} está disponível no visualizador da galeria"
       },
+      "nested_label": "{{ product_title }} para {{ parent_title }}",
       "view_full_details": "Ver informações completas",
       "shipping_policy_html": "<a href=\"{{ link }}\">Frete</a> calculado no checkout.",
       "choose_options": "Escolher opções",
diff --git a/locales/pt-PT.json b/locales/pt-PT.json
@@ -157,6 +157,7 @@
         "load_video": "Reproduzir vídeo {{ index }} na vista de galeria",
         "image_available": "A imagem {{ index }} está agora disponível na vista de galeria"
       },
+      "nested_label": "{{ product_title }} para {{ parent_title }}",
       "view_full_details": "Ver detalhes completos",
       "shipping_policy_html": "<a href=\"{{ link }}\">Envio</a> calculado na finalização da compra.",
       "choose_options": "Escolher opções",
diff --git a/locales/ro.json b/locales/ro.json
@@ -157,6 +157,7 @@
         "load_video": "Redă videoclipul {{ index }} în vizualizarea galeriei",
         "image_available": "Imaginea {{ index }} este disponibilă acum în vizualizarea galeriei"
       },
+      "nested_label": "{{ product_title }} pentru {{ parent_title }}",
       "view_full_details": "Vedeți detaliile complete",
       "shipping_policy_html": "<a href=\"{{ link }}\">Taxele de expediere</a> sunt calculate la finalizarea comenzii.",
       "choose_options": "Alege opțiunile",
diff --git a/locales/ru.json b/locales/ru.json
@@ -157,6 +157,7 @@
         "load_video": "Загрузить видео {{ index }} в средство просмотра галереи",
         "image_available": "Изображение {{ index }} доступно в средстве просмотра галереи"
       },
+      "nested_label": "{{ product_title }} для {{ parent_title }}",
       "view_full_details": "Просмотреть всю информацию",
       "shipping_policy_html": "<a href=\"{{ link }}\">Стоимость доставки</a> рассчитывается при оформлении заказа.",
       "choose_options": "Выберите варианты",
diff --git a/locales/sk.json b/locales/sk.json
@@ -158,6 +158,7 @@
         "load_video": "Prehrať video {{ index }} v zobrazení galérie",
         "image_available": "Obrázok {{ index }} je teraz dostupný v zobrazení galérie"
       },
+      "nested_label": "{{ product_title }} pre {{ parent_title }}",
       "view_full_details": "Zobraziť všetky podrobnosti",
       "shipping_policy_html": "<a href=\"{{ link }}\">Doprava</a> sa vypočíta pri platbe.",
       "choose_options": "Vybrať možnosti",
diff --git a/locales/sl.json b/locales/sl.json
@@ -158,6 +158,7 @@
         "load_video": "Predvajajte videoposnetek {{ index }} v pogledu galerije",
         "image_available": "Slika {{ index }} je zdaj na voljo v pogledu galerije"
       },
+      "nested_label": "{{ product_title }} za {{ parent_title }}",
       "view_full_details": "Prikaži vse podrobnosti",
       "shipping_policy_html": "<a href=\"{{ link }}\">Dostava</a> se obračuna ob zaključku nakupa.",
       "choose_options": "Izberite možnosti",
diff --git a/locales/sv.json b/locales/sv.json
@@ -155,6 +155,7 @@
         "load_video": "Spela videon {{ index }} i gallerivisning",
         "image_available": "Bilden {{ index }} är nu tillgänglig i gallerivisning"
       },
+      "nested_label": "{{ product_title }} för {{ parent_title }}",
       "view_full_details": "Visa alla uppgifter",
       "shipping_policy_html": "<a href=\"{{ link }}\">Frakt</a> beräknas i kassan.",
       "choose_options": "Välj alternativ",
diff --git a/locales/th.json b/locales/th.json
@@ -155,6 +155,7 @@
         "load_video": "เล่นวิดีโอ {{ index }} ในมุมมองแกลเลอรี",
         "image_available": "รูปภาพ {{ index }} พร้อมใช้งานในมุมมองแกลเลอรี"
       },
+      "nested_label": "{{ product_title }} สำหรับ {{ parent_title }}",
       "view_full_details": "ดูรายละเอียดทั้งหมด",
       "shipping_policy_html": "<a href=\"{{ link }}\">ค่าจัดส่ง</a>ที่คำนวณในขั้นตอนการชำระเงิน",
       "choose_options": "เลือกตัวเลือก",
diff --git a/locales/tr.json b/locales/tr.json
@@ -155,6 +155,7 @@
         "load_video": "Video {{ index }} galeri görüntüleyicide oynatın",
         "image_available": "Görsel {{ index }} artık galeri görüntüleyicide kullanılabilir"
       },
+      "nested_label": "{{ parent_title }} için {{ product_title }}",
       "view_full_details": "Tüm ayrıntıları görüntüle",
       "shipping_policy_html": "<a href=\"{{ link }}\">Kargo</a>, ödeme sayfasında hesaplanır.",
       "choose_options": "Seçenekleri belirle",
diff --git a/locales/vi.json b/locales/vi.json
@@ -156,6 +156,7 @@
         "load_video": "Phát video {{ index }} trong chế độ xem thư viện",
         "image_available": "Hình ảnh {{ index }} hiện đã có trong chế độ xem thư viện"
       },
+      "nested_label": "{{ product_title }} cho {{ parent_title }}",
       "view_full_details": "Xem toàn bộ chi tiết",
       "shipping_policy_html": "<a href=\"{{ link }}\">Phí vận chuyển</a> được tính khi thanh toán.",
       "choose_options": "Chọn các tùy chọn",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
@@ -156,6 +156,7 @@
         "load_video": "在图库视图中播放视频 {{ index }}",
         "image_available": "图片 {{ index }} 现已在图库视图中可用"
       },
+      "nested_label": "{{ parent_title }}的{{ product_title }}",
       "view_full_details": "查看完整详细信息",
       "shipping_policy_html": "结账时计算的<a href=\"{{ link }}\">运费</a>。",
       "choose_options": "选择选项",
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
@@ -156,6 +156,7 @@
         "load_video": "在圖庫檢視畫面播放影片 {{ index }}",
         "image_available": "現在可在圖庫檢視畫面中查看圖片 {{ index }}"
       },
+      "nested_label": "{{ parent_title }}的{{ product_title }}",
       "view_full_details": "查看完整資訊",
       "shipping_policy_html": "結帳時計算<a href=\"{{ link }}\">運費</a>。",
       "choose_options": "選擇選項",
diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid
diff --git a/snippets/cart-drawer.liquid b/snippets/cart-drawer.liquid

Original file line number	Diff line number	Diff line change
`@@ -218,6 +218,11 @@ cart-drawer-items {`
`218`	`218`	`max-width: 100%;`
`219`	`219`	`}`
`220`	`220`
	`221`	`+.cart-drawer .cart-item__nested-line .cart-item__image {`
	`222`	`+ max-width: 60%;`
	`223`	`+ float: right;`
	`224`	`+}`
	`225`	`+`
`221`	`226`	`.cart-drawer .cart-items thead {`
`222`	`227`	`margin-bottom: 0.5rem;`
`223`	`228`	`}`
`@@ -255,6 +260,10 @@ cart-drawer-items {`
`255`	`260`	`padding-top: 1.7rem;`
`256`	`261`	`}`
`257`	`262`
	`263`	`+.cart-drawer .cart-items .cart-item__nested-line td:not(.cart-item__quantity) {`
	`264`	`+ padding-top: 1rem;`
	`265`	`+}`
	`266`	`+`
`258`	`267`	`.cart-drawer .cart-item > td + td {`
`259`	`268`	`padding-left: 1rem;`
`260`	`269`	`}`
Original file line number	Diff line number	Diff line change
`@@ -32,6 +32,14 @@ cart-items .title-wrapper-with-link {`
`32`	`32`	`align-items: flex-start;`
`33`	`33`	`}`
`34`	`34`
	`35`	`+.cart-item__nested-line .cart-item__image-container {`
	`36`	`+ min-width: calc(10rem / var(--font-body-scale));`
	`37`	`+ justify-content: right;`
	`38`	`+ img {`
	`39`	`+ width: 60%;`
	`40`	`+ }`
	`41`	`+}`
	`42`	`+`
`35`	`43`	`.cart-item__image-container:after {`
`36`	`44`	`content: none;`
`37`	`45`	`}`
`@@ -237,6 +245,10 @@ cart-remove-button .icon-remove {`
`237`	`245`	`margin-bottom: 3.5rem;`
`238`	`246`	`}`
`239`	`247`
	`248`	`+ .cart-item:has(+ .cart-item__nested-line) {`
	`249`	`+ margin-bottom: 1.5rem;`
	`250`	`+ }`
	`251`	`+`
`240`	`252`	`.cart-item:last-child {`
`241`	`253`	`margin-bottom: 0;`
`242`	`254`	`}`
`@@ -290,6 +302,10 @@ cart-remove-button .icon-remove {`
`290`	`302`	`padding-top: 4rem;`
`291`	`303`	`}`
`292`	`304`
	`305`	`+ .cart-items .cart-item__nested-line td {`
	`306`	`+ padding-top: 1rem;`
	`307`	`+ }`
	`308`	`+`
`293`	`309`	`.cart-item {`
`294`	`310`	`display: table-row;`
`295`	`311`	`}`