Personalize button doesn't show

Your_Bag_Store
Excursionist
26 0 7

I'm hoping someone could help me out.  I added 3 pieces of jewlery which can be personalized.  There is a button which is suppose to appear just above the add to cart button.  I asked someone to take a look on their computer and it was there.  I haven't been able to see it since.  I reached out to Printful and they said there is probably something in my theme hidding it.  One of the produce pages is https://www.lrmapparel.com/products/engraved-silver-bar-chain-bracelet  I'm using the Retina theme.  I don't know much about coding so I could really use some insight.  Thanks in advance.

Replies 26 (26)

Your_Bag_Store
Excursionist
26 0 7

I am losing sales because of this and I can not figure out how to solve this issue.  I reached out to Printful and all they said was they supply the Personalize Design button (which links into their design page) and to see if someone on Shopify  can help.  It seems to be showing on Internet Explorer but not in Google Chrome, Firefox or anything on a mobile.

 

Tx
Excursionist
25 1 4

I am having the same issue. I use Out of the sandbox's theme Turbo. Can someone have solution to this?

This is the product form, where the Personalize Design button should reside.

{% if section.settings.show_payment_button %}
  {% assign show_payment_button = true %}
{% elsif show_payment_button_quickshop %}
  {% assign show_payment_button = true %}
{% else %}
  {% assign show_payment_button = false %}
{% endif %}

{% assign variant = product.selected_or_first_available_variant %}

<div class="clearfix product_form init smart-payment-button--{{ show_payment_button }} {% if product.variants.size > 1 or product.options.size > 1 %}product_form_options{% endif %} product_form--{{ settings.product_form_style }}"
      id="product-form-{{ product.id }}"
      data-product-form
      data-money-format="{{ shop.money_format }}"
      data-shop-currency="{{ shop.currency }}"
      data-select-id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}"
      data-enable-state="{% if template contains 'product' %}true{% else %}false{% endif %}"
      data-product="{{ product | json | escape }}"
      {% if settings.limit_quantity or settings.display_inventory_left %}
        data-variant-inventory='[{%- for v in product.variants -%}{"id":{{v.id}},"inventory_quantity":{{v.inventory_quantity}},"inventory_management":"{{v.inventory_management}}","inventory_policy":"{{v.inventory_policy}}"}{% if forloop.last == false %},{% endif %}{%- endfor -%}]'
      {% endif %}
      data-product-id="{{ product.id }}"
      >
  {% form 'product', product %}

  {% if product.options.size > 1 %}
    <div class="select">
      <select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
        {% for v in product.variants %}
          <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
        {% endfor %}
      </select>
    </div>
  {% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
    <div class="select">
      <label>{{ product.options[0] }}</label>
      <select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
        {% for v in product.variants %}
          <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
        {% endfor %}
      </select>
    </div>
  {% else %}
    <input type="hidden" name="id" value="{{ variant.id }}" />
  {% endif %}

  {% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
    <div class="swatch_options">
      {% for option in product.options %}
        {% include 'product-swatch' with option %}
      {% endfor %}
    </div>
  {% endif %}

  {% if product.available %}
    {% if settings.display_inventory_left %}
      <div class="items_left">
        {% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
          {% capture items_left_text %}
            {% if variant.inventory_quantity == 1 %}
              {{ 'products.product.items_left_count.one' | t }}
            {% else %}
              {{ 'products.product.items_left_count.other' | t }}
            {% endif %}
          {% endcapture %}
          {% if variant.inventory_quantity <= settings.inventory_threshold %}
            {{ variant.inventory_quantity }} {{ items_left_text }}
          {% endif %}
        {% endif %}
      </div>
    {% endif %}

    <div class="purchase-details">
      {% if settings.display_product_quantity %}
        <div class="purchase-details__quantity product-quantity-box">
          <label for="quantity">{{ 'products.product.quantity' | t }}</label>
          <span class="ss-icon product-minus js-change-quantity" data-func="minus"><span class="icon-minus"></span></span>
          <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" {% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}max="{{ variant.inventory_quantity }}"{% endif %} />
          <span class="ss-icon product-plus js-change-quantity" data-func="plus"><span class="icon-plus"></span></span>
        </div>
      {% endif %}
      <div class="purchase-details__buttons purchase-details__spb--{{ show_payment_button }}">
        {% if settings.cart_action == 'reload_page' %}
          <input type="hidden" name="return_to" value="back" />
        {% elsif settings.cart_action == 'redirect_checkout' %}
          <input type="hidden" name="return_to" value="/checkout" />
        {% endif %}

        {% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}{% endcapture %}
        <button type="{% if settings.cart_action == 'ajax' %}button{% else %}submit{% endif %}" name="add" class="{% if settings.cart_action == 'ajax' %} ajax-submit {% endif %}action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
          <span class="text">{{ add_to_cart_label }}</span>
          <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark">
            <path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
          </svg>
        </button>
        {% if show_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      </div>
    </div>
  {% endif %}
{% endform %}
</div>

@KarlOffenberger 

@Jason

 

NZ
New Member
5 0 0
Hi TX
I have just figure out that when I'm using another Theme ( Debut ) it works fine
However my existing theme is not compatible and the personalization tool button will not show up
Tx
Excursionist
25 1 4
Hey, I know its frustrating. I can help you with that, not sure how it will work out. I’m not an expert, but I can help you as a courtesy. I need to see the code and the theme. If you give me your shop access, I will try my best.
Tx
Excursionist
25 1 4

Hey I cannot say how I fixed it unless you hire expert or something. But I will share with you. I don't know if it works for all browsers and all but it worked for me. Basically there are couple of things to consider. I need to see the code of your theme. If you know some basic coding skills it should be fine. First of all, make sure that it is not the code that is affecting the personalize design button. Are you using Printful app? If it is then I can help you. You may have known already that in the product description section (html section) there is a specific code from printful that actually tells the theme to have button. Well if you have accidentally deleted that code while re-writing product description then, it is a very easy fix with just one line of code. But if it is not the case, then you have to change few codes in your theme, which is custom. I am guessing on the product template or product-form template, depending upon where your button resides on your specific theme.

Let me know. If you figured it out yourself the first problem regarding product description, then wala..congrats.

NZ
New Member
5 0 0
Yes ok it's fine
I just need your email address to send the invitation access plz

Tx
Excursionist
25 1 4

I solved this problem btw. Let me know if you need help.

PurT
Visitor
1 0 0

Hi there, 

I got the same problem that there is no "Personalize" button on my product page since I installed Printful. Printful support team was not sure about the issue.

Can you show me how to make "Personalize" appear on product page?

Thank you

rushawk
Visitor
1 0 0

I too have just started using teelaunch and seem to be having this issue. It works in Firefox browser but not chrome and also on mobile so guessing it's browser issue. Any tips would be welcome, thank you

NZ
New Member
5 0 0
Dear Tx
Sorry how did you fix this issue ?
I'm having the same issue
lilysdressersho
Visitor
1 0 0

Hi. I am having a very similar issue to this.

Using a pagebuilder the "personalize design" button disappears. How did you solve it?

Do you know the code that is added to the theme so we can manually add it to another place?

Thanks.

NZ
New Member
5 0 0
Plz share me back the code if you get it
generationt
Visitor
1 0 0

Hi

Would you be able to assist me with this.  Having the same issue 

CharlotteKuest
Visitor
1 0 0

Does anyone found the answer?

I can see the button on desktop but not on mobile.

I am using the Debute Theme.
Would love to use this feature, but my traffic is 99% mobile.

luksy
Tourist
3 0 1

So care to share my friend?

luksy
Tourist
3 0 1

So I will Keep this for future use for everyone ... 

I dont know why TX made a big fuss or a big deal about it and refused to share the code with anyone...

If you are looking here you go

Paste this code next to your Add to Cart button or where ever u want in the product page

 

        {% if product.metafields.printful.customisable %}
        <button type="button" class="btn button" id="pfCustomizeProductBtn">Personalize design</button>
        {% endif%}

love and peace.

Omar.

www.lovepeacerebellion.com

Tone
Visitor
2 0 0

@luksy thank you omar !

where do I have to place the code? 

 

TerryArmstrong
Visitor
1 0 1

I hope that you found it out yourself. If not, then I hope that it helps.

(I'm using the Brooklyn Theme btw)

Go to Sections -> product-template.liquid -> (If you want to add the button below the "Add To Card" Button then this is for you) Go to line 230 - 239 and paste the code from Omar below:

<div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
                <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
                  <span class="btn__text">
                    {% if current_variant.available %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% else %}
                      {{ 'products.product.sold_out' | t }}
                    {% endif %}
                  </span>
                </button>


If you followed all steps, then your code should look like this (lines 230 - 243):

 

<div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
                <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
                  <span class="btn__text">
                    {% if current_variant.available %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% else %}
                      {{ 'products.product.sold_out' | t }}
                    {% endif %}
                  </span>
                </button>
                <!-- Terry made some changes below -->
                {% if product.metafields.printful.customisable %}
			        <button type="button" class="btn button" id="pfCustomizeProductBtn">Personalize design</button>
        		{% endif%}


(I made a comment above the changes. Therefore I can find it easier if I need to change or completely delete it)

 

Now, your "Add To Cart" and "Personalize Design" Button will be next to each other. You need to add some space between them (if you want to, of course):

Go to Assets -> theme.scss.liquid -> Paste the following code at the bottom of the whole file:

#pfCustomizeProductBtn {
  width: 100%;
  margin-top: 5px;
}

 

That's it. And that's what worked for me so far 🙂 

AkA1905
New Member
7 0 0

Terry, thanks a lot for your input.
You proved once more why communities exist, if we need to hire an coding expert every time we would need an advice or a piece of code, we wouldn't have communities/forums.

With the code you shared, I'm finally able to see the button now (the button doesn't work when I switch to another language but ok).

-> What I would like to do now, is to get rid of the "add to cart" and "Buy now" buttons when a customization is available (since in my case it doesn't make sense to add a customizable item into the cart straight into the carte without customizing it)

I tried some editing but didn't manage to write the conditions properly, which messes up the pages.

Any help is welcome!

Thanks

Aka.

AkA1905
New Member
7 0 0

Just to reply to my own question for future reference, here is the code.

I basically just put the "{% if product.metafields.printful.customisable %}" condition above all and it made the trick.

<div class="product-form__controls-group product-form__controls-group--submit">
<div class="product-form__item product-form__item--submit
{%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
{%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
>
{% if product.metafields.printful.customisable %}
<button type="button" class="btn button" id="pfCustomizeProductBtn">Personalize design</button>
{% else %}
<div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
{% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endif%}
</div>
{% endform %}
</div>

 

DreamsBeast
Visitor
2 0 0

where exactly? 

NSEImports
Excursionist
33 0 10

If you can add it, you would need to edit your product.liquid file (varies by theme as to exact name) but unless you are happy modifying your code it's best to leave it.

Unless others can chip in with any success stories my attempts ended without any luck, after a long chat with my theme developer and Printful, it appears that some themes specifically will just not work as there needs to be java snippets to carry everything through the checkout process. In other cases the integration is just broke, this is because modern browsers try to prevent cross site/domain traffic to protect everyone.

Doing many things all day everyday
Alecos
Visitor
1 0 0

Sir, you are the best! I don't have words to express how useful and educational this was. I managed to fix this in my Craft theme. There are several things different, but the philosophy is the same.

 

I'll do my part and give instructions on how to implement this for Craft theme users (Dec. 2022)

 

Instructions (below the Add to Cart button):

 

  1. Go to Sections -> main-product.liquid-> Line 608
    • In that line, the div for product buttons starts
  2. Navigate to Line 636 where the button closes (</button>)
  3. Below the above line paste this code
<!-- printful test -->
 {% if product.metafields.printful.customisable %}
   <button type="button" class="btn button" id="pfCustomizeProductBtn">Personalize design</button>
 {% endif%}
<!-- printful test end -->

 

If done correctly, your code should look like this after Line 636

  </button>
<!-- printful test -->
  {% if product.metafields.printful.customisable %}
    <button type="button" class="btn button" id="pfCustomizeProductBtn">Personalize design</button>
  {% endif%}
<!-- printful test end -->
  {%- if block.settings.show_dynamic_checkout -%}
    {{ form | payment_button }}
  {%- endif -%}
</div>

 

To style your button in order to match the others go to

  1. Assets -> base.css
  2. Paste at the bottom of the file Terry's code
#pfCustomizeProductBtn {
  width: 100%;
  margin-top: 5px;
}

You can play around inside the brackets {} to get the desired results.

 

For me, the below code worked like a charm

}
#pfCustomizeProductBtn {
  width: 100%;
  margin-top: 0px;
  margin-bottom: 10px;
}

 

Καταγραφή.JPG

 

Terry! Thank you so much! Happy holidays!

Hipster
Visitor
1 0 0

@luksy 

Thanks for the assist with this issue.

I used your store to figure out how best to implement with my theme. I am still waiting a response from the Printful engineering team on how to implement when not using a default theme.

Cheers,

Ian
Hipster Collection 

NSEImports
Excursionist
33 0 10

Thanks @luksy for the code snippet, after a bit of mangling to wedge it into BoosterTheme I now have a button.

 

Not that it works quite right, FireFox brings up a big error about connecting to Printful (new Firefox anti scam/fake page/page hijack feature) then opens it in a new window, after that it appears as an overlay like it should but will not add any colour than the first to the cart 😞

 

Chrome just give us the sad face and refuses to connect when you click the button. So getting there ....

Doing many things all day everyday
DreamsBeast
Visitor
2 0 0

i need 

in dawn theme same problem