I would like to add a button to the product page template that I have used for over 40 of my product pages.
I’d like the button to resemble the theme’s button styles.
Each of the buttons must be able to link to a different location on a map.
I can’t seem to find a clean and clear manner in which to do this.
I’m using the Dawn theme.
Have you consider using metaobject/metafield? Then creating a logic and displays the button if the product has a certain metafield and it links to another page of your choice. Im no expert but thats how I do it.
Thanks for your response. I found this tutorial and it seems to be working. Although manually updating over 100 product links is tedious and time consuming.
This adds the same button on all product page.. i thought you wanted different pages for each product?
What do you actually mean when you say every button should link to a different map? What is the requirement here when it comes to mapping because you have provided out placing a cuatom button?
Best
I am using stockist for a store locator. When the customer clicks the “find near me” it links to and area near them.
I used one hero page as a template for most of the products so I wanted the button in the exact same place. I then edit the CSS to change the link on each page.
Here is a test page with the custom linked button. See above reply for more infromation.test page
So I see the buttons on your site. It basically sends your users to a different page with all the available locations.
Seems working pretty fine, what is it you are actually looking to achieve here?
I was just in the middle of testing it and was wondering if there was a alternative solution. Thanks for verifying that it works and thank you for your time in replying.
Shadab: I’ve run into an issue using the code snippet.
I used a template I modified for all the products. I thought by putting a CCS block in the main template would allow me to edit the individual pages. But it’s not letting me do that. Any change I make to the code changes them all. What am i doing wrong?
I found a script mod for a custom button:
{% comment %}
{% endcomment %}
{% style %}
.onhow-custom-btn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0;
padding: 14px 24px;
color: #ffffff; /* CHANGE: Button text color /
background: #205ec9; / CHANGE: Button background color /
font-weight: 500;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
border: 2px solid #205ec9; / CHANGE: Button border color (match background) */
font-family: var(–font-body-family);
font-size: var(–font-body-size);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.onhow-custom-btn:hover {
background: transparent; /* CHANGE: Hover background (transparent or new color) /
color: #205ec9; / CHANGE: Hover text color (usually matches original background) /
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(32, 94, 201, 0.3); / CHANGE: Hover shadow color (R, G, B, opacity) */
}
.onhow-custom-btn:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(32, 94, 201, 0.2); /* CHANGE: Active shadow color (same RGB as hover, lower opacity) */
}
.onhow-custom-btn:focus {
outline: 2px solid #205ec9; /* CHANGE: Focus outline color (accessibility) */
outline-offset: 2px;
}
.product__info-container .product-form {
margin: 0;
}
@media screen and (max-width: 749px) {
.onhow-custom-btn {
padding: 12px 20px;
font-size: 14px;
}
}
{% endstyle %}
I modified the “parent” template and the button does show up but when I try to edit the individual “child” pages with a different link it changes all of them.
I’ve run into an issue using the code snippet.
I used a template I modified for all the products. I thought by putting a CCS block in the main template would allow me to edit the individual pages. But it’s not letting me do that. Any chnage I make to the code chnages them all. What am i doing wrong?
I found a script mod for a custom button:
{% comment %}
{% endcomment %}
{% style %}
.onhow-custom-btn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0;
padding: 14px 24px;
color: #ffffff; /* CHANGE: Button text color /
background: #205ec9; / CHANGE: Button background color /
font-weight: 500;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
border: 2px solid #205ec9; / CHANGE: Button border color (match background) */
font-family: var(–font-body-family);
font-size: var(–font-body-size);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.onhow-custom-btn:hover {
background: transparent; /* CHANGE: Hover background (transparent or new color) /
color: #205ec9; / CHANGE: Hover text color (usually matches original background) /
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(32, 94, 201, 0.3); / CHANGE: Hover shadow color (R, G, B, opacity) */
}
.onhow-custom-btn:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(32, 94, 201, 0.2); /* CHANGE: Active shadow color (same RGB as hover, lower opacity) */
}
.onhow-custom-btn:focus {
outline: 2px solid #205ec9; /* CHANGE: Focus outline color (accessibility) */
outline-offset: 2px;
}
.product__info-container .product-form {
margin: 0;
}
@media screen and (max-width: 749px) {
.onhow-custom-btn {
padding: 12px 20px;
font-size: 14px;
}
}
{% endstyle %}
I modified the “parent” template and the button does show up but when I try to edit the individual “child” pages with a different link it changes all of them.
Since you added the button to the same template that all pages use, changing it on one will change it on all the places.
What you can do here is create page metafields, fill it value from the pages admin backend for each page and then show on the frontend with liquid. This will make the link dynamic, so every page will have a different link.
Best
I got this from the Stockist development team: The issue is that the URL is hardcoded directly in the template, so every product page sharing that template uses the same link — editing one changes them all.
The fix is to store each product’s Stockist filter ID in a product metafield, then reference that metafield dynamically in the button’s href . Here’s the approach:
1. Create a metafield definition
In your Shopify admin, go to Settings > Custom data (or Settings > Metafields and metaobjects — the label varies by store) and add a new metafield definition under Products.
2. Update the button in your template
Replace the hardcoded href with a reference to the metafield:
(The exact namespace/key path will depend on what you named the metafield — Shopify sets the namespace to custom by default.)
3. Get your Stockist filter IDs
In your Stockist dashboard, go to Settings > Search filters, click Edit next to each filter, and find the ID in the bottom-left corner — it’ll look like flt_abc1234 .
4. Add the filter ID to each product
On each product’s edit page in Shopify, you’ll see the new metafield input at the bottom. Paste the corresponding filter ID there.
Once that’s in place, each product page will pull its own filter ID from the metafield, and the template stays shared across all products.
You elaborated it well on the point I made above. This seems to show as well that you have got this covered now.
Best
Shadab, Thank you so much for your input and time.
