Product Options and Customizer

• created: 05/01/2016
• latest update: 05/20/2016
• by: SolverCircle Ltd
• email: shopify@solvercircle.com

Thank you for purchasing our “Product Options and Customizer” 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 !

“Product Options and Customizer” 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.

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

“Product Options and Customizer” app has excellent features and easy to install or setup. “Product Options and Customizer” 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.

• Add an unlimited number of extra fields.
• Faster and easier way to create extra fields.
• Enable extra fields and price for individual product.
• Create custom fields for any shopify products.
• Easily create or remove custom options.
• Add fields with Value and Price.
• 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.
• Responsive design.
• Create as many fields as you need.
• Clean code and design with browser compatibility.
• Much more features.

• Login your Shopify Store in Admin panel.
• Now hit our App URL and click to "Get App" button.
• After installation, go to 'Apps" menu of Admin Dashboard and click on the Product Options and Customizer Apps link.
• It will display "Template" and all "Products" list tab. From template section add a template then add some product options under this template and assign your desired products for these options.
• After adding the fields, please check at frontend.

Note: Some Themes may require to insert Selectors. These selectors are need to place to the theme’s code. So if you do not know how/where to insert the selectors or if you are not familiar with liquid code changes or need any sort of help then just add install@solvercircle.com as a staff member of your store (If you don't know how to add "staff member" then click here), email us to explain the problems and we will fix the issues for you.

//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: