FOCAL THEME - Help with 0 inventory price to read Price on Enquiry and link to an Enquiry Form

Technical Q&A
, , , , ,

Topic summary

A Shopify store owner selling handmade jewelry needs to customize their Focal theme to handle special-order items differently from regular inventory.

Requirements for zero-inventory items:

  • Display “POA” or “Price on Enquiry” instead of price
  • Replace “Add to Cart” button with “Enquire Now” button
  • Link button to existing enquiry form page
  • Prevent items from being added to cart

Solution provided:
A code snippet combining Liquid templating, CSS, and JavaScript was shared. The implementation involves:

  • Editing product-template.liquid or product-form.liquid in the theme’s Sections folder
  • Adding conditional logic that checks if product is unavailable and inventory is zero
  • Hiding default price/button elements and displaying custom alternatives
  • Linking the enquiry button to the form page URL

Customization options:
The solution allows adjusting button colors, text labels, and styling to match brand preferences. The store owner needs to replace the placeholder URL with their actual enquiry form page path.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi brains trust,

I’ve tried to do this myself, but am having no luck.

I’m using Focal theme.

My jewellery items are hand-made (by me), extremely small batch and one off pieces. There are items available and ready to Add to Cart, and some items can be pre-ordered -using Essential Preorder App for this, but there are between 6-10 items that are special orders, and enquiry needs to be made so that I can provide a quote before making the sale.

So, with coding, or apps, for these select few products I would like –

  • When inventory is 0 for the price to read POA or Price on Enquiry
  • The ‘buy button’ to read Enquire Now
  • When clicking on the Enquire Now buy button, it links to and opens an Enquiry Form ( I have made this form and it exists as a Page, so it would be linking a URL to the button? Is this correct?)
  • The item NOT being able to be added to cart.

Any tips?

2

this is exactly what I want to do - but need to know how…

3

Hey @KWayWay ,

Hope you’re doing fantastic! The solution is simple. Here’s how to modify your Focal theme to handle these special order items.

For products with zero inventory, we’ll:

  1. Change the price display to “POA” or “Price on Enquiry”
  2. Update the “Add to Cart” button to “Enquire Now”
  3. Link that button to your existing enquiry form page
  4. Prevent these items from being added to cart

Let me provide you with the code to implement this:

{% comment %}
  Add this code to your product-template.liquid or product-form.liquid file
  Look for the section that handles the product form and add this code
  just before the closing  tag
{% endcomment %}

{% if product.available == false and product.variants.first.inventory_quantity <= 0 %}
  

  Price on Enquiry

  
  Enquire Now
  
  
{% endif %}

Installation Instructions1. Access Your Theme Code:

  • Go to your Shopify admin → Online Store → Themes
  • Click “Actions” → “Edit code” on your Focal theme
  1. Find Your Product Template:
    • Look for product-template.liquid or product-form.liquid in the Sections folder
    • This might be called something slightly different in Focal theme, such as section-product-template.liquid
  2. Modify the Code:
    • Find the product form section (look for <form method=“post” action=“/cart/add”)
    • Paste the code from the artifact above just before the closing tag
  3. Update the Form URL:
    • In the code, replace /pages/enquiry-form with the actual URL path to your enquiry form page
  4. Save and Test:
    • Save the changes and preview your store
    • Test with a product that has zero inventory to ensure the functionality works

How This Works

The code checks if a product is unavailable and has zero inventory. When these conditions are met:

  • It hides the regular price display and shows “Price on Enquiry” instead
  • It hides the default “Add to Cart” button
  • It displays a styled “Enquire Now” button that links to your form page
  • JavaScript ensures no other add-to-cart functionality works for these products

Customizations

You can easily customize:

  • Button colors: Change the hex values in the CSS to match your brand colors
  • Text: Modify “Price on Enquiry” or “Enquire Now” to your preferred wording
  • Styling: Adjust the CSS for fonts, spacing, etc. to match your theme

Let me know if you need any clarification or have questions about implementing this solution!

Cheers!
Shubham | Untechnickle