Adding a “Request a Quote” Button to Store Locator Listings (Shopify)
Overview
This article explains how to add a “Request a Quote” button to each store listing in a Shopify Store Locator using a JavaScript-based targeting approach.
Instead of editing app-generated HTML directly, this method:
Targets the Store Locator App Embed
Runs only on the
/store-locatorpageLocates each store’s details container
Injects a button after the store details block
Preserves compatibility with future app updates
Why This Approach Is Recommended
Use this method when:
The Store Locator is rendered by a Shopify App Embed
Store markup is dynamically generated
You need per-location UI enhancements
Direct Liquid edits are unreliable or unsafe
This pattern ensures long-term maintainability.
Prerequisites
Before proceeding, ensure:
You have Admin access to Shopify
The Store Locator app is enabled via App Embeds
You have the URL of your Request a Quote form
You are comfortable adding small scripts to your theme
Best Practice: Duplicate your theme before making changes.
Implementation Strategy
This solution works by:
Running only on
/store-locatorWaiting for the Store Locator app to load
Finding each
<div class="list-details scasl-list-details">Injecting a Request a Quote button after it
Preventing duplicate buttons on re-render
Step-by-Step Instructions
1. Open Theme Code
Go to Shopify Admin
Navigate to Online Store → Themes
Click ⋯ → Edit code
Open
theme.liquid
(or another global layout file)
2. Add the Page-Scoped Script
Paste the following code just before the closing </body> tag.
Replace YOUR_FORM_URL with your actual quote request form URL.
{% if request.path contains 'store-locator' %} <script> window.addEventListener('load', function () { const observer = new MutationObserver(() => { const detailBlocks = document.querySelectorAll( '.list-details.scasl-list-details' ); detailBlocks.forEach((block) => { // Prevent duplicate buttons if (block.nextElementSibling?.classList.contains('request-quote-wrapper')) { return; } const buttonWrapper = document.createElement('div'); buttonWrapper.className = 'request-quote-wrapper'; buttonWrapper.innerHTML = ` <a href="YOUR_FORM_URL" class="request-quote-button"> Request a Quote </a> `; block.parentNode.insertBefore( buttonWrapper, block.nextSibling ); }); }); observer.observe(document.body, { childList: true, subtree: true }); }); </script> {% endif %}Optional Styling
Add the following CSS to your theme stylesheet if needed:
.request-quote-wrapper { margin-top: 12px; } .request-quote-button { display: inline-block; padding: 10px 16px; background-color: #A4118D; color: #ffffff; text-decoration: none; border-radius: 4px; font-weight: 600; }What This Code Does
Component | Purpose |
| Restricts execution to the Store Locator page |
| Handles dynamic app rendering |
| Anchors button placement per store |
| Appends button after store details |
Duplicate check | Prevents repeated buttons |
Verification Checklist
After saving your changes, confirm:
✅ Buttons appear under each store listing
✅ Button placement is consistent
✅ Clicking opens the correct form
✅ No duplicate buttons appear
✅ No console errors occur
Troubleshooting
Buttons not appearing
Confirm class name matches exactly
Inspect DOM to ensure elements are rendered
Duplicate buttons
Ensure the duplicate-check logic remains intact
Verify no other scripts inject similar UI
Layout issues
Adjust margins or button styles
Check for parent container constraints
Notes & Best Practices
This method is fully app-update safe
Avoid editing app markup directly
Always scope scripts using
request.pathTest across breakpoints and map/list views
© Rose Perl Technology