Syed Haziq Ul Hassan

Hey, my name is Harik, and I'm from Pakistan. I have done DSCS. Currently, I'm working in Shopify as a software developer in EMBL Digital US and UK. It's been more than six months since I've been working with them. My last company was Celsius in the USA, and I was working with them as a Shopify front-end and back-end developer in that company. I'm working as a senior Shopify developer. I have done a BSC in 2017. After that, I've been attached to this field, and I started as a WordPress tool. But I worked in Etsy, and then I converted my field from WordPress to Shopify. It's been a very great journey. So far, and I'm 100% satisfied that I've changed, and I'm going in the right direction, learning new things, and that's a brief of myself. If you talk about my skills, I have front-end development skills in Super and back-end development skills as well. My passion is to become a certified expert from Shopify. I have a partner account. I do research on new things. I keep myself updated with the tools and new technologies that are coming in, and that's it. Thank you.

Okay. So most of the time for the testing to your escape, we do it in a browser by keeping track of the different chunks of the code and testing on multiple devices. We're using a browser tag that I mostly use for testing. That is a third-party tool where we can test real devices on a single device, like on Windows, so I can check the Macs and iPhone browsing as well. If there's still concern about being in a real-time environment for real-time testing, I can use my device, or I can use any other personal device to do the testing. So that's all. If you talk about the feature from standard ID for multiple devices, like click, pop up, and these things sometimes affect our website functionality. So we just have to test and debug the scenario and do the testing again and again.

You can see really good template engine. How does it work? Basically, you should be able to use directly a templating system based on the pending language, but you can also use the software APIs and have webhooks as well to keep track of the data. And, also, to process the data, you can just use multiple languages. So, to make it secure, that is already end-to-end encrypted and secured data. If you want to prevent hacks or tags, then you have to use the snippet and variables as much as you want to create them and use the JSON template as well to avoid hard coding things. So, in that way, you can just simply make it more secure.

Yeah. So sometimes you should best focus on where you have the problem of speed optimization or the speed loading of the images and the backgrounds. So what we do for that, we just put the lazy load function on these images for these specific elements. So what they do when the page is rendering, it gives a proper space at that time it will be visible in this specific store. So for that, we can just add some kind of loading wave or something. The low size of the asset. So that when in the backend, our image is being rendered until the page is completely loaded, the images are loaded in the background. And for the browser and the device, it's understandable that the asset is there because the actual size of the asset is already there, available to recheck component availability. So in that metric, the number of components in the page data loaded completely, but the visibility of the image is not right away visible on the outside. So this is how the interaction for the browser with the webpage becomes easier. And in the backend, the images keep loading, and when it's completely visible, it just removes the lazy load and shows the image. So what the lazy load function does, it just hides the actual asset and keeps running it parallel to the other page and the whole page, and puts a placeholder for the image and then keeps it showing some background or some asset, a small asset or a small loading asset. So when the image is completely rendered, you just hide that one and add the image on the front end.

If you talk about Shopify, specifically Shopify, the agent that is currently paying a very critical load in ecommerce fees in ecommerce stores, whether it's Shopify, WooCommerce, or some CMS, because the runtime update for the cart and checkout or for any kind of functionality or add-ons. So, that is a major part playing an important role. Like, on the real-time user can just add, select, or add things to their cart, and that really impacts the user, who won't be taken to some other page and doing something. So, that is the thing I believe, which is very good.

Yeah, so you can just use CLI and install the Tailwind CSS in the software store and keep the sales Tailwind CSS on your store or the local team. And just keep and find the classes that you are going to use. So that's why that's how you can just use Tailwind with a team and Tailwind doesn't interact or interrupt each other's things. If you don't use a local setup, then you can directly import the code in the CLI and then install the CSS and create an old folder and then the installation process. And then it's just ready to go to use it.

So, if a developer is doing perform one, they perform an action based on the product availability or product inventory. The syntax for the product availability check is not right. It's like product dot available, which is not correct. It's product dot inventory or quantity is equal to one or two or three, then for a specific range you can just put a check there and you can just show the product ASR. So, for the CSS thing that is written below the shopping code, this should also be on the top or in the header or in the head tag in theme dot liquid. That's a thing.

Yeah. Definitely. The Intel 10 instances that the main thing that really inspired the developers to use Tailwind, and that's why it provides responsive classes as well as classes for the desktop. So what you can use here is you can simply check the element with us, say, attendees or so. Just check the class names. If there are classes for the desktop and the sponsor person as well, you can directly identify from the class names that this is Tailwind being used here. If you talk about an example, then let's suppose if a button is there and it's being identified by the CSS, Tailwind CSS, then there is a class that keeps the font size in that button, like, for 34 pixels, and I have defined that same class. Another class that I defined the CSS for the mobile is, like, 24 pixels. So I just have to put both those classes in the class for the button. It will automatically be implemented on the website.

Yeah. So if you were using an already existing team that is being built by some other party or some other developer, and that team is being live. I first of all prefer to duplicate the theme, the updated version, and then I use my own CSS separately, section wise, and then I use JavaScript for the section voicing. So, like, I will create a section. I will create a snippet. I will create a CSS, and I will create a JavaScript file for the section. I will not use the classes or the code that is being used in the previous team unless some of the features are the same, and I'm reusing the same code. Otherwise, if I'm writing the code from scratch, so I will just put my CSS and JavaScript from scratch, and I will use a different file for each and every section so that their task or the CSS will not override for the different sections or different page. First thing. And the second thing, I will definitely write the CSS for each section with their ID. Like, I will make them unique for each and every element, and then I write the media query for desktop and for mobile as well. I just don't go in and change the actual theme files or something. I will optimize the code. I will remove the unnecessary parts and unnecessary lines, of course. So that is another thing. But it's supposed to talk about my new modification that is, like, in the code. So I will just keep a backup of the current team, and then I work on that. And I will just keep things in their way so that in some point, if there is an integration, then I will just revert back the code to check where the fault is.

What design principle do you apply when creating an engaging home page for any company site? First of all, if you talk about the home page, in the Shopify industry or Shopify platform, many teams provide the home page and the collection page. My first priority is, if you want to engage a person on your website, then you should directly convey your message, which is your top priority. Either it's a collection, either it's a product, or there is some kind of message or engagement that you want to create. So your first section, your first two or three sections, should be clear, so that when users come and scroll towards this section, they have something in mind that, okay, I'm on this website. I'm getting this right from the platform. And then you play with their psyche on the next level by providing different categories, different add-ons, or different self-products. So, that's how I think it's more engaging to keep the user or play with the mind that their need is fulfilled here. If you don't want to focus on user experience for the front end, then it should be a minimalistic design. There should not be a rush of elements, so they shouldn't be overwhelmed by too much information about the product. So, they should have a product title, its price, experience, name, experience, icons, or blurbs. And we should have three or four pictures for each product, like, on the sliding feature image that should be sliding. These are things that I think are very engaging and give a good first look at the website, which is like its branding and its logo. So, that's all. These things should be clear for the first impression of the website.

Yeah. For conversion for CRO, there should be specific parts that a user is always searching for in a portal. First of all, what I'm going to get in the product is the product images. They should be very clear and very optimized. The second thing is the product title, which should be very clear so customers know what they're getting. The third thing is showing the product price, including trading. Then there should be the variance for the product, and the price should change on each variation. And then if there are any add-ons, they should be there. The add to cart button should be visible on the first view of the desktop. If you're talking about mobile, the add to cart button should be floating, so it doesn't go back and forth. The second thing that's very impressive and effective is making the product's features very visible on the product page. When it comes to delivery and shipping, it's very attractive to the user if the store gives them a message that they'll get the product in 2-3 days, or through a specific shipping method, and that they can buy it through installment. These things protect the customer and the product description. The product description should not be too long or too short. It should be clear and concise, explaining what kind of product it is, how it's made, and how customers will buy and use it. The third thing that's very important is product reviews. Your product reviews should be a top priority and very visible on the product page, so new users can check and satisfy themselves by seeing other people's reviews. So these things should be in a flow on the product page.