Setting up the cart page
When a custom product is added to the cart, Kickflip redirects customers to the cart page. If your store uses a cart drawer or popup, make sure custom products display properly in that view as well.
Unless your theme has been intentionally modified, the following three elements should be displayed:
The customized product image.
A link back to the customized product (also applied to the image).
A summary of the customization properties.
Using 'Advanced mode' to setup your cart
For a custom configuration or if the integration is not working properly, follow these steps:
From the Kickflip admin, go to Settings > Online stores, and then click on your store.
In the App Embed section, click on Setup app embed.
Add a product to your cart from one of your customizers.
Wait for the cart page to load.
Scroll down to the Cart advanced settings section in the App Embed settings.
Toggle on the use advanced mode option (be sure to be inside your cart template).
If you are currently using the Shopify selector a message will appear at the bottom center of your screen indicating that you must turn off the Shopify selector.
The button to turn it off looks like this:
Now turn on the Kickflip helper by clicking on the blue button at the bottom of your screen. It should look like this:
Hover over the cart drawer or popup, and click when the blue overlay box appears in the correct spot.
You should see a notification telling you that the selector has been copied. If you don't see it you can highlight the selector in the helper and press ctrl + c (cmd + c on Mac).
Paste this selector in the Main cart container selector text field in the App Embed settings.
Your cart should now look like this:
Setup Additional cart with advanced mode
NOTE
Kickflip will always redirect to the cart page when adding a product to the cart from a customizer. However, you should make sure your cart drawer or popup renders correctly when there is a custom product in the cart.
If you have a popup cart or a drawer cart, you can use the following steps to have them render correctly.
Follow steps 1–9 from above.
Open the cart drawer or cart popup.
Hover over the cart drawer or popup, and click when the blue overlay box appears in the correct spot.
You should see a notification telling you that the selector has been copied. If you don't see it you can highlight the selector in the helper and press ctrl + c (cmd + c on Mac).
Paste this selector in the Other cart container selectors text field in the App Embed settings.
Setup a side cart with your theme in Shopify
You can find a step by step tutorial here on how to setup your side cart with the app embed.
Hiding private properties starting with an underscore (“_”) character
Find where the line item properties are displayed. It is usually by searching a line of code that loops through the cart’s items properties. Frequent examples are:
{%- for property in item.properties -%}or
{%- for property in line_item.properties -%}Replace
{%- if property.last != blank -%}with
{%- if property.last != blank and property_first_char != '_' -%}
For more information, see the official documentation on Hide properties in a theme.
Still seeing mczr_price_xxx?
If you are still seeing the mczr_price_xxx line item in you cart, you are probably transitioning from the deprecated integration to the new Shopify App Embed integration.
This variant is visible because it was created in your product by the deprecated integration. In the example below, mczr_price_89_99 is the default variant of the product, which is why it appears.
Deleting these variants from your product will remove them from the cart:
From your Shopify dashboard, open your product.
Under Variants, select all variants.
Click on the more button (...) > Delete variants.
Save your product.