If your theme is not compatible with the Shopify theme builder you can still add the "Request Quote" button by manually adding a code snippet.

Go to Online Store -> Themes and edit the code for the theme that you are using:



Next, look for the Snippets folder, expand it, and click Add a new snippet and create a new snippet named quotify-button:



Now, copy and paste the following code into the code editor:

{% liquid
    assign quotify_enabled = shop.metafields.quotify.enabled
    assign quotify_shop_secret = shop.metafields.quotify.shop_secret
    assign quotify_shop_id = shop.metafields.quotify.shop_id
    assign quotify_hide_cart = shop.metafields.quotify.hide_add_to_cart
    assign quotify_hide_price = shop.metafields.quotify.hide_price
    assign quotify_logged_in_customers_only = shop.metafields.quotify.logged_in_customer_only
    assign quotify_market_selection = shop.metafields.quotify.market_selection.value
    assign quotify_product_in_collection = 0

    assign quotify_show = 0

    # Show button for all products if no selection is active
    if shop.metafields.quotify.mode != 'selection'
        assign quotify_show = 1
    endif

    if shop.metafields.quotify.mode == 'selection'
        for collection in product.collections
            if collection.metafields.quotify.enabled == 1 and quotify_product_in_collection == 0
                assign quotify_product_in_collection = 1
            endif
        endfor

        # Show button if selection is active and product is within selection
        if product.metafields.quotify.enabled == 1
            assign quotify_show = 1
        endif

        # Show button if selection is active and product is within collection
        if quotify_product_in_collection == 1
            assign quotify_show = 1
        endif
    endif

    # If a market selection is made we hide the button unless the current market is active
    if quotify_market_selection.size > 0 and quotify_show == 1
        assign quotify_show = 0
        for market in quotify_market_selection
            if market == localization.market.id
                assign quotify_show = 1
            endif
        endfor
    endif

    if quotify_show == 1 and quotify_logged_in_customers_only == 1 and customer == blank
        assign quotify_show = 0
    endif
%}

{% if quotify_enabled == 1 %}
    {% if quotify_show == 1 %}
        <button data-quotify data-product="{{ product | json | escape }}"
                data-checksum="{{ product | json | prepend: quotify_shop_secret | sha256 }}" data-shop="{{ quotify_shop_id }}"
                data-variant="{{ product.selected_or_first_available_variant.id }}"
                type="button"
                class="quotify-request-quote-btn">
            Request Quote
        </button>
    {% endif %}

    {% if quotify_show == 1 %}
        {%- style -%}
            {% if quotify_hide_cart == 1 %}
                form[action^="/cart/add"] [data-shopify="payment-button"],
                form[action^="/cart/add"] button[type="submit"],
                .quotify-hide-cart-{{ product.id }} {
                display: none !important;
                }
            {% endif %}
            {% if quotify_hide_price == 1 %}
                .quotify-hide-price-{{ product.id }} {
                display: none !important;
                }
            {% endif %}
        {%- endstyle -%}
    {% endif %}
{% endif %}

Now for the tricky part, you need to look for the template that contains your product form. This is different for most themes but it will often be something like main-product.liquid, product-template.liquid, product.liquid. What you are looking for is something that starts with {%- form 'product', this marks the starting point of your product form. For example:

{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  {{ form | payment_terms }}
  {% render 'selling-plans' %}
{%- endform -%}

Now you want to add the button ({% render 'quotify-button' %}) between the form tags:

{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  {{ form | payment_terms }}
  {% render 'quotify-button' %}
  {% render 'selling-plans' %}
{%- endform -%}

And that should do the trick. The button should now be visible on your product page (based on your Quotify settings).

Theme Specific Integrations

Turbo Theme / Portland

To hide the price open snippets/price-ui-templates.liquid and find <span class="money" data-price>, next add the following class: quotify-hide-price-{{ product.id }}:

<span class="money quotify-hide-price-{{ product.id }}" data-price>

To hide the add to cart button open snippets/product-form.liquid and look for: <div class="product_form">, next add the following class: quotify-hide-cart-{{ product.id }}.

To hide the price on the product collection cart open snippets/product-info.liquid and look for <span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}">, next add the quotify-hide-price-{{ product.id }} class here as well:

<span class="price quotify-hide-price-{{ product.id }} {% if product.compare_at_price_max > product.price %}sale{% endif %}">

Updated on: 09/02/2024