How Can You Create Customizable Products In Shopify Without An App?

Since the last couple of years, Shopify has grown as a prominent eCommerce platform with noticeable stores across the world. But a couple of years back, people were not happy with the hosting-based solution, especially in e-commerce, as they cannot easily have the customisation option. So the Shopify team created a system with a great choice of customisation.

While developing the project or PDP page developers are looking for customisation due to their business needs; however, in the hosting solutions, it is tough to achieve. In most cases, people are using the third-party app, which may be costly for them and not give 100% results according to their actual requirement.

Shopify provides many options with the help of that you can easily customise it. Instead of paying a significant amount or recurring amount to the app, they can have the same customisation by putting some javascript, HTML tags, and liquid codes as a Shopify developer or Shopify expert. I have tried to show the example of the codes with my understanding. I hope you will like it. But always consider a situation where you might have to hire a Shopify expert to help you out.

You can add any form field and share those values on the order and cart meta-objects such as textbox, text area, radio button, checkbox, file upload, dropdown, etc.

Important note: Ideally, all major Shopify themes have the same code with the same structure; however, here I have used the default theme of Shopify, which is the debut theme. You just need to make sure that you are placing the right code in the right place only.

As a Shopify expert myself, I always prefer my custom code in different files, so the rest of the functionality works well until or unless the admin does such a setting from the admin area, so the first step is to create our product page template.

First Step:

Create your custom template for the product page: Do the login using your admin account and go to Online Store > Themes > … > Edit HTML/CSS. Click on the Edit HTML/CSS

Find the option of add template.

When the screen has the popup select the product and gives the name like “custom-product-option-1”, it is complete if you wish to provide any name for the product template.

You just need to select the product and assign the template to make sure that the product is executed from your template only.

Second Step:

Now find the section called “product-template. liquid” this is for the new theme files only who have the sections in their theme.

Now the main challenge is you need to put all form fields in the right place. You need to add this code in the add to cart form. Also, make sure that you put this code near to the quantity fields. That will be the ideal place according to me there no problem until you put the code between the form tag.

{% form ‘product’, product, class:form_classes, novalidate: ‘novalidate’, data-product-form: “ %}

Your code which I am going to suggest should be here.

If you are not good in technical terms, you should probably use the Shopify theme kit, and with the help of it, you can download the complete theme and then be able to find the files and code from any tool. To know what the themekit is and how to use it, please check out our detailed guide to Shopify Themekit. In case you still have queries, you can always hire a Shopify expert to consult with or complete the project for you.

Now, It’s Time To See Each Form Field And Their Code. You Can Add Styling For The Fields In Your Styling File.

Field 1: Text box

Field 2: Checkbox

Field 3: Text area

Field 4 : Radio selection

Field 5: Dropdown box

Field 6: File Upload

Third Step:

Now, the products have the value; however, we need to show the product filled values in the cart page.

If you are using ajax cart which has the drawer effect, then it might be possible this code will not work as they are using javascript templates. For that, you need some Shopify expert who can work with ajax template. If you are using the cart redirection feature of the theme, the code will indeed work.

3a) Now it is time to open the cart-template. liquid file.

3b) You need to search for the code {{ item.product.title }} just after that code you need to put the following code.

{% assign property_code = item.properties | size %}
{% if property_code > 0 %}
{% for propertyvalue in item.properties %}
{% unless propertyvalue.last == blank %}
{{ propertyvalue.first }}:
{% if propertyvalue.last contains ‘/uploads/’ %}
{{ propertyvalue.last | split: ‘/’ | last }}
{% else %}
{{ propertyvalue.last }}
{% endif %}

{% endunless %}
{% endfor %}
{% endif %}

Save your changes, and you are done with it.

Fourth Step:

This is not the mandatory part of them if you wish to show the order email’s values in that case only you need to follow this step or ignore it as well.

Open the order confirmation section now you must be able to find the one piece of code which is {{ line.title }}

You need to replace that specific code by the below-given code.

{{ line.title }}{% for propertyval in line.properties %}{% unless propertyval.last == blank %} — {{ propertyval.first }}: {{ propertyval.last }}{% endunless %}{% endfor %}

Just make sure you do not break any HTML code; otherwise, the mail format will be changed.

By this way, you can have many things on your product page.

Signing Off

In this blog, I have just written for the product section only; however, there are many small other features provided by Shopify. As a novice, you might not find the right shortcuts, which is why you must consider hiring a Shopify expert! If you need any assistance, you can just reach out to us for the same. We have been working in Shopify development for the last many years.

Originally published at https://www.zealousweb.com.