Aman Rajpal

So, I am a full-stack developer. I have been developing full-stack apps for last 3 years. I have extensive experience with React, MongoDB, Express and Node. Basically a mon-stack developer. My last project was Eco3D e-commerce platform, which I have built using the mon-stack itself. I have also experience in Shopify development and I have recently created a store using Shopify. So, recently I have just started as a Shopify developer and I am working on it.

So, to identify the issues in the front-end part of the store, one should have good knowledge about liquid, templating and Shopify rules, how it works. Shopify has very extensive guidelines on how to support, how to build good UIs and what kind of themes and what kind of front-end they are expecting Shopify developers, Shopify theme developers to make. So I think sticking to the guidelines, we could troubleshoot and resolve whatever front-end issues we are facing for the Shopify site as well as it would require extensive, extensive knowledge about HTML and CSS.

To optimize the performance of the Shopify site, which is using React for the front-end development, we could use multiple things like we could optimize React by using code splitting and by checking wherever we can use some hooks or some performance of the React apps, specifically like use memos and all those stuff to identify performance issues where it could be improved and using CDNs, like Shopify has a default CDN, but yeah, using CDN to deliver the greater chunks of the JavaScript that are being delivered over through the website, I think that will optimize the Shopify store.

So, to utilize JavaScript along with Shopify Liquid, one must add some extra dependencies to the liquid part, to the Shopify, to develop the Shopify store. And those libraries and all those things can be added to the Shopify store as well to have extra functionality like good animation, good UI, good UI libraries. One can import it and really create good experiences for the Shopify store.

So, by using SCSS, we can manage the styling of the Shopify's theme. SCSS allows us to create some beautiful store in the front-end part. Designing is fairly intuitive and it's like normal CSS but it helps to create some great experiences. So, CSS pre-processes can be used, SCSS can be installed to Shopify store to build those functionalities.

To integrate API and to have some data from an external store, I would say, for a Shopify site, we can use the common method like fetch method in JavaScript or we can use some libraries as well like Xeos and all those stuff to get the data from the REST endpoint, REST API. And we can use that data to populate our Shopify store, however, whatever is necessary. Using these things, we can create a dynamic Shopify store with changes according to the user's interaction as well.

So, to create highly optimized Shopify liquid based theme, one must know the guidelines that Shopify has already put for developers and the developers must follow those guidelines to create good themes because Shopify has very high standards when it comes to development of the Shopify stores. So, to be able to view on the store, on the theme store, official theme store, one must adhere to the guidelines so that it's very good. The store is very good when it's built upon to the guidelines and Shopify only accepts if it is built to the quality, to the expected quality. And while one developer that follows all those things, they can easily create some good experiences like everything can be optimized very well and the styling would be nice and the store would be responsive enough for the user so that the store is very good and performant.

Okay. Yeah. One can easily convert the object to array and once it is converted to an one can achieve the desired output and it will be easier as objects are different from arrays. Basically, they are the prototype but yeah, one can achieve that.

My last Shopify store which I built had issues with accessibility and although on the lighthouse core the performance was very good, it was about more than 90 but the accessibility part it was lacking because we didn't provide explicit width and height to the images and once you go through all the detailed analysis that lighthouse gives, it's very easier to improve the accessibility and to know and to identify where one could improve the accessibility for the user and what's the general accepted pattern in this area. One can easily use HTML, CSS and JavaScript to achieve all those functionalities that are required.

So, I have created one theme in the past that had infinite scrolling for the user which was a unique user experience because generally in the Shopify themes like whichever the free themes they do not have that, the pagination that they use are numbered and which is not very a good, which does not create a good user experience, so what I did is I created that feature, the unlimited pagination feature using liquid HTML and CSS itself and I used some JavaScript library as well to do that but yeah, it created a very good experience because one can easily scroll infinitely and that's good for marketing too, so yeah.