Product Option | Fixing missing customization options in cart

This article offers solutions for showcasing custom product options in your store shopping cart using older Nova 2023, Eva, Hero, and Boost theme versions. If your theme has custom modifications, upgrading to the latest version might not be possible. Implementing the following code snippets ensures a smooth and transparent shopping experience, allowing customers to effortlessly confirm their chosen options before checking out.

Some coding experience is recommended to ensure these code snippets are implemented correctly. If you're not comfortable making these changes yourself, we advise working with a developer who can help.

Troubleshooting steps differ based on your store's theme. Locate your theme below and follow the instructions:

Nova 2023 theme series (Nova 2023, Bamboo, Morning, Moon, Night, Sweet, BeautyNow, and ElecHub)

Insert a code snippet into your theme's code to display custom product options in your shopping cart for the Nova 2023 theme series.

1. Code insertion: Insert the following code snippet into your theme/snippets/cart_items.liquid file.

<% var properties = $imports.JSON.parse(item.properties || "{}") %>
{% assign locales = '{"ar-SA": "ﻉﺮﺿ ﺎﻠﺻﻭﺭﺓ","de-DE": "Bild ansehen","en-US": "View image","es-ES": "Ver imagen","fr-FR": "Voir l' | append: "'" | append: 'image","id-ID": "Lihat gambar","it-IT": "Guarda l' | append: "'" | append: 'immagine","ja-JP": "画像を表示しま","ko-KR": "이미지를 봅니다","nl-NL": "Bekijk afbeelding","pl-PL": "Zobacz obrazek","pt-PT": "Ver imagem","ru-RU": "Просмотреть изображение","th-TH": "ดูภาพ","zh-CN": "查看图片","zh-TW": "查看圖片"}' | parse_json %}//...
<% for(var prop in properties){ %>
<% if (prop!== '_') { %><p class="tw-m-0"<% if (/(\/\/.*\.(?:png|jpg|jpeg|gif|svg))/i.test(properties[prop])) { %><%=prop%/ <a class="tw-no-underline tw-text-black" href="<%=properties[prop]%>" target="_blank"{{ locales[shop.locale] | default: locales["en-US"] }}</a<% } else { %><p class="tw-m-0"<%=prop%/<%=properties[prop]%</p<% } %></p<% } %><% } %>

Eva theme series (Eva and Elegant)

To display custom product options in your shopping cart for the Eva theme series, replace a code snippet in your theme's code.

1. Code replacement: Replace the existing code snippet in your theme/snippets/cart_items.liquid file with the following:

<% var properties = $imports.JSON.parse(item.properties || "{}") %>
{% assign locales = '{"ar-SA": "ﻉﺮﺿ ﺎﻠﺻﻭﺭﺓ","de-DE": "Bild ansehen","en-US": "View image","es-ES": "Ver imagen","fr-FR": "Voir l' | append: "'" | append: 'image","id-ID": "Lihat gambar","it-IT": "Guarda l' | append: "'" | append: 'immagine","ja-JP": "画像を表示しま","ko-KR": "이미지를 봅니다","nl-NL": "Bekijk afbeelding","pl-PL": "Zobacz obrazek","pt-PT": "Ver imagem","ru-RU": "Просмотреть изображение","th-TH": "ดูภาพ","zh-CN": "查看图片","zh-TW": "查看圖片"}' | parse_json %}
<div class="tw-mb-5 empty:tw-hidden"<% for(var k = 0; k < item.options.length; k++){ %><div class="tw-mb-1.25 last:tw-mb-0 tw-pr-4 two_line_text_truncate "<span class="tw-font-bold"<%=item.options[k].name%:</span <%=item.options[k].value%</div<% } %><% for(var prop in properties){ %><% if (prop!== '_') { %><% if (/(\/\/.*\.(?:png|jpg|jpeg|gif|svg))/i.test(properties[prop])) { %><span class="tw-font-bold"<%=prop%:</span <a class="tw-no-underline tw-text-black" href="<%=properties[prop]%>" target="_blank"{{ locales[shop.locale] | default: locales["en-US"] }}</a<% } else { %><p class="tw-break-normal tw-m-0"<span class="tw-font-bold"<%=prop%:</span<%=properties[prop]%</p<% } %><% } %><% } %></div>

Hero theme series (Hero, Halloween, and Modern)

To display custom product options in your shopping cart for the Hero theme series, replace a code snippet in your theme's code.

1. Code replacement: In your theme/snippets/cart_items.liquid file, replace the current code snippet with the following:

<% var properties = $imports.JSON.parse(item.properties || "{}") %>
{% assign locales = '{"ar-SA": "ﻉﺮﺿ ﺎﻠﺻﻭﺭﺓ","de-DE": "Bild ansehen","en-US": "View image","es-ES": "Ver imagen","fr-FR": "Voir l' | append: "'" | append: 'image","id-ID": "Lihat gambar","it-IT": "Guarda l' | append: "'" | append: 'immagine","ja-JP": "画像を表示しま","ko-KR": "이미지를 봅니다","nl-NL": "Bekijk afbeelding","pl-PL": "Zobacz obrazek","pt-PT": "Ver imagem","ru-RU": "Просмотреть изображение","th-TH": "ดูภาพ","zh-CN": "查看图片","zh-TW": "查看圖片"}' | parse_json %}
<div class="tw-mb-3 empty:tw-hidden tw-text-body-alpha-70"<% for(var k = 0; k < item.options.length; k++){ %><div class="cart__item-variant-info tw-mb-1.25 last:tw-mb-0 tw-text-light-text-color tw-pr-4 two_line_text_truncate "<span class="tw-font-bold"<%=item.options[k].name%:</span <%=item.options[k].value%</div<% } %><% for(var prop in properties){ %><% if (prop!== '_') { %><% if (/(\/\/.*\.(?:png|jpg|jpeg|gif|svg))/i.test(properties[prop])) { %><span class="tw-font-bold"<%=prop%:</span <a class="tw-no-underline tw-text-black" href="<%=properties[prop]%>" target="_blank"{{ locales[shop.locale] | default: locales["en-US"] }}</a<% } else { %><p class="tw-break-normal tw-m-0"<span class="tw-font-bold"<%=prop%:</span<%=properties[prop]%</p<% } %><% } %><% } %></div>

Boost theme

To display custom product options in your shopping cart for the Boost theme, replace and insert code snippets in your theme's code.

1. Code replacement: Replace the code snippet in your theme/sections/cart.liquid file with the following:

<% var properties = $imports.JSON.parse(item.properties || "{}") %>
{% assign locales = '{"ar-SA": "ﻉﺮﺿ ﺎﻠﺻﻭﺭﺓ","de-DE": "Bild ansehen","en-US": "View image","es-ES": "Ver imagen","fr-FR": "Voir l' | append: "'" | append: 'image","id-ID": "Lihat gambar","it-IT": "Guarda l' | append: "'" | append: 'immagine","ja-JP": "画像を表示しま","ko-KR": "이미지를 봅니다","nl-NL": "Bekijk afbeelding","pl-PL": "Zobacz obrazek","pt-PT": "Ver imagem","ru-RU": "Просмотреть изображение","th-TH": "ดูภาพ","zh-CN": "查看图片","zh-TW": "查看圖片"}' | parse_json %}
<div class="tw-mb-[6px] lg:tw-mb-3 empty:tw-hidden tw-text-body-light-color tw-space-y-[2px]"<% for(var k = 0; k < item.options.length; k++){ %><div class="tw-mb-1.25 last:tw-mb-0 tw-text-light-text-color tw-text-base lg:tw-text-sm tw-tracking-normal tw-pr-4 two_line_text_truncate"<%=item.options[k].name%: <%=item.options[k].value%</div<% } %><% for(var prop in properties){ %><% if (prop!== '_') { %><p class="tw-m-0"<% if (/(\/\/.*\.(?:png|jpg|jpeg|gif|svg))/i.test(properties[prop])) { %><%=prop%: <a class="lg:tw-text-sm tw-text-body-light-color tw-text-base tw-no-underline" href="<%=properties[prop]%>" target="_blank"{{ locales[shop.locale] | default: locales["en-US"] }}</a<% } else { %><p class="lg:tw-text-sm tw-text-light-text-color tw-text-base"<%=prop%:<%=properties[prop]%</p<% } %></p<% } %><% } %></div>

2. Code insertion: Insert the following code snippet into your theme/snippets/cart_product_items.liquid file.

{% assign locales = '{"ar-SA": "ﻉﺮﺿ ﺎﻠﺻﻭﺭﺓ","de-DE": "Bild ansehen","en-US": "View image","es-ES": "Ver imagen","fr-FR": "Voir l' | append: "'" | append: 'image","id-ID": "Lihat gambar","it-IT": "Guarda l' | append: "'" | append: 'immagine","ja-JP": "画像を表示しま","ko-KR": "이미지를 봅니다","nl-NL": "Bekijk afbeelding","pl-PL": "Zobacz obrazek","pt-PT": "Ver imagem","ru-RU": "Просмотреть изображение","th-TH": "ดูภาพ","zh-CN": "查看图片","zh-TW": "查看圖片"}' | parse_json %}//...
<% for(var prop in properties){ %>
<% if (prop!== '_') { %><p class="tw-m-0 tw-text-body-light-color"<% if (/(\/\/.*\.(?:png|jpg|jpeg|gif|svg))/i.test(properties[prop])) { %><p class="tw-text-body-light-color tw-m-0"<%=prop%: <a class="tw-text-body-light-color tw-no-underline" href="<%=properties[prop]%>" target="_blank"{{ locales[shop.locale] | default: locales["en-US"] }}</a</p<% } else { %><p class="tw-text-body-light-color tw-m-0"<%=prop%:<%=properties[prop]%</p<% } %></p<% } %><% } %>

After implementing these changes, your custom product options will be visible in the shopping cart, enhancing the customer experience and reducing potential confusion during checkout.