GIFT CARD PRODUCT PAGE ISSE - VALUE VARIANT DISPLAY

Topic summary

A Shopify store owner is experiencing a display issue with their gift card product page where variant selector options appear as horizontal bars instead of showing the actual values ($50, $100, etc.).

The Problem:

  • Gift card variants display incorrectly as bars rather than price values
  • Other products on the same store display variants correctly (e.g., size options on apparel)
  • Issue is specific to the gift card product template

Proposed Solution:
One user suggested adding CSS code targeting .ProductForm__Label with properties for display, margin, font-size, and text-transform. However, this appears to be incomplete or potentially incorrect, as it only addresses label styling rather than the variant value display itself.

Current Status:
The issue remains unresolved. The suggested CSS snippet may not fully address the root cause, which likely involves how variant values are being rendered in the Liquid template or how the theme handles gift card-specific variant displays.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.

Hi Shopify community,

I’m having an issue with my current GIFT CARD product page. Like you can see here: https://www.hiroclark.com/products/gift-card?variant=37780863811763

The variant selector options should display $50 / $100 / etc. instead of just these weird horizontal bars.

Basically like other products from my store: https://www.hiroclark.com/products/athletic-club-ls-tee?variant=45318620643560

Let me know if someone can help! :slightly_smiling_face:

Thanks,

Antoine

.ProductForm__Label {

  1. display: block;
  2. margin-bottom: 5px;
  3. font-size: 12px;
  4. text-transform: uppercase;

}

1 Like