Have you ever wanted to give your customers the ability to upload information for customization of the items they purchase? Now you can offer this option for free, with this Shopify tutorial for beginners 2021. Customizing products has never been easier with this minor tweak to your code.
Alternatives to DIY
To give your shoppers customizable options, there are plug-ins you can use, such as the Bold Product Options alternative or Infinite Options Shopify. However, you must pay a monthly subscription for these apps. Bold starts at $20 per month, while Infinite Options costs $8 a month.
Ecomexperts has an Infinite Product Options Shopify tutorial on how to use Infinite Options Shopify. The Infinite Options Shopify tutorial also reviews the app and its best features. If you’re interested in how to use Infinite Product Options Shopify, click here for more information.
Upload Custom Files to Product Page Shopify
Your customers will be able to upload photos to personalize the products they buy from your Shopify store. Give them the option to customize bags, shirts, hats, and more. For custom product options Shopify, read this tutorial.
Edit your theme code to collect customization information for products
You can edit your theme's code by creating an alternate product page template that includes custom form fields, or line item properties. You can then apply your new template to any product for which you want to collect customization information from customers.
Create a template that includes line item properties
To create a new product page template:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Templates directory, click Add a new template.
- Choose product from the drop-down menu, and name the template customizable:
- Click Create template. This creates a copy of your product.liquid template called product.customizable.liquid. The new file will open in the code editor.
-
Find the following line of code:
Replace it with:
{% section 'product-template' %}
{% section 'product-customizable-template' %} - Click Save.
- In the Sections directory, click Add a new section.
- Name your new section file product-customizable-template. Click Create section. Your new file will open in the code editor.
- Delete all of the default code so that the file is empty. Copy all of the content from your product-template.liquid file (in the Sections directory), and paste it into your new product-customizable-template file.
- Click Save.
Custom Upload Image Field on Shopify
To add custom form fields to your template:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Sections directory, click product-customizable-template.liquid.
- Find the code type="submit" in the file. This is part of the code for the Add to cart button. On a new line above the block of code that contains the Add to cart button, paste the following code.
Click Save.
To make the new form fields appear on product pages, you need to set your customizable products to use the new product-customizable-template.liquid template that you created.
Apply your new template to a product
To apply a template to a product:
- From your Shopify admin, go to Products > All products.
- Click the name of the product that will use your new template.
- In the Theme templates section, choose product.customizable from the Product template menu.
- Find the code type="submit" in the file. This is part of the code for the Add to cart button. On a new line above the block of code that contains the Add to cart button, paste the following code.
<p class="line-item-property\_\_field"> <label for="custom\_photo">Photo (JPG or PNG)</label> <input required id="custom\_photo" type="file" name="properties\[Photo\]"> </p> - Click Save.
The custom form fields that you created will now appear on that product's page. Repeat the steps to enable the template on multiple products.
If you can't see images with orders:
If you can't see your files with the order, that means that your theme is using Ajax in your cart.
To disable these cart types and change your cart type, please go to "Customize theme", then navigate to "Cart Page" (or a similar section), change "Cart type" to "Page". On some themes you will need to click on Theme Settings and choose Add To Cart Notification. Uncheck "Show notification when item is added to cart" and click on Save.
Drawer, slide out, or modal cart types are incompatible with option pricing.
Custom Product Options Upload File
Now you know how to upload a file field on the product page. Your customers can personalize select items in your store by sending you a file. You can save yourself quite a bit of cash by not relying on Bold or Infinite Options. Plus, you can’t go wrong with new coding skills.
If you have questions or concerns, don’t hesitate to reach out to us at ecomexperts.io.