Fix Shopify Button Placement
Budget: $30 – $250 USD
What’s broken
The homepage GemPages Product List “Add to cart” buttons are rendering incorrectly. They’re oversized/misaligned because the generated button markup now includes extra content inside the button element.
Where
snippets/gp-section-600659991313646444-0.liquid
What I found
In the Product List item template, the actual <button> for Add to Cart contains more than just the label/icon.
For the regular Add to Cart button:
button starts around line 1114
inside that same button, there is:
cart icon
label
extra divider/icon block around 1164–1175
gp-product-price block around 1179–1206
button closes at 1212
For the Out of Stock button:
button starts around 1244
inside that same button, there is:
icon
label
extra divider/icon block around 1273–1284
gp-product-price block around 1288–1315
button closes at 1321
So right now the button is effectively built like:
[icon] [label] [separator] [price]
instead of just a normal CTA button.
What needs to be done
The homepage product card template needs to be restored so the Add to Cart button contains only the intended CTA content.
Developer ask
Please update the GemPages homepage Product List item template so that:
The Add to Cart button contains only:
optional cart icon
button label text
Remove the extra content currently injected inside the button:
the divider/icon block at 1164–1175
the gp-product-price block at 1179–1206
the divider/icon block at 1273–1284
the gp-product-price block at 1288–1315
If price needs to display, move it outside the <button> and render it as its own element in the product card.
Apply the same fix to both:
in-stock button
out-of-stock button
Verify there is no stray standalone button element left in the GemPages layout.
Important
This looks like a GemPages-generated snippet, so the real fix should be made in the GemPages template/editor, not only by editing the theme file directly, otherwise a future GemPages publish may overwrite the code.
Expected result
Each product card should render like:
image
title
price
normal pink Add to Cart button
Not:
image
title
price
broken CTA with extra price/separator content inside the button
You can send your developer this exact note:
Please fix the GemPages homepage Product List button template. In snippets/gp-section-600659991313646444-0.liquid, the Add to Cart and Out of Stock buttons have extra markup inside the <button> element, including a divider/icon block and gp-product-price. Please restore the CTA so the button contains only icon + label, and move any price display outside the button. The affected blocks are roughly lines 1164–1206 and 1273–1315. Please make the fix in GemPages/template source, not just theme code, so it persists after republish.
The homepage GemPages Product List “Add to cart” buttons are rendering incorrectly. They’re oversized/misaligned because the generated button markup now includes extra content inside the button element.
Where
snippets/gp-section-600659991313646444-0.liquid
What I found
In the Product List item template, the actual <button> for Add to Cart contains more than just the label/icon.
For the regular Add to Cart button:
button starts around line 1114
inside that same button, there is:
cart icon
label
extra divider/icon block around 1164–1175
gp-product-price block around 1179–1206
button closes at 1212
For the Out of Stock button:
button starts around 1244
inside that same button, there is:
icon
label
extra divider/icon block around 1273–1284
gp-product-price block around 1288–1315
button closes at 1321
So right now the button is effectively built like:
[icon] [label] [separator] [price]
instead of just a normal CTA button.
What needs to be done
The homepage product card template needs to be restored so the Add to Cart button contains only the intended CTA content.
Developer ask
Please update the GemPages homepage Product List item template so that:
The Add to Cart button contains only:
optional cart icon
button label text
Remove the extra content currently injected inside the button:
the divider/icon block at 1164–1175
the gp-product-price block at 1179–1206
the divider/icon block at 1273–1284
the gp-product-price block at 1288–1315
If price needs to display, move it outside the <button> and render it as its own element in the product card.
Apply the same fix to both:
in-stock button
out-of-stock button
Verify there is no stray standalone button element left in the GemPages layout.
Important
This looks like a GemPages-generated snippet, so the real fix should be made in the GemPages template/editor, not only by editing the theme file directly, otherwise a future GemPages publish may overwrite the code.
Expected result
Each product card should render like:
image
title
price
normal pink Add to Cart button
Not:
image
title
price
broken CTA with extra price/separator content inside the button
You can send your developer this exact note:
Please fix the GemPages homepage Product List button template. In snippets/gp-section-600659991313646444-0.liquid, the Add to Cart and Out of Stock buttons have extra markup inside the <button> element, including a divider/icon block and gp-product-price. Please restore the CTA so the button contains only icon + label, and move any price display outside the button. The affected blocks are roughly lines 1164–1206 and 1273–1315. Please make the fix in GemPages/template source, not just theme code, so it persists after republish.