How the pricing set on Zakeke is displayed in the checkout page

The pricing set in Zakeke can be Displayed in three ways:

1. Creating a new product
2. Draft Order
3. Additional Product that helps price increase

1) Creating a new product

Each time a customer hits to add to cart a new product with a new price will be created. This is the default in Zakeke.  This way customers will not see any additional items at the checkout. Thus reducing customer confusion of a large number of additional products.

2) Draft Order

There are multiple methods that Shopify allows to adjust the additional price of the customized product on the Cart and Checkout Page. The draft order is one of those methods. This method allows us to create a Draft Order in the Merchants store and show that order on the Checkout page. Usually, we create a second virtual product and show it on the checkout page to adjust the additional price. To activate this, you should first set Zakeke to don't create new products on the add to cart and then add the following code in your theme.liquid file:

<script>
  window.zakekeProductAdvancedProcessingDraftOrder = true;
  window.zakekeCustomizationPriceName = 'Customization';
</script>

You can also customize the title of the second product that will be added to the checkout page by chaning the string Customization to what you want. The screenshot below demonstrates how the checkout page is being shown when the Draft order is enabled in a store.

Unfortunately, at present, the Draft order is not compatible with the discount code box on the checkout page. The draft order is created by Shopify and there is no option to apply a discount. We can not make it compatible unless Shopify makes it so.

3) Additional Product that helps price increase

When set Zakeke to don't create new products on the add to cart, Zakeke will display options prices on the cart, and at checkout. On the cart pages, option prices will be listed as part of the product price and the total price for the line item is automatically changed to reflect the product price + personalization price.

The screenshot below demonstrates how the checkout page is being shown when the Additional Product that helps price increase is enabled in a store.

Behind the scenes, we have to take a few steps to do this:

1. We use a hidden “Customization” product to add fees to your cart. Shopify does not provide any way to add fees or additional costs to a cart, so we need a product with a price to do this, unfortunately.
2. This item is set at $0.01 (or whatever your currency is) so that you can add any price for an option, and we just adjust the quantity (ie $5 = 500 of the $0.01 item). Otherwise, we would need tons of these hidden products to add unique fees, which would clutter up your product management considerably.
3. Our app’s scripts hide this “fee” product throughout your product pages, collections, cart, etc to make it look like option costs are part of your regular product.

However, on checkout, our app’s scripts cannot run. Shopify doesn’t allow any third-party scripts or code to run on this page.

As a result, we cannot modify or “hide” the way your “Item personalization” product is displayed as we can on your cart page. The personalization will be listed as a separate “product” with the total cost of the personalization separated from the product’s base cost.