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
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
- min:
- estimated_delivery_time
object
- min:
string
- timestamp - max:
string
- timestamp
- min:
- 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>