Skip to main content

App Hooks

Hooks are specific points in the theme rendering process where apps can inject code. This guide covers all available hooks and their usage.

Hook Overview​

Hooks allow apps to:

  • Inject HTML, CSS, or JavaScript at specific locations
  • Modify page content dynamically
  • Add functionality without modifying theme files
  • Integrate third-party services

Hook Syntax​

Hooks are rendered in themes using:

{% render 'hook', hook_name: 'hook_name' %}

Or with additional context:

{% render 'hook', hook_name: 'product_price_after', product: product %}

Available Hooks​

Theme Layout Hooks​

theme_head​

Executed before closing </head> tag.

Use Cases:

  • Add meta tags
  • Include tracking scripts
  • Add CSS files
  • Set up analytics

Example:

<!-- snippets/theme_head.liquid -->
<script>
  // Analytics initialization
</script>

theme_body_begin​

Executed right after opening <body> tag.

Use Cases:

  • Add body classes
  • Initialize global scripts
  • Add loading overlays

theme_body_end​

Executed before closing </body> tag.

Use Cases:

  • Add tracking pixels
  • Initialize JavaScript
  • Add chat widgets

Header Hooks​

header_before / header_after​

Before and after header section.

header_nav_before / header_nav_after​

Before and after navigation menu.

header_cart_before / header_cart_after​

Before and after cart icon/summary.

Product Page Hooks​

product_before / product_after​

Before and after product content.

product_images_before / product_images_after​

Before and after product images.

product_title_before / product_title_after​

Before and after product title.

product_price_before / product_price_after​

Before and after product price.

Example:

<!-- snippets/product_price_after.liquid -->
{% if product.compare_at_price > product.price %}
  <span class="savings">
    Save {{ product.compare_at_price | minus: product.price | money }}
  </span>
{% endif %}

product_description_before / product_description_after​

Before and after product description.

product_form_before / product_form_after​

Before and after add-to-cart form.

product_add_to_cart_before / product_add_to_cart_after​

Before and after add-to-cart button.

product_variants_before / product_variants_after​

Before and after variant selector.

product_quantity_before / product_quantity_after​

Before and after quantity selector.

product_reviews_before / product_reviews_after​

Before and after reviews section.

product_related_before / product_related_after​

Before and after related products.

product_upsell_before / product_upsell_after​

Before and after upsell products.

product_bundle_before / product_bundle_after​

Before and after bundle offers.

product_social_share_before / product_social_share_after​

Before and after social sharing buttons.

product_wishlist_before / product_wishlist_after​

Before and after wishlist button.

product_trust_badges​

Display trust badges (security, guarantees).

product_stock_notification​

Stock notification/alert form.

Product Listing Hooks​

product_list_before / product_list_after​

Before and after product listing.

product_card_before / product_card_after​

Before and after each product card.

product_card_image_before / product_card_image_after​

Before and after product card image.

product_card_price_before / product_card_price_after​

Before and after product card price.

product_card_title_before / product_card_title_after​

Before and after product card title.

Cart Hooks​

cart_before / cart_after​

Before and after cart page.

cart_items_before / cart_items_after​

Before and after cart items list.

cart_item_before / cart_item_after​

Before and after each cart item.

cart_subtotal_before / cart_subtotal_after​

Before and after subtotal.

cart_discount_before / cart_discount_after​

Before and after discount section.

cart_shipping_before / cart_shipping_after​

Before and after shipping section.

cart_total_before / cart_total_after​

Before and after total.

cart_checkout_before / cart_checkout_after​

Before and after checkout button.

Example:

<!-- snippets/cart_checkout_before.liquid -->
{% if cart.total_price > 10000 %}
  <div class="prepayment-offer">
    <p>Get 5% off with prepayment!</p>
    <button onclick="applyPrepaymentOffer()">Apply Offer</button>
  </div>
{% endif %}

cart_empty_before / cart_empty_after​

Before and after empty cart message.

cart_gift_card_before / cart_gift_card_after​

Before and after gift card section.

cart_loyalty_points_before / cart_loyalty_points_after​

Before and after loyalty points section.

Checkout Hooks​

checkout_before / checkout_after​

Before and after checkout page.

checkout_shipping_before / checkout_shipping_after​

Before and after shipping section.

checkout_shipping_address_before / checkout_shipping_address_after​

Before and after shipping address form.

checkout_billing_before / checkout_billing_after​

Before and after billing section.

checkout_payment_before / checkout_payment_after​

Before and after payment section.

checkout_payment_methods_before / checkout_payment_methods_after​

Before and after payment methods list.

checkout_order_summary_before / checkout_order_summary_after​

Before and after order summary.

checkout_order_notes_before / checkout_order_notes_after​

Before and after order notes field.

checkout_terms_before / checkout_terms_after​

Before and after terms and conditions.

checkout_submit_before / checkout_submit_after​

Before and after submit button.

Order Confirmation Hooks​

order_confirmation_before / order_confirmation_after​

Before and after order confirmation page.

order_confirmation_details_before / order_confirmation_details_after​

Before and after order details.

order_confirmation_upsell_before / order_confirmation_upsell_after​

Before and after upsell products.

order_confirmation_social_share​

Social sharing for order confirmation.

footer_before / footer_after​

Before and after footer section.

Search Hooks​

search_before / search_after​

Before and after search page.

search_results_before / search_results_after​

Before and after search results.

search_no_results_before / search_no_results_after​

Before and after "no results" message.

Account/Customer Hooks​

account_before / account_after​

Before and after account page.

account_dashboard_before / account_dashboard_after​

Before and after account dashboard.

account_orders_before / account_orders_after​

Before and after orders list.

account_order_before / account_order_after​

Before and after order details.

account_order_tracking​

Order tracking information.

account_addresses_before / account_addresses_after​

Before and after addresses section.

account_profile_before / account_profile_after​

Before and after profile section.

account_wishlist_before / account_wishlist_after​

Before and after wishlist.

account_loyalty_before / account_loyalty_after​

Before and after loyalty program.

Page Hooks​

page_before / page_after​

Before and after custom page.

page_content_before / page_content_after​

Before and after page content.

Global/Miscellaneous Hooks​

popup_before / popup_after​

Before and after popup modals.

live_chat​

Live chat widget integration.

currency_switcher​

Currency selection widget.

language_switcher​

Language selection widget.

newsletter_signup​

Newsletter subscription form.

social_proof​

Social proof elements (reviews, testimonials).

recently_viewed​

Recently viewed products.

product_recommendations​

Product recommendation engine.

abandoned_cart_recovery​

Abandoned cart recovery.

trust_badges​

Trust badges (security, guarantees).

countdown_timer​

Countdown timer for offers.

stock_indicator​

Stock level indicator.

prepayment_offer​

Prepayment discount offers.

payment_gateway_offers​

Payment gateway-specific offers.

buy_now_pay_later​

Buy now, pay later options.

gift_card​

Gift card functionality.

bundle_offer​

Product bundle offers.

cross_sell / upsell​

Cross-sell and upsell products.

product_comparison​

Product comparison tool.

size_guide​

Size guide widget.

product_video​

Product video player.

product_360_view​

360-degree product view.

quick_view​

Quick view product modal.

product_tabs​

Product information tabs.

faq_section​

FAQ section.

reviews_section​

Product reviews section.

shipping_calculator​

Shipping cost calculator.

address_autocomplete​

Address autocomplete.

order_tracking​

Order tracking widget.

loyalty_program​

Loyalty program integration.

discount_code​

Discount code input.

custom_fields_checkout​

Custom fields in checkout.

Using Hooks in Apps​

Registering Hooks​

In app.json, list all hooks your app uses:

{
  "id": "my-app",
  "hooks": [
    "theme_head",
    "product_price_after",
    "cart_checkout_before"
  ]
}

Creating Hook Snippets​

Create a Liquid snippet file for each hook:

snippets/
  theme_head.liquid
  product_price_after.liquid
  cart_checkout_before.liquid

Hook Context​

Hooks have access to the full Liquid context. Common variables:

  • product - Current product (product pages)
  • cart - Shopping cart (cart/checkout pages)
  • page - Current page
  • shop - Store information
  • tenant - Tenant configuration
  • settings - App settings

Best Practices​

  1. Hook Selection: Use the most specific hook for your needs
  2. Performance: Keep hook snippets lightweight
  3. Error Handling: Handle missing data gracefully
  4. Conditional Rendering: Only render when needed
  5. Priority: Use app priority to control execution order
  6. Testing: Test hooks on all relevant page types

Next Steps​