Shopify Extra Product Options


Thank you for purchasing our “Shopify Extra Product Options” Plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form. Thank you so much !

Shopify Extra Product Options” is a most effective, fast and flexible extra product options app for shopify. This app lets you create custom fields for any shopify products.

If you sell a product that has lots of options or variants and need extra fields to show in frontend then this apps will be your best choice.

You can easily create or remove custom options. Shop owner can add field name and field level. He can add unlimited number of custom fields with values and prices.

There are seven types of field types are available such as Checkbox, Dropdown list, Radio Button, Single Line Text, Multiple Line Text, Image Upload option and Date picker. So you can add any of the field types according to you need.

Shopify Extra Product Options” app is fully customizable and well implemented with all the necessary features that will make your products more importance to your customers.

Shopify Extra Product Options” app has excellent features and easy to install or setup. “Shopify Extra Product Options” app is more flexible and compatible with many existing apps in the Shopify repository. Users can easily configure the app into the new or existing Shopify store.

This app requires few theme liquid file changes. The changes depend on theme liquid codes. If you understand liquid logic / codes then follow the steps given below and let us know if you face any problems. Otherwise add install@solvercircle.com as a staff member of your store (If you don't know how to add "staff member" then click here) and email us at install@solvercircle.com, then we will install the codes for you.

1. Login your Shopify Store in Admin panel.

2. Hit our Apps URL and click to "Get App" button.

For show this application in your theme, you should add some code in your template. So total process are given below…

3. Go to “Themes” menu of Admin Dashboard and Edit your published themes to install the application.

4. Click on “Template Editor” and put the “Shopify Extra Fields” Apps “Code” on the following files. (Update this template files: product.liquid, cart.liquid, collection.liquid, search.liquid and theme.liquid)

 

Step 1 (a): product.liquid changes

Add the following code at the beginning of the product.liquid file

<!-- start : sc extra product options -->
{% include 'extra-product-options' with 'hide-epo-product' %}
<!-- end : sc extra product options -->

Screenshots of theme file for the Step 1 (a) code is given below:

 

Step 1 (b): product.liquid changes

Add the following code before “Add to Cart” button code and after 'varint list' code of product.liquid file

<!--  Start: SC Extra product options -->
{% include "extra-product-options" %}
<!--  end: SC Extra product options -->  

Screenshots of theme file for the Step 1 (b) code is given below:

 

Step 1 (c): product.liquid changes

Add to cart button of product page needs to be removed / hidden. Following button element will be added here. AND then you may need to add css classes from Add to cart button to make the button look like same as existing add to cart button. example -
<input type="button" class="sc-epo-add-to-cart some-classes" value="Add to cart">

Screenshots of theme file for the Step 1 (c) code is given below:

 

Step 1 (d): product-template.liquid changes

Add the following code instead of button code (Remove Red Cros code and add Green Tick code, which has shown in below screenshot).
<!--  Start: SC Extra product options -->
 {% include "extra-product-options" with 'epo-add-to-cart-btn' %}
<!--  end: SC Extra product options -->

Screenshots of theme file for the Step 1 (d) code is given below:

 

Step 1 (e): product.liquid changes

Add the following code just before end of the "function (variant, selector)" function of product.liquid file (If the function does not exist in product.liquid file then find it in the theme.liquid file and put the code in same position as mentioned above). If you can't find it in either of those 2 files, then check in Snippets folder, because some theme placed this function in liquid file (like Apps.js.liquid, App.liquid etc) under snippets folder.
// Start: SC Extra product options
if (typeof EPO_Update_Data_URL == 'function')
  EPO_Update_Data_URL(variant);
// end: SC Extra product options

Screenshots of theme file for the Step 1 (e) code is given below:

 

Step 1 (f): product.liquid changes

Add the "epo-total-price" class where the price money will be shown.

Screenshots of theme file for the Step 1 (f) code is given below:

 

Step 2 (a): cart.liquid changes

Add the following code after '{% for item in cart.tem %}' of the cart.liquid file.

<!-- start: SC extra product options -->
{% include 'extra-product-options' with 'is-extra-product-item' %}
<!-- end: SC extra product options -->

Screenshots of theme file for the Step 2 (a) code is given below:

 

Step 2 (b): cart.liquid changes

Add " {% include "extra-product-options" with 'line-item-row-class' %} " in the class of first div(<div>) or table row(<tr>).
If there is no class attribute, then add as like " class="{% include "extra-product-options" with 'line-item-row-class' %}" " .

 

Step 2 (c): cart.liquid changes

Add " {% include "extra-product-options" with 'line-item-row-data' %} " in the tag of first div(<div>) or table row(<tr>).

 

Step 2 (d): cart.liquid changes

In the form of cart, find '{{ item.price | money }}' then replace this with '{{ item_price | money }}' and add the following code
<!-- start: SC extra product options -->
{% include 'extra-product-options'  with 'item-price-no-money' %}
<!-- end: SC extra product options -->
before the line of '{{ item.price | money }}'.

Screenshots of theme file for the Step 2 (d) code is given below:

 

Step 2 (e): cart.liquid changes

In the form of cart, find '{{ item.line_price | money }}' then replace this with '{{ line_price | money }}' and add the following code
<!-- start: SC extra product options -->
{% include 'extra-product-options'  with 'item-line-price' %}
<!-- end: SC extra product options -->
before the line of '{{ item.line_price | money }}'.

Screenshots of theme file for the Step 2 (e) code is given below:

 

Step 2 (f): cart.liquid changes

Add the following code before where “form” end in the cart.liquid file

<!-- start: sc extra product options -->
{% include 'extra-product-options' with 'epo-cart-script' %}
<!-- end: sc extra product options -->

Screenshots of theme file for the Step 2 (f) code is given below:

 

Step 2 (g): cart.liquid changes

Add the following code in the for loop condition of cart item properties. Condition must be for p.last == blank or first_character_in_key == '_'. So include all the conditions.

{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}

If cart item properties shown codes are in this liquid then add " {% include 'extra-product-options' with 'item-properties-price' %} " in the position shown in below screenshot.

Step 2 (h): cart.liquid changes

if cart item properties shown code are in this liquid then replace " <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a> " with " {% include 'extra-product-options' with 'item-properties-file-tag' %} "

 

Step 2 (i): cart.liquid changes

If there is no code for showing item properties then add " {% include 'extra-product-options' with 'item-properties' %} " after the cart item product title.

 

Step 2 (j): cart.liquid changes

If cart item quantity has plus(+), minus(-) to increse or decrese quantity of cart item, then follow the below steps:
  1. Open the file "extra-product-options.liquid" from Snippets folder.
  2. Find the function "init_epo_cart" and add below function in the callback function: sc_epo_bind_cart_item_spinner(parent_selector, spinner_plus_selector,spinner_minus_selector, quantity_selector, events);
  3. Now, get the jquery selector for the plus, minus icon along with their parent container and quantity input field, then add them in the function parameter. Event parameter generally should be "click". Event parameter can take more events with space separate string like "click mousedown".

 

Step 3: collection.liquid changes

Add the following code after the for loop condition of collection.product of the collection.liquid file

<!-- start : sc extra product options -->
{% include 'extra-product-options' with 'hide-epo-product' %}
<!-- end : sc extra product options -->

Screenshots of theme file for the Step 3 code is given below:

 

Step 4 (a): search.liquid changes

Add the following code after if condition specifically after for loop of search.results of the search.liquid file

<!-- start : sc extra product options -->
{% include 'extra-product-options' with 'hide-epo-product' %}
<!-- end : sc extra product options -->

 

Step 4 (b): search.liquid changes

Add the following code after else condition specifically after for loop of search.results of the search.liquid file

<!-- start : sc extra product options -->
{% include 'extra-product-options' with 'hide-epo-product' %}
<!-- end : sc extra product options -->

Screenshots of theme file for the Step 4 code is given below:

 

Step 5: theme.liquid changes

Usually the following code of theme.liquid file will be automatically created after our apps install, however if it is not created then add the following code before where the body tag ends in theme.liquid file.

<!-- start : sc extra product options -->
{% include 'extra-product-options' with 'epo-product-script'%}
<!-- end : sc extra product options -->

Screenshots of theme file for the Step 5 code is given below:

Step 6: theme.liquid changes (if needed)

Most of the theme, the counter of cart is shown in the header of theme. Find " {{cart.item_count}} " in theme.liquid. Replace all " {{cart.item_count}} " in the theme with " {%include 'extra-product-options' with 'cart-count' %} ".

Step 7: Price of Customization Cost

Check the price of product "Customization cost" and add the price in sc_epo_cost as below:

Screenshot for Step 7 code is given below:

5. So your App has installed. Now go to “Apps” menu of Admin Dashboard and click on the “Extra Product Options” Apps link.

6. It will display all products list. Now select a product where you want to add some extra field.

7. Here you will find “Enable Custom Field” option. Just check it and click on “Add New Fields” button. Put your field Name, Field Label and choose field type. Here you can choose field types like Checkbox, Dropdown list, Radio Button, Single Line Text, Multiple Line Text, Image Upload option and Date picker. Just add your desirable fields. You can also add from existing field.

8. After adding the fields, please check at frontend.

How to Install the App for Brooklyn Theme?

In theme.liquid look for:

	{% if settings.cart_type == 'drawer' %}
		{% include 'ajax-cart-template' %}
	{% endif %}

Screenshots of theme file is given below:

Changes will be in the file mentioned in include statement above, and in the related js file (like ajax-cart.js ), if no js file name is mentioned, then changes will be applied in theme.js.



Step-1: theme.js / ajax-cart.js:

Add the following script at the bottom of the file:

	//start : sc extra product options
	function epo_cart_item_show(epo_c_item)
	{
	  if(epo_c_item.properties==null || !epo_c_item.properties.hasOwnProperty("Product")) 
		return true;
	  else
		return false;    
	}
	//end : sc extra product options

Search "variation" or any of the keyword from the following screenshot, and add following code at the bottom of the code block following the image below:

	epo_show: epo_cart_item_show(cartItem) //sc extra product options

Screenshots of theme file is given below:



Step-2: ajax-cart-template.liquid

Screenshots of theme files are given below:



Step 3:

Add this class sc_epo_line_item_row in the file and after that add the following code like as below screenshot.

	data-epo-remove="{{{data_epo_remove}}}"
	data-epo-qty="{{{data_epo_qty}}}"
	data-epo-index="{{{data_epo_index}}}"
	data-epo-main-index="{{{data_epo_main_index}}}"

Screenshots of theme files are given below:



For Ajax theme cart item counter :

1. Add following function at the end of theme.js

	//start : sc extra product options
	function epo_cart_get_counter(epo_cart)
	  {
		var epo_total_items=epo_cart.item_count;
		for(epo_index =0;epo_index<cart.items.count;epo_index++)
		{
		  var epo_c_item=cart.items[epo_index];
		  if(epo_c_item.properties!=null &&
	
	epo_c_item.properties.hasOwnProperty("_ScEpoID") && !
	
	epo_c_item.properties.hasOwnProperty("Product"))
				epo_total_items = epo_total_items - epo_c_item.quantity;
		}    
		   return epo_total_items;
	  }
	//end : sc extra product options

2. Call this function to reset ajax counter



Step 3: Add below code snippet at the end of theme.js.liquid

	//start : sc extra product options
	function epo_cart_item_show(epo_c_item)
	{
	  if(epo_c_item.properties==null || !epo_c_item.properties.hasOwnProperty("Product"))
		return true;
	  else
		return false;    
	}
	function epo_cart_item_price(cartItem){
	  if(cartItem.properties!=null && cartItem.properties.hasOwnProperty("_ScEpoQty")){
		return cartItem.price+parseInt(cartItem.properties._ScEpoQty);
	  }else{
			return cartItem.price;
	  }
	}
	function epo_cart_item_line_price(cartItem){
	  if(cartItem.properties!=null && cartItem.properties.hasOwnProperty("_ScEpoQty")){
		return cartItem.line_price+(parseInt(cartItem.properties._ScEpoQty)*cartItem.quantity);
	  }else{
		return cartItem.line_price;
	  }
	}
	function epo_item_qty(cartItem){
	  if(cartItem.properties!=null && cartItem.properties.hasOwnProperty("_ScEpoQty")){
		return parseInt(cartItem.properties._ScEpoQty);
	  }else{
		return -1;
	  }
	}
	//end : sc extra product options


Step 4: Add the following code like as below screenshot

	//start : sc extra product options
		var cartItem_price = epo_cart_item_price(cartItem);
		  
		  var data_epo_remove = cartItem.properties != null
								  && cartItem.properties.hasOwnProperty('_ScEpoID')
								  && cartItem.properties.hasOwnProperty('_ScEpoQty')
								  ? index+2 : -1;
		  var data_epo_qty = cartItem.properties != null
							  && cartItem.properties.hasOwnProperty('_ScEpoID')
							  && cartItem.properties.hasOwnProperty('_ScEpoQty')
							  ? cartItem.properties._ScEpoQty : -1;
		  
		var    data_epo_index = cartItem.properties != null
							  && cartItem.properties.hasOwnProperty('_ScEpoID')
							  && cartItem.properties.hasOwnProperty('_ScEpoQty')
							  ? index+2 : -1;
		  
		var data_epo_main_index = cartItem.properties != null
							  && cartItem.properties.hasOwnProperty('_ScEpoID')
							  && cartItem.properties.hasOwnProperty('_ScEpoQty')
							  ? index+1 : -1;
	//end : sc extra product options

Screenshots of theme files are given below:



Step 5: Add the following code like as below screenshot

	,epo_show: epo_cart_item_show(cartItem) //sc extra product options
	,data_epo_remove : data_epo_remove //sc extra product options
	,data_epo_qty : data_epo_qty //sc extra product options
	,data_epo_index : data_epo_index //sc extra product options
	,data_epo_main_index : data_epo_main_index //sc extra product options

Screenshots of theme files are given below:



Step 6: Add the following code like as below screenshot

	if(typeof sc_epo_bind_cart_item_spinner != 'undefined'){
		  sc_epo_bind_cart_item_spinner(".ajaxcart__qty", ".ajaxcart__qty--plus",".ajaxcart__qty--minus", ".ajaxcart__qty-num", "click mousedown mouseup");
		}  

Screenshots of theme files are given below:



Step 7: Add the following code like as below screenshot

	if(value.match(/\/uploads\//g)){
			cartItem.properties[key] = "<a href='"+value+"'>Click to see</a>";
		  }

Screenshots of theme files are given below:



Step 8: Add "{{{this}}}" instead of "{{this}}" like as below screenshot

Screenshots of theme files are given below:



 

  1. Insert the code in the position shown in the screenshot.
sc_epo_jquery(".sc-epo-add-to-cart").unbind("click");
sc_epo_jquery(".sc-epo-add-to-cart").on("click", function(){
    sc_epo_add_to_cart(sc_epo_jquery(this).parents('form')[0], -1);
});

 

  1. Insert the code in the position shown in the screenshot.
 var form_data = new FormData(productForm);
            sc_epo_jquery.ajax({
              type : 'POST',
              url : "/cart/add.js",
              data : form_data,
              processData : false,
              contentType : false,
              dataType : "json",
              success : function(data, textStatus, jqXHR){
                sc_epo_add_properties_to_options();
                sc_epo_cart_loader(productForm);
                console.log('ScEpo: Main product request success11');
                animate(productForm);
              },
              error : function(jqXHR, textStatus, errorThrown){
                sc_epo_cart_loader(productForm);
                console.log('ScEpo: Main product request error');

              }
            });

 

  1. Add the code after  “sc_epo_add_properties_to_options” function in extra-product-options.liquid file.
function sc_epo_add_properties_to_options(){
          sc_epo_jquery('#epo-options *[id^="epo-option-"]').each(function(index,element){
              var index_with_prop = "properties[epo-option-"+sc_epo_jquery(element).attr("data-epo-index")+"]";
              sc_epo_jquery(element).attr('name',index_with_prop);
            });
          }
          // function form jquery.theme.js
          function animate(productForm) {
            var elem = $(productForm).find('.sc-epo-add-to-cart');
            $("#cart-animation").show();
            var addtocartWidth = elem.outerWidth() / 2;
            var addtocartHeight = elem.outerHeight() / 2;
            var addtocartLeft = elem.offset().left + addtocartWidth;
            var addtocartTop = elem.offset().top + addtocartHeight ;
            var buttonAreaWidth = $(".cart-target").outerWidth();
            var buttonAreaHeight = $(".cart-target").outerHeight();
            var buttonAreaLeft = $(".cart-target").offset().left + buttonAreaWidth / 2  - $("#cart-animation").outerWidth() / 2;
            var htmlMargin = $('html').css('margin-top')
            var htmlMarginTrim = parseInt(htmlMargin);
            if (htmlMargin !== 0 ) {
              var buttonAreaTop = $(".cart-target").offset().top + buttonAreaWidth / 2  - htmlMarginTrim - $("#cart-animation").outerHeight() / 2 ;
            } else {
              var buttonAreaTop = $(".cart-target").offset().top + buttonAreaWidth / 2  - $("#cart-animation").outerHeight() / 2 ;
            }
            var path = {
              start: {
                x: addtocartLeft,
                y: addtocartTop,
                angle: 190.012,
                length: 0.2
              },
              end: {
                x: buttonAreaLeft,
                y: buttonAreaTop,
                angle: 90.012,
                length: 0.50
              }
            };
            $('#cart-animation').animate(
              {
                path : new $.path.bezier(path)
              },
              1200,
              function() {
                $(elem).prop("disabled", false)
                $("#cart-animation").fadeOut(500);
                //             elem.closest('form').submit();
                //             $("body").off("click", ".checkout", disable);
                Shopify.getCart();
                $("#drawer .spinner").remove();
              }
            );
          }

 

  1. Insert code at the end of file “jquery.theme.js.liquid”.
        //start : sc extra product options
function epo_cart_get_counter(epo_cart)
      {
        var epo_total_items=epo_cart.item_count;
        for(epo_index =0;epo_index<epo_cart.items.length;epo_index++)
        {
          var epo_c_item=epo_cart.items[epo_index];
          if(epo_c_item.properties!=null && epo_c_item.properties.hasOwnProperty
             ("_ScEpoID") && epo_c_item.properties.hasOwnProperty("Product"))
            epo_total_items = epo_total_items - epo_c_item.quantity;
        }   
        return epo_total_items;
      }
function epo_cart_item_price(cartItem){
  if(cartItem.properties!=null && cartItem.properties.hasOwnProperty("_ScEpoQty")){
    return cartItem.price+parseInt(cartItem.properties._ScEpoQty);
  }else{
        return cartItem.price;
  }
}
function epo_cart_item_line_price(cartItem){
  if(cartItem.properties!=null && cartItem.properties.hasOwnProperty("_ScEpoQty")){
    return cartItem.line_price+(parseInt(cartItem.properties._ScEpoQty)*cartItem.quantity);
  }else{
    return cartItem.line_price;
  }
}
function epo_item_qty(cartItem){
  if(cartItem.properties!=null && cartItem.properties.hasOwnProperty("_ScEpoQty")){
    return parseInt(cartItem.properties._ScEpoQty);
  }else{
    return -1;
  }
}
function epo_update_cart(form){
  var update_arr =  [];
  var form_array = $(form).serializeArray();
  $(form_array).each(function(index,data){
    if(data.name == "updates[]"){
      update_arr.push(data.value);
      var update_elem = $(form).find('[name="updates[]"]').eq(index);
      if(parseInt($(update_elem).data('epo-qty')) != -1 ){
        update_arr.push(data.value*parseInt($(update_elem).data('epo-qty')));
      }
    }
  });
  return update_arr;
}
function epo_custom_removeItem(remove_elem,callback){
  console.log('epo d');
  var line = parseInt($(remove_elem).data("index"));
  var params = {
    type: 'POST',
    url: '/cart/change.js',
    data: {quantity:0,line:line},
    dataType: 'json',
    success: function(cart) {
      console.log('eed');
      if(parseInt($(remove_elem).data('epo-qty')) != -1 ){
        console.log('eed dd');
        $.ajax({
          type: 'POST',
          url: '/cart/change.js',
          data: {quantity:0,line:line},
          dataType:'json',
          success: function(cart){
                        if ((typeof callback) === 'function') {
                                        callback(cart);
                        }else {
               Shopify.onCartUpdate(cart);
                        }
         }
                        });     
          }else{
                        if ((typeof callback) === 'function') {
                        callback(cart);
                        }
                        else {
                        Shopify.onCartUpdate(cart);
                        }
      }
    },
      error: function(XMLHttpRequest, textStatus) {
Shopify.onError(XMLHttpRequest, textStatus);
}
  };
  $.ajax(params);
}
//end : sc extra product options

 

  1. Add “ epo_update_cart(form) ”code like the following screenshot.

 

  1. Add the below code, like following screenshot.
    epo_custom_removeItem(this, function(){
        location.reload();
      });

 

  1. Add marked code like the following screenshot.

 

  1. Add the below code following the screenshot.
//start : sc extra product options
if(cartItem.properties!=null && cartItem.properties.hasOwnProperty("Product"))
return;
//end : sc extra product options

 

  1. The arrow line in screenshot, change the code as below.

 

  1. Add “epo_custom_removeItem(this,removeLine);” following the screenshot.

 

  1. Add  “epo_cart_get_counter(cart)” following screenshot.
     

//start : sc extra product options
function epo_cart_get_counter(epo_cart)
  {
    var epo_total_items=epo_cart.item_count;
    for(epo_index =0;epo_index<epo_cart.items.length;epo_index++)
    {
      var epo_c_item=epo_cart.items[epo_index];
      if(epo_c_item.properties!=null && epo_c_item.properties.hasOwnProperty

("_ScEpoID") && epo_c_item.properties.hasOwnProperty("Product"))
            epo_total_items = epo_total_items - epo_c_item.quantity;
    }    
       return epo_total_items;
  }
//end : sc extra product options

Follow the below steps to Property Show on Email.

1. Go to shopify admin dashboard’s Settings > Notifications > Order confirmation section and insert the following code shown in the screenshot.

{% assign property_size = line.properties | size %}
    {% if property_size > 0 %}
        <br>
        {% for p in line.properties %}
        {% assign underscore = p.first | first %}
            {% if underscore != '_' %}
            {% unless p.last == blank %}
            {{ p.first }}:
    
            {% comment %}
            Check if there was an uploaded file associated
            {% endcomment %}
            {% if p.last contains '/uploads/' %}
                <a href="{{ p.last }}">{{ p.last | split:

'/' | last }}</a>
            {% else %}
                <span class="property-value">{{ p.last }}

</span>
{% endif %}
            <br>            
            {% endunless %}
            {%else%}
            {% endif %}
        {% endfor %}
    {% endif %}
		

2. Now go to Settings > Notifications > New order and insert the following code shown in the screenshot.

<ul>
{% assign property_size = line.properties | size %}
    {% if property_size > 0 %}
        
        {% for p in line.properties %}
        {% assign underscore = p.first | first %}
            {% if underscore != '_' %}
            {% unless p.last == blank %}
            <li>{{ p.first }}:
    
            {% comment %}
            Check if there was an uploaded file associated
            {% endcomment %}
            {% if p.last contains '/uploads/' %}
                <a href="{{ p.last }}">{{ p.last | split:

'/' | last }}</a>
            {% else %}
                <span class="property-value">{{ p.last }}

</span>
                       {% endif %}
            </li>            
            {% endunless %}
            {%else%}
            {% endif %}
        {% endfor %}
    {% endif %}
</ul>
		

Follow the below steps to Hide Customization Cost on Email.

1. Go to shopify admin dashboard’s Settings > Notifications > Order confirmation section and insert the following code shown in the screenshot.

{% if line.variant_id == shop.metafields.ExtraProductOptions.EPOHiddenVariant %}
{% continue %}
{% endif %}

2. Now insert the following code in the same file location shown in screenshot.

{% if line.properties._ScEpoID and line.properties._ScEpoQty %}
  {% assign qty = line.properties._ScEpoQty %}
  {% assign epo_index = forloop.index0|plus:1 %}
  {% assign line_price = qty | times:line_items[epo_index].price | times: line.quantity | plus: line.line_price %}
            <p class="order-list__item-price">{{ line_price | money }}</p>
 {%else%}
            <p class="order-list__item-price">{{ line.line_price | money }}</p>
{% endif %}

After add to cart with Extra product options it will appear the total price (products default price + extra options price).

For security reason, shopify do not allow any third party apps JS (JavaScript) on their cart or checkout page. So that we display the price options in this way.

Shopify does not allow to add any additional cost in cart page. So that to show the extra options price, we use a hidden product to add cost in your cart page.

But if you are a Shopify Plus enterprise merchant then it will be quite easier to show the entire price in your cart page.

So if you are a Shopify Plus enterprise merchant, then please email us to install@solvercircle.com and we will fix the issues (modify checkout.liquid template) for you.

REMEMBER: Please don't delete or hide the product "Customization Cost". This product has been added by the app and is used to add additional costs (using price per option feature for any product) in cart, we make some liquid changes (upon receiving the staff invitatation from your store) to hide this product from all pages of your store (except checkout page), so visitors won't see this product any where on your store.

You can't delete this product. But you can change the product title from "Customization Cost" to anything you want, you can also use a different image for this product. If you want to charge tax for this product to the customer then please tick "Charge taxes on this product" and save by going to that product page in your store admin.

"Customization Cost" product will show on Checkout page ONLY if customers select a option for a product which has a price associated with it. We can't hide this from checkout page beacuse shopify does not allow to modify checkout step codes. If a customer selects a option from a product which has a price then your checkout page will look like: