Qstomizer documentation

How to add the "Customize" Button using custom page builders apps.

IMPORTANT:
This tutorial explains a general method for adding custom Liquid code using third-party Custom Page Builder Apps.

Please note that each app works differently, depending on how its developer has implemented it. We are not responsible for the behavior or functionality of any third-party app. If you have questions or need help, you must contact the developer of the specific app you are using.

If you require assistance or are unsure how to apply these changes, please reach out directly to the app’s developer. We do not provide free support or troubleshooting for third-party applications.

Usually, Custom Page Builder (CPB) apps cannot work with App Blocks or App Embeds. In these cases, if you want to add the “Customize” button to a product or page, you must insert custom Liquid code and JavaScript.

To add your own custom Liquid code and JavaScript, locate the “Custom Code” block within your CPB app and add it to the page. This block is typically found in the Advanced Blocks section. If you cannot find it, please refer to the app’s documentation or contact the app’s support team.

- In the code Editor of the block, copy and paste the code that appears in Option A or B in the HTML/Liquid section:

Option A:

Click on "Copy Option A Code" button to copy the full code.


{% assign order_id = 0 %}
{% assign customizebutton = false %}
{% assign noaddtocart = false %}
{% if product.metafields.qstomizer %}
  (...)
{% endif %}

{% assign order_id = 0 %}
{% assign customizebutton = false %}
{% assign noaddtocart = false %}
{% if product.metafields.qstomizer %}
    {% assign qmeta = product.metafields.qstomizer %}
    {% if qmeta.qsmzorderid %}{% assign order_id = qmeta.qsmzorderid %}{% endif %}
    {% if qmeta.customizebutton %}{% assign customizebutton = qmeta.customizebutton %}{% endif %}
    {% if qmeta.noaddtocart %}{% assign noaddtocart = qmeta.noaddtocart %}{% endif %}
{% endif %}

{% if product.tags contains 'qstomizer-product-tag' or product.description contains 'qstomizer-product-tag' %}
  {% assign customizebutton = true %}
{% endif %}

{% if product.tags contains 'qstomizer-noaddtocart-tag' or product.description contains 'qstomizer-noaddtocart-tag' %}
  {% assign noaddtocart = true %}
{% endif %}

{% unless product.content contains 'qstomizer-product-tag' %}
{% if customizebutton %}

<div>
  <button id="qstomizer-product-button-custom"
          class="button button--full-width button--secondary">
    {% capture customizeText %}
      {% case request.locale.iso_code %}
        {% when 'fr' %}Personnaliser
        {% when 'it' %}Personalizza
        {% when 'de' %}Anpassen
        {% when 'zh','zh-TW' %}定制
        {% when 'es' %}Personalizar
        {% when 'ja' %}カスタマイズ
        {% when 'hi' %}अनुकूलित करें
        {% when 'ko' %}사용자 정의
        {% when 'th' %}ปรับแต่ง
        {% when 'id' %}Sesuaikan
        {% else %}Customize
      {% endcase %}
    {% endcapture %}
    <span>{{ customizeText | strip }}</span>
  </button>
</div>

<style>
  #product-add-to-cart,
  #qstomizer-product-button {
    display: none;
  }
  .groups-btn .groups-btn-tree {
    gap: 20px;
    align-items: center;
    margin-bottom: 10px;
  }
  .groups-btn .groups-btn-tree a {
    margin-bottom: 0 !important;
  }
</style>

<input name="qstomizer-product-id" type="hidden" value="{{ product.id }}">

<script>
(function () {

  function findAncestor(el, selector) {
    while (el && el.parentElement) {
      el = el.parentElement;
      if (el.matches(selector)) return el;
    }
    return null;
  }

  const btn = document.querySelector('#qstomizer-product-button-custom');
  if (!btn) return;

  btn.addEventListener('click', function (event) {
    event.preventDefault();
    event.stopPropagation();

    let form = findAncestor(btn, 'form');
    if (!form || !form.reportValidity()) {
      const possibleForms = document.querySelectorAll('form[action*="cart/add"]');
      if (possibleForms.length === 0) return;
      form = [...possibleForms].find(f => f.reportValidity && f.reportValidity());
      if (!form) return;
    }

    let variantInput = form.querySelector('input[name="id"]');
    let variantId = variantInput ? variantInput.value : null;

    const pid = document.querySelector('input[name="qstomizer-product-id"]').value;
    let url = '/apps/qstomizer/?qstomizer-product-id=' + pid;
    if (variantId) url += '&variantid=' + variantId;

    const originalAction = form.action;
    form.action = url;

    window.onpageshow = function (event) {
      if (event.persisted) form.action = originalAction;
    };

    form.submit();
  });

})();
</script>

{% endif %}
{% endunless %}

Just in case the code does not work in your theme, use the code that appears in Option B.

Option B:

Click on "Copy Option B Code" button to copy the full code.


{% assign order_id = 0 %}
{% assign customizebutton = false %}
{% assign noaddtocart = false %}
{% if product.metafields.qstomizer %}
  (...)
{% endif %}


{% assign order_id = 0 %}
{% assign customizebutton = false %}
{% assign noaddtocart = false %}

{% if product.metafields.qstomizer %}
    {% assign qmeta = product.metafields.qstomizer %}
    {% if qmeta.qsmzorderid %}{% assign order_id = qmeta.qsmzorderid %}{% endif %}
    {% if qmeta.customizebutton %}{% assign customizebutton = qmeta.customizebutton %}{% endif %}
    {% if qmeta.noaddtocart %}{% assign noaddtocart = qmeta.noaddtocart %}{% endif %}
{% endif %}

{% if product.tags contains 'qstomizer-product-tag' or product.description contains 'qstomizer-product-tag' %}
  {% assign customizebutton = true %}
{% endif %}

{% if product.tags contains 'qstomizer-noaddtocart-tag' or product.description contains 'qstomizer-noaddtocart-tag' %}
  {% assign noaddtocart = true %}
{% endif %}

{% unless product.content contains 'qstomizer-product-tags' %}
{% if customizebutton %}

<div>
  <a href="/apps/qstomizer/?qstomizer-product-id={{ product.id }}" id="qstomizer-product-button-custom" class="button button--full-width button--secondary">
    {% capture customizeText %}
      {% case request.locale.iso_code %}
        {% when 'fr' %}Personnaliser
        {% when 'it' %}Personalizza
        {% when 'de' %}Anpassen
        {% when 'zh','zh-TW' %}定制
        {% when 'es' %}Personalizar
        {% when 'ja' %}カスタマイズ
        {% when 'hi' %}अनुकूलित करें
        {% when 'ko' %}사용자 정의
        {% when 'th' %}ปรับแต่ง
        {% when 'id' %}Sesuaikan
        {% else %}Customize
      {% endcase %}
    {% endcapture %}
    <span>{{ customizeText | strip }}</span>
  </a>
</div>

<style>
  #product-add-to-cart,
  #qstomizer-product-button {
    display: none;
  }
  .groups-btn .groups-btn-tree {
    gap: 20px;
    align-items: center;
    margin-bottom: 10px;
  }
  .groups-btn .groups-btn-tree a {
    margin-bottom: 0 !important;
  }
</style>

{% endif %}
{% endunless %}

You can apply your own styles to the button by using the id #qstomizer-product-button-custom.

Remember to SAVE and Publish the page before test any option.

If you apply the code in option A or B and the "Customize" button does not appear in the product page or does not work as expected, feel free to contact us.
Please note: Code modifications are not included in any free service. Depending on the complexity and scope of the required changes, additional fees will apply.

How to add the "Customize" Button using custom page builders apps.

Option A:

Option B:

Get Support