No-contact Delivery App for Shopify Manual

About

The app allows you to add the 'no-contact' delivery option to your Shopify store. The app can add the 'No-contact' delivery toggle to the cart page and the text to the product pages to inform your customers about this option directly on the products.

The app allows you to translate and change the option's label and its description right from the back-end.

How to use the app

Our team is always working hard to make our apps easy-to-install and easy-to-use. We optimized the installation and onboarding processes in this app to make sure you won't need to spend your time on reading the numerous steps of the installation and user guides.

The app is equipped with fully automatic installation process, that will add the necessary code snippets to your theme so you won't need to edit the code.

Briefly, the steps are as follows:

• Install the app from the Shopify Apps Store;
• The automatic installation process inside the app will add the necessary code to the right places in your theme;
• Enable the app;
• Check the result and that's it.

Installation

Automatic 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.

Manual installation

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 %}

2) Add a new snippet again. The snippet name should be mw_NCP_helper.liquid.

{% include 'mw_NCP_init' %}
{% comment %}CUSTOM CODE BELOW{% endcomment %}

3) Edit theme.liquid layout

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

Before the line:

</body>

enter:

{% include 'mw_NCP_helper' %}

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

App Configuration

Right after the installation, you should enable the app in the configuration.

The app configuration is located in Settings page.

General

• Active/Disable - the first section allows you to enable or disable the entire app on the front-end.

Product page settings

These settings allow you to enable/disable the "No-contact" label on the product page.

• Display ‘No-contact delivery’ on product pages - this setting allows you to display the ‘No-contact delivery available’ text on the product page.
• Label - this setting allows you to change the label for the ‘No-contact delivery’ option on the product page.
• Description - this setting allows you to add a description, which will appear below the ‘No-contact delivery’ option on the product page on the front-end.

Cart page settings

These settings allow you to change the "No-contact" delivery label and description in the cart.

• Label - this setting allows you to change the label for the ‘No-contact delivery’ option in the cart.
• Description - this setting allows you to add a description, which will appear below the ‘No-contact delivery’ option in the cart on the front-end

Uninstallation

If you need to remove the app from your store, please follow these 2 steps:

1) Remove the app from the Apps section in your Shopify back-end. This will cancel the subscription and remove the app from your store.

From your Shopify admin, go to Online Store > Themes, find the theme you want to remove "No-contact" delivery App from and click Actions > Edit code.

2) Delete mw_NCP_init.liquid snippet

Open the Snippets folder, locate the snippet named mw_DD_objects.liquid and click Delete button.

3) Delete mw_NCP_helper.liquid snippet

Open the Snippets folder, locate the snippet named mw_NCP_helper.liquid and click Delete button.

3) Remove code from theme files

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

Find the code:

{% include 'mw_NCP_helper' %}

Remove it and click Save button.

Questions?

For any technical and pre-sale questions, feel free to contact us at apps@mageworx.com.