How to customize Products in Shopify Development 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 customization option. So the Shopify developers created a system with a great choice of customization. If you are looking for robust and intuitive Shopify website development services, ZealousWeb Technologies can help you get custom Shopify store setup, theme design and development, payment gateway integration, Shopify migration, and maintenance services.

While developing the project or PDP page developers are looking for customization 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 development provides many options with the help of that you can easily customize it. Instead of paying a significant amount or recurring amount to the app, they can have the same customization 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 the quantity fields. That will be the ideal place according to me there is 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.

{% endform %}

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 us to get the best Shopify development services.

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

<label for=”giftcard”>Gift card name</label>

<input required id=”giftcard” type=”text” name=”properties[giftcard]”>

Field 2: Checkbox

<label>Multi checkbox selection</label>

<input type=”checkbox” id=”checkbox-1″ name=”properties[Optional features – Checkbox 1]”><label class=”ep_inline_block” for=”checkbox-1″>Checkbox 1 lable</label><br>

<input type=”checkbox” id=”checkbox-2″ name=”properties[Optional features – Checkbox 2]”><label class=”ep_inline_block” for=”checkbox-2″>Checkbox 2 lable</label><br>

<input type=”checkbox” id=”checkbox-3″ name=”properties[Optional features – Checkbox 3]”><label class=”ep_inline_block” for=”checkbox-3″>Checkbox 3 lable</label>

Field 3: Text area

<label for=”custom-text-descritption”>Custom message</label>

<textarea required id=”custom-text-descritption” name=”properties[Custom Descriptio]”></textarea>

Field 4 : Radio selection

<label>Select Option</label><br>

<input required type=”radio” name=”properties[Select an Select]” value=”Selected 1″> <span>Select 1</span><br>

<input required type=”radio” name=”properties[Select an Select]” value=”Selected 2″> <span>Select 2</span><br>

<input required type=”radio” name=”properties[Select an Select]” value=”Selected 3″> <span>Select 3</span><br>

Field 5: Dropdown box

<label class=”selection_block”>Select an option</label>

<select required id=”selection_block” name=”properties[Select an option]”>

<option value=”Option one”>Option 1</option>

<option value=”Option two”>Option 2</option>

<option value=”Option three”>Option 3</option>

</select>

Field 6: File Upload

<label for=”custom_file”>File (JPG or PNG)</label>

<input required id=”custom_file” type=”file” name=”properties[file]”>

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 an ajax cart that 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 for Shopify development services for the last many years.