Installation

This app comes with automatic installation. The automatic installation adds the code snippets to your current published theme. If you use a custom theme and you do not see the "No-contact" delivery on the front-end, you can install the app on your own, following the instructions in this user guide.

Feel free to drop us a line if you have any questions. Our team will be happy to assist you.

If the automatic installation failed due to a custom theme you are using OR if you need to install the app to a different theme, you can install the app manually, following these two easy steps:

  1. Open the Snippets folder, and click the Add a new snippet option. The snippet name should be mw_NCP_init.liquid.

{% comment %}AUTO-GENERATED FILE. DO NOT MODIFY.{% endcomment %} {% if content_for_header contains ".mageworx.com\/nocontactdelivery\/source.js?mw_nocontactdelivery_t=" %} <style>.mw-ncd-label{display:flex;align-items:flex-start;margin:15px 0 20px}.mw-ncd-label__content{margin:0;padding:0}.mw-ncd-tooltip{display:inline-block;margin-left:10px;cursor:pointer}.mw-ncd-tooltip__icon{width:15px;display:block;height:15px}.mw-ncd-tooltip__content{max-width:200px;background:#fff;padding:5px 10px;border-radius:3px;font-size:12px;text-align:left;box-shadow:0 0 0 1px rgba(6,44,82,.1),0 2px 16px rgba(33,43,54,.08);pointer-events:none;visibility:hidden;z-index:1}.mw-ncd-tooltip__content:after{content:"";width:10px;height:10px;transform:rotate(45deg);background:#fff;position:absolute}.mw-ncd-tooltip__content[data-popper-placement=top]:after{bottom:-5px;left:calc(50% - 5px)}.mw-ncd-tooltip__content[data-popper-placement=bottom]:after{top:-5px;left:calc(50% - 5px)}.mw-ncd-tooltip__content[data-popper-placement=left]:after{bottom:calc(50% - 5px);right:-5px}.mw-ncd-tooltip__content[data-popper-placement=right]:after{bottom:calc(50% - 5px);left:-5px}.mw-ncd-tooltip:active .mw-ncd-tooltip__content,.mw-ncd-tooltip:focus .mw-ncd-tooltip__content,.mw-ncd-tooltip:hover .mw-ncd-tooltip__content{visibility:visible}.mw-ncd-toggle{display:inline-block;box-sizing:border-box;font-size:7px;margin-right:10px}.mw-ncd-toggle__label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:5em;background:#f8f8f8;box-shadow:inset 0 0 0 0 #13bf11,0 0 0 .1875em #ddd}.mw-ncd-toggle__label,.mw-ncd-toggle__label:before{height:3em;border-radius:1.5em;transition:.25s ease-in-out}.mw-ncd-toggle__label:before{content:"";display:block;position:absolute;width:3em;background:#fff;box-shadow:0 .375em .375em rgba(0,0,0,.2),0 0 0 .1875em #ddd}.mw-ncd-toggle__input{opacity:0;visibility:hidden;position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mw-ncd-toggle__input:focus{outline:none}.mw-ncd-toggle__input:checked+label{box-shadow:inset 0 0 0 1.5em #50b83c,0 0 0 .1875em #50b83c}.mw-ncd-toggle__input:checked+label:before{transform:translateX(2em);box-shadow:0 0 0 .1875em transparent,0 .375em .375em rgba(0,0,0,.3)}.mw-ncd-toggle__input:disabled+label:before{background:#ddd!important;box-shadow:inset 0 0 0 0 #50b83c,0 0 0 .1875em #ccc!important;cursor:not-allowed!important}</style> <script> window.mwInitNoContactDelivery = {}; window.mwInitNoContactDelivery["template_name"] = {{ template.name | json }}; window.mwInitNoContactDelivery["settings"] = {"cart_enabled":false,"cart_label":"No-contact delivery","cart_description":"The \"no-contact delivery\" is a completed delivery, where the courier delivers your order to the safe, agreed upon location and you do not have a direct contact with the courier.","product_enabled":false,"product_label":"No-contact delivery available","product_description":"The \"no-contact delivery\" is a completed delivery, where the courier delivers your order to the safe, agreed upon location and you do not have a direct contact with the courier. You can select it in the cart."}; window.mwInitNoContactDelivery["cart"] = {{ cart | json }}; </script> {% endif %}
  1. Add a new snippet again. The snippet name should be mw_NCP_helper.liquid.

{% include 'mw_NCP_init' %} {% comment %}CUSTOM CODE BELOW{% endcomment %}
  1. Edit theme.liquid layout

    Open the Layout folder, and click the theme.liquid file.

    Before the line:

</body>

enter:

If you still have any questions or problems with the installation, feel free to contact us and our team will help you:

Contact Us