How to make back in stock button occupy full width of row? (same as normal button)

1 reply
77 views

I’m using the Shopify Horizon theme and I’m having trouble making the back in stock button occupy the rest of the row, the way that a normal add to cart button does (see below screenshots). How do I make the back in stock button inherit the styling of a normal add to cart button?

This is what it’s looking like right now

ChatGPT told me to add the below but I still am struggling with the same result.

Thank you for your help!

<div {{ block.shopify_attributes }} style="--add-to-cart-font-case: {{ settings.button_text_case }}; width:100%;">
  {% if can_add_to_cart %}
    {%- render 'add-to-cart-button',
      id: id,
      class: class | append: ' button--full-width',
      can_add_to_cart: can_add_to_cart,
      product: closest.product,
      add_to_cart_text: add_to_cart_text
    -%}
  {% else %}
    <!-- Placeholder that Klaviyo replaces -->
    <button type="button"
      class="button button--full-width klaviyo-bis-trigger"
      data-bis="true">
    </button>
  {% endif %}
</div>

List growth & forms

whereisjadAnswer

Expert Problem Solver IV

@nueueave according to back in stock snippet instructions here

for the section specific for the trigger, you want to reference a CSS class with the styling desired. By default it is button but you change to something else:

 trigger: {      product_page_text: "Notify Me When Available",      product_page_class: "button",      product_page_text_align: "center",      product_page_margin: "0px",      replace_anchor: false    },

Hope this helps.

— Jad A | Klaviyo + Shopify + API Integrations Specialist • 7+ Years' Experience Helping with new setups, seamless integrations, and API connections—happy to connect. http://ja-technical-consulting.xyz/