Hey guys.
So, I am hosting car shows for which I have to personally check a picture of the wanna-be participant’s vehicle to approve it and then proceed to reserving a spot for him/her.
I am looking for a way for them to click to buy a ticket, fill out their credit card info or apple pay etc, be prompted to submit a picture (and maybe answer some checkboxes about the car for exp “is it modified?”), and only be charged if I accept.
Tried to explain this as best as I can but if you need any more information let me know.
Thank you guys so much I really hope I can work this out with some support!!!
The simplest solution would be to set your payment method to “Authorize only” and capture payments manually when you approve participation.
Picture upload and all kind of checkboxes can be added on the product page as so called “line item properties” – some themes support it out of the box, or can be done as Custom liquid or use and app to implement.
https://help.shopify.com/en/manual/payments/payment-authorization
Unless your on a PLUS enterprise plan you need to do that before checkout with line-item-properties as a theme customization, or entirely AFTER checkout such as with shopify-forms and metaobjects; though really should use both to bookend the process. Plus plans can use in-checkout checkout extensions.
Here’s a tutorials for VINTAGE themes the code savvy can adapt https://community.shopify.com/t/product-pages-get-customization-information-for-products/7588, https://community.shopify.com/t/cart-use-cart-attributes-to-collect-more-information/7495
If you have an MODERN OS2.0 theme and need such customization , or the process setup/consulted on, you can reach out to me for services.
Tim’s suggestion to use “Authorize only” is the right call for the payment side. Go to Settings > Payments > click Manage on your payment provider, and change the payment capture method to “Manual”. This means when someone checks out, their card gets authorized (hold placed) but you don’t actually charge them until you manually capture it. If you reject someone, you just void the authorization instead of capturing.
For the picture upload and checkboxes, you can do this with line item properties right on the product page. If you’re on a free Shopify theme (Dawn or similar OS 2.0 theme), you can add a Custom Liquid block to your product page template. Go to Online Store > Themes > Customize, navigate to your car show product page, and add a “Custom Liquid” block inside the product information section. Paste something like this:
<div style="margin: 1em 0;">
<label for="car-photo">Upload a photo of your vehicle (required):</label>
<input type="file" id="car-photo" name="properties[Car Photo]" accept="image/*" required>
<div style="margin-top: 1em;">
<label>
<input type="checkbox" name="properties[Modified]" value="Yes">
Is your vehicle modified?
</label>
</div>
<div style="margin-top: 0.5em;">
<label>
<input type="checkbox" name="properties[Custom Paint]" value="Yes">
Custom paint or wrap?
</label>
</div>
<div style="margin-top: 0.5em;">
<label for="car-details">Vehicle year, make, and model:</label>
<input type="text" id="car-details" name="properties[Vehicle Details]" required style="width: 100%; padding: 0.5em;">
</div>
</div>
Anything with name="properties[Whatever]" becomes a line item property that shows up on the order in your admin. The file upload for the photo will attach the image URL to the order so you can review it.
One caveat on the file upload: Shopify’s native line item file upload works but the file gets uploaded to Shopify’s CDN and the link is attached to the order. Make sure you review and capture/void payments promptly since authorization holds typically expire after 7 days (or whatever your payment provider’s window is). If you don’t capture within that window the hold drops off and you’d need to contact the customer again.
Your workflow becomes: order comes in with photo attached, you review the photo in the order details, then either hit “Capture payment” if approved or “Cancel order” and void the authorization if not.
Brother… Thank you so so so much. Will try this ASAP.
Hey. I have tried this but came across something that’s a little bit cleaner…
Only without the check boxes which is okay once the picture is uploaded I can tell by my own. Small world here in my country…anw…
.file-upload-container {display: flex;align-items: center;}.file-name {margin-left: 10px;font-style: italic;}
ADD A PICTURE OF YOUR VEHICLE
Upload File [REQUIRED]
No file chosen
Please upload a picture of your vehicle.
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.product-form__submit').addEventListener('click', function(event) {
const inputFile = document.getElementById('file-your-label');
if (!inputFile.files.length && inputFile.required) {
document.getElementById('errorMessage').style.display = 'block';
}
});})</script>
<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>
here is the code.
I attached a screenshot of the product page too for your reference.
However, only the “ADD TO CART” button requires a file to be uploaded. The “Buy Now/Apple Pay/Pay with Paypal” button below that still works even when a file hasn’t been downloaded.
You see to know what you’re doing so is there anything I can add to the code to fix that?
You can remove those buttons (theme setting) – payment methods will still be available in checkout.
I’m trying to avoid that because a lot of people find that confusing apparently and it’s easier for general customer experience. I am looking for a way to make set it to prompt the message like it does when you try to add to cart without uploading a file
There’s easy and there’s what works.
It’s either remove the accelerated buttons, or hide them until after a file is uploaded, or put a click blocking overlay/design-element over those buttons ; use pointer-events:none in CSS for such things.
Orsuppress their js but this can come with it’s own problems if they are prevented from loading when the page loads up.
I suck at code is there a way to edit the code I sent or just let me know what to add to it?
Sorry I’m really bad at this stuff. Appreciate your help.
If you can see the code, for exp when a customer click the “add to cart” button without uploading an image, a prompt appears telling the customer he/she needs to upload a file to proceed.
When a file is uploaded the function of the button is as normal
If we could do the same for the accelerated buttons that would be perfect, otherwise, hiding them until a file is uploaded is the next-best option.
that’s just guidance , it’s work to do the full implementation for you.
Reach out for services if it’s outside your skillset.
Hey yes I understand you’re absolutely right. Thank god I actually did figure out a way and finally did it. Thank you!!
