Skip to main content

Widgets

Create and manage multiple delivery date widgets. Use preset widget templates or customize them how you like. Widgets are designed in html and support liquid syntax along with additionally provided liquid variables and filters.

Supported liquid​

caution

Not all Shopify tags, filter, and objects are available. Contact support at edgeless.apps@gmail.com for a specify use case you would like to achieve.

Shopify objects​

localization object​

customer object​

cart object​

product object​

App objects​

rates array​

Shipping rates in with flat transit time

Properties​

  • name: string
  • price: number
  • transit_time object
    • min: number
    • max: number
  • estimated_delivery_time object
    • min: string - timestamp
    • max: string - timestamp
  • consolidated_estimated_delivery_time string

Example usage​

{% for rate in rates %}
<div>
  <p>
    <strong>{{rate.name}}</strong>
    <span>
      {% if rate.price == 0 %}
        FREE
      {% else %}
        ${{rate.price}}
      {% endif %}
    </span>
  </p>
  <p>
    <span>Delivery</span>
    <span>
      {% if rate.consolidated_estimated_delivery_time != nil %}
        {{rate.consolidated_estimated_delivery_time}}
      {% else %}
        {{rate.transit_time.min}} to {{rate.transit_time.max}} business days {%
      endif %}
    </span>
  </p>
</div>
{% endfor %}

shop object​

Properties​

  • order_cutoff_time: string - timestamp
  • estimated_shipping_time: string - timestamp

Example usage​

{% if shop.order_cutoff_time != nil %}
<div>
  <span>Order by</span>
  {% assign cutoff_day = shop.order_cutoff_time | date: '%Y/%m/%d' %}
  {% assign today = now | date: '%Y/%m/%d' %}
  <strong>{{shop.order_cutoff_time | date: '%l:%M %p'}}</strong>
  {% if cutoff_day != today %}
    <span>{{shop.order_cutoff_time | date: '%A, %B %e'}}</span>
  {% endif %}
</div>
{% endif %}

widget object​

Properties​

  • type: string - any string can be be set to differentiate widget placement or purpose.
  • payload: object - any json data can be added for advanced use cases.

Example usage​

{% case widget.type %}
  {% when 'product' %}
    <div>
      Custom product page data: {{widget.payload.very.custom.product_page.data}}
    </div>
  {% when 'collection' %}
    <div>
      Custom collection page data:
      {{widget.payload.very.custom.collection_page.data}}
    </div>
{% endcase %}

App global properties​

Properties​

  • now string - timestamp updates each render ie. variant selection
  • today string - alias for now
  • tomorrow string - timestamp updates each render ie. variant selection
  • frozen_now string - timestamp does not update after page load

App tags​

countdown​

Provides context to create a countdown timer

countdown tag parameters​

  • event: string
  • freeze: boolean

countdown tag context data​

  • days: number
  • hours: number
  • minutes: number
  • seconds: number

Example usage​

{% countdown event: shop.order_cutoff_time, freeze: true %}
<p>
  Order within
  <strong>
    <span>{{days | pluralize_with_empty: ' day', ' days'}}</span>
    <span>{{hours | pluralize_with_empty: ' hour', ' hours'}}</span>
    <span>{{minutes | pluralize: ' min', ' mins'}}</span>
    <span>{{seconds | pluralize: ' sec', ' secs'}}</span>
  </strong>
</p>
{% endcountdown %}

App filters​

consolidated_date​

Converts rate.estimated_delivery_time min and max timestamps into a consolidated date range with a date format.

This filter accepts the same parameters as Ruby's strftime method for formatting the date. For a list of shorthand formats, refer to the Ruby documentation or strftime reference and sandbox.

Example usage​

<div>
  <span>Delivery</span>
  <strong>
    {{rate.estimated_delivery_time | consolidated_date: '%b %d'}}
  </strong>
</div>

countdown​

Creates a countdown timer in a basic format ie.

{{days | pluralize_with_empty: ' day', ' days'}} {{hours | pluralize_with_empty: ' hour', ' hours'}} {{minutes | pluralize: ' min', ' mins'}}

countdown filter parameters​

  • freeze: boolean

Example usage​

<p>
  Order within
  <strong> {{shop.order_cutoff_time | countdown }} </strong>
</p>
<p>
  Order within
  <strong> {{shop.order_cutoff_time | countdown: freeze: true }} </strong>
</p>

pluralize​

Given a number, outputs number with a singular or plural string appended.

pluralize filter parameters​

  • singlar/plural tuple array

Example usage​

<p>{{rate.transit_time.min | pluralize ' day', ' days'}}</p>

pluralize_with_empty​

Given a number, outputs number with a singular or plural string appended. Outputs blank if given zero.

pluralize_with_empty filter parameters​

  • singlar/plural tuple array

Example usage​

<p>{{rate.transit_time.min | pluralize_with_empty ' day', ' days'}}</p>

Shopify references​