Widgets ​

Widgets are a convenient way to display estimated delivery dates in your store.

Widgets can be added to various pages and sections, for example, on product pages, in collections, and in the shopping cart.

Themes with support for app blocks (Online Store 2.0) can integrate widgets in the Shopify theme editor via the Delm Widget block. Alternatively, widgets can also be integrated by adding code.

Creating widgets ​

In Delm, you can create as many widgets as you want to cover different use cases. Here are some possibilities:

• Customize a detailed widget for your product page, showcasing all the relevant information.
• Design a simplified widget for your cart and collection items, providing a concise view.
• Create multiple versions of a widget to conduct A/B tests, comparing different designs or content.

Widget ID ​

Every widget is assigned a unique and permanent ID that cannot be changed. This ID serves as a reference and allows you to load specific widgets in different areas of your store.

Widget status ​

The status of a widget determines its visibility to customers.

• Draft: Widgets in draft status are only visible when viewed through the Shopify theme editor. This allows you to preview and make changes to the widget without displaying it to your customers.
• Active: When a widget is set to active status, it becomes visible to customers.

Widget content ​

You have full control over the widget content. Every aspect of the content can be customized according to your preferences. The widget content can be edited separately for each language, which makes it perfect for multilingual stores.

To include dynamic content, such as the estimated delivery date, you can use placeholders like {delivery_date}. These placeholders can be easily inserted into the content fields of the widget. A comprehensive list of available placeholders can be found below each field.

Examples ​

Visit our demo store to see widgets in action and learn how they can be customized. The code for each example is available on GitHub.

Integrate widgets into theme ​

Widgets can be integrated via the app block Delm Widget or by adding code to Liquid templates.

Follow these steps to integrate widgets:

1. Create a widget.
2. Enable Delm Core app embed.
3. Add Delm Widget app block to your theme section.
4. Add code to your liquid template if your theme does not support app blocks.

Enable app embed ​

Follow these steps to enable Delm Core:

1. From your Shopify admin, navigate to Sales channels > Online Store > Themes.
2. Locate the theme you wish to edit and click on Customize.
3. In the customization panel, click on the App embeds tab.
4. Enable the option for Delm Core.
5. Remember to save your changes by clicking on Save.

Integrate widgets via app block ​

With the Delm Widget block, widgets can be easily integrated via the Shopify visual theme editor, without the need for programming skills.

Here's how you can display Delm widgets using the app block:

1. Enable the Delm Core app embed, as explained in the previous documentation.
2. From your Shopify admin, navigate to Sales channels > Online Store > Themes.
3. Locate the theme you wish to edit and click on Customize.
4. Find the specific section of your store where you want to add the widget and click Add block.
5. Look for the Delm Widget block in the Apps section.
6. Remember to save your changes by clicking on Save.

However, please note that there may be positioning restrictions when using blocks. These restrictions can be worked around by manually inserting the widget code into the Liquid template.

Integrate widgets via code ​

The HTML element <delm-widget> can be added to any Liquid template, providing endless possibilities when integrating widgets. This HTML element is available if you have enabled the Delm Core app embed.

Widget element attributes ​

These optional attributes are supported by <delm-widget>:

• data-widget-id to load a specific widget using its unique ID.
• data-variant-id to link a product variant to this widget to display product specific data.
• data-watch-variant-id-selector to update the widget when the active product variant changes. Provide the unique selector for the input element that holds the current variant ID.

Code example ​

<delm-widget
  data-variant-id="{{ product.selected_or_first_available_variant.id }}"
  data-watch-variant-id-selector="{{ 'form[action*="/cart/add"] [name="id"]' | escape }}"
></delm-widget>

A/B testing widgets ​

To conduct A/B tests for widgets, you can use your preferred A/B testing tool like VWO. The process involves adding multiple widgets to your page and selectively showing them for different test variants.

Here's an example code snippet that demonstrates how to set up multiple widgets with easily selectable IDs:

{% assign variant_id = product.selected_or_first_available_variant.id %}
{% assign watch_variant_id_selector = 'form[action*="/cart/add"] [name="id"]' | escape %}
 
<div id="delm-widget-variant-a" style="display: none;">
  <delm-widget 
    data-widget-id="enter-widget-variant-a-id"
    data-variant-id="{{ variant_id }}"
    data-watch-variant-id-selector="{{ watch_variant_id_selector }}"
  ></delm-widget>
</div>
 
<div id="delm-widget-variant-b" style="display: none;">
  <delm-widget 
    data-widget-id="enter-widget-variant-b-id"
    data-variant-id="{{ variant_id }}"
    data-watch-variant-id-selector="{{ watch_variant_id_selector }}"
  ></delm-widget>
</div>
 
<!-- Add more variants as needed -->

In this example, each widget is enclosed within a <div> element with a unique ID. The style="display: none;" attribute ensures that all widgets remain hidden by default.

You can use the IDs of the widget containers to control the visibility of each widget through your A/B testing tool. This allows you to experiment with different variations and determine the most effective widget presentation for your customers.

Supported languages ​

If you need a language that is not listed below, please contact us.

Detecting store language ​

Delm uses the window.Shopify.locale JavaScript variable to determine the current language in your store. It reads the store language code and converts it to the ISO 639-1 standard.

For instance, if the store language code is en-US, Delm will convert it to en to represent the English language.