Core Functionalities
App Theme Extensions

App Theme Extensions

ShipReady comes with pre-built app block extensions to jumpstart your Shopify app development. These blocks serve as examples and can be easily customized to fit your specific app needs.

Overview

ShipReady includes three types of pre-built blocks:

  1. Standard App Block
  2. Paid-Customer App Block
  3. App Embed Block

These blocks demonstrate different integration scenarios and can be used as starting points for your own custom blocks.

1. Standard App Block

This block serves as a basic example of how to create an app block that can be added to any theme section.

Usage

  1. Navigate to extensions/theme-extensions/blocks/icon-with-text.liquid in your ShipReady project.
  2. Review the example code and customize it for your app's needs.
  3. This block is an example of an icon with text. You can modify the block to include any content or functionality you need.

Example structure:

<style>
    .icon-with-text {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .delivery-time .icon-wrapper img{
        width: 100%;
        height: 100%;
    }
</style>
 
<div id="info-block-{{ block.id }}" class="icon-with-text">
    {% if block.settings.icon != blank %}
        <div class="icon-with-text__icon" style="width: {{ block.settings.icon_width | append: 'px' }};">
          {% render 'img-icon', image: block.settings.icon  %}
        </div>
    {% endif %}
    
    {% if block.settings.text != blank %}
      <div class="icon-with-text__text">
        {{ block.settings.text }}
      </div>
    {% endif %}
</div>
 
{% schema %}
{
  "name": "Icon with text",
  "target": "section",
  "settings": [
    {
        "type": "image_picker",
        "id": "icon",
        "label": "Icon",
        "info": "Optional"
    },
    {
        "type": "range",
        "id": "icon_width",
        "label": "Icon width",
        "unit": "px",
        "min": 10,
        "max": 200,
        "step": 2,
        "default": 40
    },
    {
      "type": "richtext",
      "id": "text",
      "default": "<p> Free shipping in United States over $100 USD </p>",
      "label": "Description"
    }
  ]
}
{% endschema %}

2. Paid-Customer App Block

This block demonstrates how to create features exclusive to paid customers. When a user select a paid plan, an app metafield will be set for that user.

Usage

  1. Find extensions/theme-extensions/blocks/delivery-time.liquid in your ShipReady project.
  2. Customize the block, ensuring to maintain the paid-customer check logic.
  3. This block is an example of a delivery time block that shows the estimated delivery date based on the current date and user settings.

Example structure:

<style>
    .delivery-time {
        display: flex;
        align-items: center;
        gap: 6px;
    }
</style>
 
<div id="info-block-{{ block.id }}" class="delivery-time">
  {% if block.settings.text != blank %}
    {% comment %} {% assign deliveryDate = 'now' | date: '%s' | plus: 518400 | date: '%A %B %d, %Y' %} {% endcomment %}
    {% assign deliveryDate = 'now' | date: '%s' %}
    {% if block.settings.delivery_days_in_future != blank %}
 
      {% comment %} 20:00 will be 10am PST {% endcomment %}
      {% assign cutoff_time = '20:00' %}
      {% assign delivery_seconds_in_future = block.settings.delivery_days_in_future | times: 86400 %}
      {% assign deliveryDate = deliveryDate | plus: delivery_seconds_in_future %}
      {% assign deliveryDay = deliveryDate | date: '%A' %}
      {% assign currentHourAndMinute = 'now' | date: '%H:%M' %}
 
      {% assign deliveryDisplayDate = deliveryDate | date: '%A %B %d, %Y' %}
 
      {% if currentHourAndMinute > cutoff_time %}
        {% assign deliveryDate = deliveryDate | plus: 86400 %}
      {% endif %}
      
      {% if block.settings.skip_weekends %}
        {% if deliveryDisplayDate contains "Saturday" %}
          {% assign deliveryDate = deliveryDate | plus: 172800 %}
        {% endif %}
 
        {% if deliveryDisplayDate contains "Sunday" %}
          {% assign deliveryDate = deliveryDate | plus: 86400 %}
        {% endif %}
      {% endif %}
 
      {% assign deliveryDate = deliveryDate | date: '%A %B %d, %Y' %}
    {% endif %}
 
    <div class="delivery-time__text">
      {{ block.settings.text | replace: "$delivery_time", deliveryDate }}
    </div>
 
  {% endif %}
</div>
 
{% schema %}
{
  "name": "Delivery time",
  "target": "section",
  "available_if": "{{ app.metafields.shipready.paid }}",
  "enabled_on": {
    "templates": ["product"]
  },
  "settings": [
    {
      "type": "richtext",
      "id": "text",
      "default": "<p> Get it as soon as $delivery_time </p>",
      "label": "Description",
      "info": "Available variables: $delivery_time"
    },
    {
      "type": "header",
      "content": "Delivery settings"
    },
    {
      "type": "number",
      "id": "delivery_days_in_future",
      "label": "Delivery days in future",
      "default": 3,
      "info": "Number of days to add to the current date to calculate the delivery date."
    },
    {
      "type": "checkbox",
      "id": "skip_weekends",
      "label": "Skip weekends",
      "default": true
    }
  ]
}
{% endschema %}

3. App Embed Block

App embed blocks allow you to run scripts/styles append to the body element of the theme. This is useful for embedding your app's global functionality across the entire theme.

By default, app embed blocks are deactivated after an app is installed. Merchants need to activate app embed blocks in the theme editor, from Theme Settings > App embeds.

Usage

  1. Locate extensions/theme-extensions/blocks/app-embed.liquid in your ShipReady project.
  2. Modify the embed block to include your app's global functionality.

Example structure:

{% schema %}
{
  "name": "ShipReady Assets",
  "stylesheet": "app.css",
  "javascript": "app.js",
  "target": "body",
  "settings": [
  ]
}
{% endschema %}

app.css and app.js are the assets that will be included in the theme. You can add your app's styles and scripts in these files.

Customizing the Blocks

To customize these blocks for your app:

  1. Replace placeholder content with your app's actual features.
  2. Modify the settings in the {% schema %} section to match your app's configuration needs.
  3. Add any necessary JavaScript for interactive features.
  4. Ensure proper error handling and loading states.

Best Practices

  1. Keep blocks lightweight to maintain good performance.
  2. Use responsive design principles for all device sizes.
  3. Provide clear instructions in block settings for merchants.
  4. Test thoroughly in various themes and store setups.

Testing Your Customized Blocks

  1. Use a Shopify development store to test your blocks.
  2. Add your blocks to different sections and pages.
  3. Test on multiple devices and browsers.
  4. Verify all functionality, including paid-user features.

For more detailed guidance on developing Shopify app blocks, refer to the Shopify App Block documentation (opens in a new tab).

If you encounter any issues or need further assistance, please check our Troubleshooting Guide or contact our support team.

Billing & PricingMetafield API