Let’s check out how it looks after the changes.

Alright, let’s kick off the tutorial!

1. Log into your Shopify admin, then head to the Online Store > Themes page.

2. We’ll use Shopify’s default Dawn theme as an example to copy, tap the "More" button to jump into the code editing page.

3. Select the snippets folder and tap the "New File" button.

4. Create a file called customeow-data.liquid.

5. You can download the customeow-data.liquid file to swap it out.

Download liquid file

6. Save the file.

   Shortcut Key: Save file

   

6. Find the sections/main-cart-items.liquid file.

• This tutorial is based on the Shopify 2.1 theme version. If your theme version doesn't match, you can try searching for property in item.properties to locate the code file and its position.

  

8. Hit Command/Ctrl + F to pop open the file search window, then search for the property in item.properties code.

   Shortcut Key: Search

   

9. Select the code, then hit Command/Ctrl + / to comment it out.

   Shortcut Key: Search

   

10. Copy and paste the code below into the sections/main-cart-items.liquid file.

{% comment %} CustoMeow Custom Data  {% endcomment %}
{% render 'customeow-data',
  properties: item.properties, 
  title: 'Your personalization', 
  enable_dark: false,
  text_color: '#000000',
  preview_font_size: 12,
  preview_image_width: 60, 
  preview_image_radius: 6, 
  enable_modal: true,
  modal_background_color: '#000000',
  cart_item_id: '',
  cart_item_image_classname: ''
%}

11. Paste the copied code right below the commented-out code.

    

12. Save the file.

    Shortcut Key: Save file

    

Alright, let’s test it out now!

1. Exit the editor and head back to the theme, click the customize button to turn on the CustoMeow plugin.

   

2. After turning on the CustoMeow plugin, don’t forget to hit save!

   

3. Now preview this theme.

   

4. Find your customized product, tweak it, add it to the cart, and check out how it looks in the cart.

   

Cool! The cart’s now showing your customized data!

Advanced settings

We've got some settings you can tweak!

{% comment %} CustoMeow Custom Data  {% endcomment %}
{% render 'customeow-data',
  properties: item.properties, 
  title: 'Your personalization', 
  enable_dark: false,
  text_color: '#000000',
  preview_font_size: 12,
  preview_image_width: 60, 
  preview_image_radius: 6, 
  enable_modal: true,
  modal_background_color: '#000000',
  cart_item_id: '',
  cart_item_image_classname: ''
%}

Next up, let’s dive into what each setting does!

• properties (Required)

  Grab the customization parameters for products in the cart.

  properties: item.properties,

  
  

• title (Optional)

  Show the title for the customization section.

  title: 'Your personalization',

  Recommended to use localized text retrieval for titles.

  {%- assign properties_title = 'general.cart.properie.title' | t -%}
  {% render 'customeow-data',
    properties: item.properties, 
    title: properties_title,
    enable_modal: true
  %}

  
  

• enable_dark (Optional)

  If set to true, the text color will be forced to white, and the image style will be optimized for dark mode, default is false.

  enable_dark: false,

  
  

• text_color (Optional)

  Font text color, hex or rgba, default is 'oklch(37.3% .034 259.733)'.

  text_color: '#000000',

  
  

• preview_font_size (Optional)

  Font size for users to preview customized text, 12~16px, default is 12px.

  preview_font_size: 12,

  
  

• preview_image_width (Optional)

  Width of the preview image thumbnail, default is 60px.

  preview_image_width: 60,

  
  

• preview_image_radius (Optional)

  Rounded corners for the preview image thumbnail, default is 6px.

  preview_image_radius: 6,

  
  

• enable_modal (Required)

  Turn on or off the option to click the preview thumbnail to see the full-size image.

  enable_modal: true,

  
  

• modal_background_color (Optional)

  Set the background color for the image pop-up—when the image has transparent areas, you’ll see the background color shine through.

  modal_background_color: '#000000',

The preview image shows up on the product image.

The cart_item_id and cart_item_image_classname parameters must both be set to take effect.

• cart_item_id (Optional)

  The cart’s item id—usually, the item’s sort order is used as the id, you can find the cart item ID in the main-cart-items.liquid file.

  

  If there’s no ID, you can manually add one using item.index as the unique identifier.

  CartItem-{{ item.index | plus: 1 }}

  
  

• cart_item_image_classname (Optional)

  The parent layer classname for the product image, if there isn’t one, you can just add your own classname.

  

  Here's the final code, nice and ready.

  {% comment %} add item id {% endcomment %}
  {%- assign cart_item_index = item.index | plus: 1 -%}
  {%- assign cart_item_id = 'CartItem-' | append: cart_item_index -%}
  
  {% comment %} CustoMeow Custom Data  {% endcomment %}
  {% render 'customeow-data',
    properties: item.properties, 
    title: 'Your personalization', 
    enable_dark: false,
    text_color: '#000000',
    preview_font_size: 12,
    preview_image_width: 60, 
    preview_image_radius: 6, 
    enable_modal: true,
    modal_background_color: '#000000',
    cart_item_id: cart_item_id,
    cart_item_image_classname: 'cart-item-thumbnail'
  
  

  
  

• Save the code, head back to the cart, and let’s check out the results!

  

Alright, that’s it for now—see ya!