Customisation Guide
In this guide we will update our stores cart to hide system line item properties. If you are noticing your theme doesn't hide system line item properties by default we recommend you reach out to your themes developer and request it does.
ℹ️ What is a system line item property?
Line item properties that start with an underscore _ for example: "_bundleId" are called system line item properties and should be hidden from your customers on cart drawer, cart page and checkout.
Shopify manages the hiding on checkout automatically, but it is up to your theme developers as to whether these system properties have been hidden in your cart drawer and cart page.
In this guide:
We will duplicate and edit our stores theme code to skip the output of system line item properties in cart.
Before we begin
This guide involves editing theme code. If that is not your cup of tea feel free to reach out to the Biscuits Bundle team to help you out!
Your theme developer should also be able to help you make this change as it should be covered by 'general support' and 'bug fixes'.
1. Create a development theme
First we will create a development theme so any changes we make DON'T appear on your live store until we have tested and are happy with them.
Open Online Store > Themes in Shopify admin and click the three dot menu next to customise on your published theme, then choose "duplicate".
Click the three dot menu on this copied theme and rename it i.e "Dawn | Biscuits Customisation"
Then using the three dot menu again, click "edit code" on our new development theme.
2. Find the cart page file
Now we need to find the correct cart file to edit in your theme.
Because every theme can be different, the file you edit for this step may vary a lot.
We are using Dawn theme for the example today but we will provide example files for other common themes below.
Use the filter bar in the top left to search "cart" and look inside the templates folder. You should see a cart.json if you open this, we want to find the name of the section displayed on our cart page that outputs cart items. In Dawn theme is is main-cart-items.
Reset search and this time use the name of the section, i.e main-cart-items
The file you find should be in the sections folder.
3. Find the cart item line item properties
Now we have the correct file we need to update line items in cart.
Search for cart.items
Here we have found a for loop that uses cart.items.
Inside this loop we need to find where item.properties is being looped over. Search the file for item.properties
Your themes code will probably look more like this, where the property is being looped over but not checked to see if its first character starts with an underscore.
4. Update the cart line item properties loop to skip system properties
In between the line loop for property in item.properties we need to output a variable to calculate what the first character of the property is.
{%- assign property_first_char = property.first | slice: 0 -%}
Now we can add to the if statement already being used if property.last != blank.
{%- if property.last != blank -%}
into
{%- if property.last != blank and property_first_char != '_' -%}See here for the code changes we made.
Hit save on your cart file and we can check our storefront to see if our change worked.
Before:
and after:
Congrats if the system line item properties are no longer outputting in your cart. Don't worry if they are still showing, you may have tried the wrong file or wrong code to wrap. Undo your changes and try from step 2 again.
3. Publish development theme
Once you have tested your code changes on your development theme thoroughly, you can publish this theme to be live!
This will make your changes published and visible to your customers.
Conclusion
Thats it! If you made it to the end successfully well done! If not, don't be afraid to reach out to the Biscuits Bundle team for help.
Stuck or got questions?
Use the chat widget below, or reach out to us at [email protected]
Happy coding, and thanks for teaming up with Biscuits Bundles!