Credits usage has reached0%.
Expected to run out of credits in0 days. If credits usage limit is exceeded, SKUs will automatically remove the integrated custom features.
Make Shopify’s Cart Display Custom Content More Effectively.
Why is this happening?
These are the user's Custom Data. When you build a product with multiple components, the amount of data here will increase accordingly.
FAQ
Is this data useful?
Yes, this data includes all the information generated by the user's customization and can be used for production.
Can I hide this data?
Of course! If you're familiar with editing template code, it will be quite simple to do.
Can I display only the preview image?
Of course, this article will guide you on how to display the preview information.
How can I display only the preview information in the cart?
First, you need to make sure you've read the following article.
Go to the theme setting in your online store.
Make a copy as a backup to avoid any issues that might prevent users from placing orders if an error occurs during modification.
We’ll be editing the copy. First, click the "More" button.
Click the "Edit Code" button.
Enter the code editing page.
Locate the "sections/main-cart-items.liquid" file.
Find the following selected code, this section is responsible for displaying the customization data in the cart.
Hide all customization data.
Comment out the selected code, and your cart will no longer display any parameters.
Save the code, preview your store, and check the cart.
The customization parameters have disappeared from the cart, it’s only hidden here and won’t affect production.
Display the preview data.
We provide relevant parameters for previews, whether you're using 2D/3D previews or text.
We use conditional logic to retrieve only the preview parameters.
{%- if property.first == "preview.effects" or property.first == "preview.images" or property.first == "preview.texts" -%}
<div class="product-option">
<dt>{{ property.first }}</dt>
<dd>{{ property.last }}</dd>
</div>
{%- endif -%}Convert the preview image URL into a link.
Add the corresponding titles to the rendered image, the uploaded image, and the user-entered text.
{%- if property.first == "preview.effects" -%}
<div class="product-option">
<dt>Preview: </dt>
{%- assign preview_items = property.last | split: ',' -%}
{%- for preview_item in preview_items -%}
<dd>
<a href="{{ preview_item }}" class="link" target="_blank">
{{ 'general.share.share_url' | t }}
</a>
</dd>
{%- endfor -%}
</div>
{%- elsif property.first == "preview.images" -%}
<div class="product-option">
<dt>Photo: </dt>
{%- assign image_items = property.last | split: ',' -%}
{%- for image_item in image_items -%}
<dd>
<a href="{{ image_item }}" class="link" target="_blank">
{{ 'general.share.share_url' | t }}
</a>
</dd>
{%- endfor -%}
</div>
{%- elsif property.first == "preview.texts" -%}
<div class="product-option">
<dt>Text: </dt>
{%- assign text_items = property.last | split: ',' -%}
{%- for text_item in text_items -%}
<dd>{{ text_item }}</dd>
{%- endfor -%}
</div>
{%- endif -%}If your store serves multiple countries, you’ll need to add the parameter titles to the internationalization (i18n) file.
First, locate the locales/en.default.json file, and add the following code just before the last bracket(“}”).
"custom": {
"preview": "Preview",
"photo": "Photo",
"text": "Text"
}Go back to the sections/main-cart-items.liquid file and replace the label.
The complete code is as follows:
{%- if property.first == "preview.effects" -%}
<div class="product-option">
<dt>{{ 'custom.preview' | t }}: </dt>
{%- assign preview_items = property.last | split: ',' -%}
{%- for preview_item in preview_items -%}
<dd>
<a href="{{ preview_item }}" class="link" target="_blank">
{{ 'general.share.share_url' | t }}
</a>
</dd>
{%- endfor -%}
</div>
{%- elsif property.first == "preview.images" -%}
<div class="product-option">
<dt>{{ 'custom.photo' | t }}: </dt>
{%- assign image_items = property.last | split: ',' -%}
{%- for image_item in image_items -%}
<dd>
<a href="{{ image_item }}" class="link" target="_blank">
{{ 'general.share.share_url' | t }}
</a>
</dd>
{%- endfor -%}
</div>
{%- elsif property.first == "preview.texts" -%}
<div class="product-option">
<dt>{{ 'custom.text' | t }}: </dt>
{%- assign text_items = property.last | split: ',' -%}
{%- for text_item in text_items -%}
<dd>{{ text_item }}</dd>
{%- endfor -%}
</div>
{%- endif -%}Display the preview image.
Added the styling. Here’s the code:
<style>
.customeow-preview-option {
margin-bottom: 4px;
}
.customeow-preview-data,
.customeow-preview-text{
display: flex;
}
.customeow-preview-data a {
width: 48px;
height: 48px;
display: block;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
border: 1px solid rgba(0,0,0,0.2);
margin-right: 4px;
margin-bottom: 4px;
}
.customeow-preview-text span {
border: 1px solid rgba(0,0,0,0.2);
margin-right: 4px;
margin-bottom: 4px;
padding: 0 4px;
}
</style>
{%- if property.first == "preview.effects" -%}
<div class="product-option customeow-preview-option">
<dt>{{ 'custom.preview' | t }}: </dt>
<dd class="customeow-preview-data">
{%- assign preview_items = property.last | split: ',' -%}
{%- for preview_item in preview_items -%}
<a href="{{ preview_item }}" class="link" target="_blank" style="background-image:url({{ preview_item }})"></a>
{%- endfor -%}
</dd>
</div>
{%- elsif property.first == "preview.images" -%}
<div class="product-option customeow-preview-option">
<dt>{{ 'custom.photo' | t }}: </dt>
<dd class="customeow-preview-data">
{%- assign image_items = property.last | split: ',' -%}
{%- for image_item in image_items -%}
<a href="{{ image_item }}" class="link" target="_blank" style="background-image:url({{ image_item }})"></a>
{%- endfor -%}
</dd>
</div>
{%- elsif property.first == "preview.texts" -%}
<div class="product-option customeow-preview-option">
<dt>{{ 'custom.text' | t }}: </dt>
{%- assign text_items = property.last | split: ',' -%}
<dd class="customeow-preview-text">
{%- for text_item in text_items -%}
<span>{{ text_item }}</span>
{%- endfor -%}
</dd>
</div>
{%- endif -%}