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