Updated Button question

Store Design
1

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 page links. But it’s not letting me do that. Any change I make to the code ( in either the main template or itsindividual pages) changes them all. What am i doing wrong?

I found a script mod for a custom button:

{% comment %}

{% endcomment %}

Custom Button

{% 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.

2

Hi @kirkcanada

Do you want to add a custom button on the product page with a different link for each product? For that, we will need to use metafields. Please send me your website URL and a screenshot showing where you want the button to appear on the product page.

Best regards,
Devcoder :laptop:

3

OnHow usually is really thorough on the instructions. Take a second watch and read them carefully.

4

Do you have a link to that?

6

@Maximus3 ,

All products that use the same product template share the same code. So if you edit the button link inside that template, the change will apply to every product using that template. That’s why when you modify it on one page, it updates all of them.

Create a Product Metafield (eg: custom_button_link) and use that in the button code. Then each product can have its own link.

Eg:

<a href="{{ product.metafields.custom.custom_button_link }}" class="onhow-custom-btn">
Custom Button
</a>

Then you just enter a different link for each product in the product admin.