Liquid, JavaScript, themes, sales channels
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>
@Jason
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.
I solved this problem btw. Let me know if you need help.
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
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.
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.
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 🙂
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.
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>
where exactly?
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.
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):
<!-- 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
#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;
}
Terry! Thank you so much! Happy holidays!
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,
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 ....
i need
in dawn theme same problem
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024