Klaviyo back in stock button size , style problem

Shopify Discussion

Topic summary

A user is experiencing styling issues with a Klaviyo back-in-stock button on their Shopify store. They’ve successfully implemented the button functionality but cannot properly adjust its width (currently 100%) and border-radius (11px) to match their site’s design.

Current situation:

  • The button ID has been identified via Chrome’s inspect element: backInStockButton
  • Custom CSS attempts in theme customization haven’t resolved the alignment issue
  • An attached screenshot shows the styling problem

Proposed solutions:

  • Community members requested the store URL and password for specific troubleshooting
  • One suggestion involves placing the Klaviyo button inside the <div class="product-form__buttons"></div> element, which would automatically handle proper sizing (requires coding knowledge)
  • Alternative recommendation to use a dedicated back-in-stock app (like STOQ) that handles styling automatically and can sync with Klaviyo

Status: The discussion remains open, awaiting either the store URL for direct assistance or the user’s decision on implementation approach.

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

Hello everyone,
I have copied Klayvio back in stock code and working; the main problem is the button size and style. button width: 100%;
border-radius: 11px;
I want to change this value.I have been able to find out the button ID by inspecting the element in Google Chrome.
Meld mij wanneer het weer beschikbaar is./button>
I want to change it properly so it aligns with my website button. I have used code

@media (min-width: 1000px){ .product__info-wrapper .product-form .product-form__buttons{ max-width: 65% } }
in theme customization—sitting—Product page - custom CSS.

How we can find the button ID and style option to change. It will be a great help for me if you can share the solution.
Thank you

Screenshot_1.png
Screenshot_1.png1895×546 95.8 KB

2

Hey @iftekhirul if you share store URL and password as well then it would you easy to guide you.

3

@iftekhirul Do you have a product page or store URL we can look at? The best solution is actually placing the Klaviyo button inside the

element. This will automatically resize the button correctly. It requires some coding know-how, but it’s do-able! :slightly_smiling_face:

Alternatively, you can install a back in stock alerts app like ours - STOQ - and we’ll automatically handle it for you. You can set up our app to sync visitor data & trigger back in stock alerts through Klaviyo too, so you get the best of everything.