Cleaning Up the Cart

by Scott Austin

The ProductGraph Product Configurator adds values to personalized items in the cart via Shopify Line Item Properties.  This content gives the customer confidence that their personalizations was properly registered and it allows the Product Configurator app to know which line items get which personalizations.  

But the raw presentation of that information is messy and confusing to the customer.  Here's an example.  The highlighted text is the Product Configurator additions.

Before - Cluttered Line Item Properties

Now, the first line (that starts with _snapshotId) is of no value to the customer.  So it can be removed.  And the Artwork line has a long id in brackets that is also not useful to the customer, so that can also be removed.  Here's what the cleaned-up version looks like:

After: Cleaned Up

The cleaned-up version is easier to read and less likely to confuse the customer.

This is done in two steps of edits in the theme code.  In the first step, we use Liquid to not show the '_snapshotId' line.  And in the second step, we use JavaScript to find and replace unwanted text.  Here's the code changes in one store.  These edits may need to be modified for a particular theme.

Not Showing a Line Item Property

In this step, we just going to exclude the cart from showing any line item property that begins with '_snapshotId'.  The code looks like this:

In this theme, the edit was done to Sections/cart-template.liquid.  The change is the two lines of the unless statement that contains '_snapshot'.

Remove extra text

The second step is done with JavaScript and is a little more complex.  The first step is to give each line item property a div class so it's easy to find the desired content.  Here's the addition I made in cart-template.liquid.  In this case, the Art line item property will get a class of .property-Art.

Then you'll need JavaScript that looks for right line item properties, in this case 'property-Art', and cleans up the content.  Here's the JavaScript which I put in its own snippet:

Now this JavaScript needs to get loaded in the Cart. Here's how to add it with code in Theme.liquid.  This code should be added right before </body>.

I hope this helps.

Scott Austin
Scott Austin

ProductGraph makes some of the best software available to for product customization in your online store. If you are selling personalized products, we can help.