All Collections
Themes
Enabling the cart widget on your theme
Enabling the cart widget on your theme
Marija avatar
Written by Marija
Updated over a week ago

Zapiet - Pickup + Delivery is compatible with Online store 2.0, you can enable our widget on your theme.


Considerations

  • The widget needs to be installed on each new theme individually.

  • The widget will be automatically updated when a new version is released.

  • The widget should work on every theme in the Shopify theme store.

    • If you're not using a theme from the Shopify theme store, please contact us on [email protected].

  • Customizations in storepickup-addons.liquid are no longer possible.

  • We recommend creating a duplicate theme and installing the widget there, to avoid interference of the live theme.

  • CSS and JavaScript can be added in Zapiet - Pickup + Delivery > Themes > Developers.


Enable Zapiet - Pickup + Delivery on your theme

To enable the widget, follow our video tutorial or the written steps.

  1. Open the Apps section in your Shopify admin and click Zapiet - Pickup + Delivery.

  2. In Zapiet - Pickup + Delivery, click Settings.

  3. Click Themes.

  4. Find the theme you'd like to install our widget on, and click Preview in theme.

  5. This will open the Customize settings on your theme, and enable Zapiet - Pickup + Delivery widget on that theme.

  6. Add a product to the cart, and go to the cart page.

  7. Zapiet - Pickup + Delivery widget should show on the cart page. Click Save.

  8. You can now test with the preview of this duplicate theme to make sure all is working as you need it to. Click on the 3 dots on the top left, and then click Preview.
    We recommend testing in an incognito/private window to avoid any caching issues.

  9. Should everything work well, click Publish.

  10. Follow our Language locales article to learn how we change the wording at checkout depending on the checkout method.

Zapiet - Pickup + Delivery widget should now be showing on the cart page of your live store.

Should you have any additional questions, contact us at [email protected].


Disable Zapiet - Pickup + Delivery on your theme

If you don't need our app on a certain theme anymore, or just want to remove it temporarily, you can disable Zapiet - Pickup + Delivery app's widget on your theme.

  1. In Online Store, open Themes tab.

  2. Find the theme you would like to remove our widget from and click Customize.

  3. Click App embeds.

  4. Turn off Zapiet - Pickup + Delivery.

  5. Click Save.

Zapiet - Pickup + Delivery widget should not show on this theme anymore.


Exported themes

To ensure that Zapiet - Pickup + Delivery widget is correctly placed in the exported theme, you will need to add a code snippet that will allow Zapiet to get the theme ID.

  1. Open the original theme, then left-click on mouse and click Inspect.

  2. Open the Console, then type in window.zapietThemeConfig and copy the object.

    Example of the object:

    {
    "methods": {},
    "properties": {
    "addAppDiv": {
    "selector": ".ajax-cart__buttons"
    },
    "eventListeners": {
    "xmlInterceptors": {
    "enabled": false
    }
    },
    "itemKeySelector": "data-item-key",
    "zapietId": {
    "selector": ".ajax-cart__cart-variants p",
    "removeMethod": "regex",
    "regexOptions": {
    "regex": {},
    "replaceValue": "",
    "removeLineBreak": false
    }
    },
    "elementsToRemove": "#modal-ajax-cart [name=\"checkout\"], .or-divider",
    "drawerCart": {
    "enabled": true,
    "onCartPage": {
    "extraCheckoutButtons": 1,
    "drawerButtonIndex": 1,
    "onlyHide": true
    }
    }
    }
    }

  3. In the Theme library, click ..., then Edit code next to the exported theme.

  4. Open theme.liquid file.

  5. Search for </body> and prepend it with the code below. Add the copied object from step 2 instead of (the copied object).

    <!-- Zapiet code | Theme configuration -->
    <script>
    window.zapietThemeConfig = (the copied object)
    </script>
    <!-- End of Zapiet code -->

  6. Click Save.

The widget placement in the exported theme should now be identical to the original theme.


Troubleshooting

Did this answer your question?