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.
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.
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>
I solved this problem btw. Let me know if you need help.
3 Likes
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
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
Dear Tx
Sorry how did you fix this issue ?
I’m having the same issue
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.
Plz share me back the code if you get it
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
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.
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.
Yes ok it’s fine
I just need your email address to send the invitation access plz
Hi
Would you be able to assist me with this. Having the same issue
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.
So care to share my friend?
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.
1 Like
@luksy thank you omar !
where do I have to place the code?
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 
1 Like
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.