Vaibhavi

Sure. So, uh, hi. I'm, and I'm a Shopify developer from past 4 plus years. I'm from India, and I have built over 50 plus Shopify stores. And you can say that I have I have used many things like down theme or, uh, any other things which are paid as well. So, uh, in in throughout my career, I have built so many custom features in the Shopify, including shipping calculator, uh, with the shipping country code, or you can say that collection page with the add to cart functionality with the pop up of product product all product details or mega menu. I have built a number of mega menus with the with other new new features. I have built, uh, static pages. I have built blog pages with the add to cart functionality as well. I have, uh, I have built blog detailed pages with the pagination. I have built, uh, so uh, I I have built, uh, many key key features from the, uh, from the scratch. As soon as I have, uh, I have I have built the Shopify theme sections, which are critical to, uh, which are critical to develop, like, uh, like, if we have to use nested blocks, which is, uh, which was not which was not updated before in the Shopify, so we cannot use the nested block. So prevent the, uh, for preventing the, uh, preventing, uh, that type of issues, uh, my problem solving skill is very, uh, great with the Shopify. Thank you.

Yeah. So, uh, for the Shopify schema, I will say that Shopify liquid code is more, uh, Shopify liquid code is more, uh, of the shop Shopify store. For the Shopify schema, we can say that if client wants to add some descriptions from the Shopify's theme editor, then we should use Shopify's descriptions from the Shopify's theme editor, then we should use Shopify schema. Or if client wants some static code, then we can use Shopify liquid liquids code. So if the if client don't need any headache to add content from the Shopify theme editor, then we can use Shopify liquid code. But if the client wants, uh, that, uh, let's say let's say an example, uh, there is a hero section day by day, like, if there is sell is going on, he needs, day by day, like, if there is sale is going on, he needs to or she needs to add anything or anything like that. If, uh, if she or he needs to add, uh, add exponents on the image. So if, uh, client's requirement is to edit the content from the theme editor, then we should give the Shopify schema. Or else, if they want that, let's say that, uh, you you need to add these images, and we don't need to we need we don't need to edit these images throughout the year or, uh, not, uh, not from now. So we can use Shopify liquid code. That's

Sure. I will take few seconds to just understand the question, and I will answer answer it back. So, yeah, so in the Shopify's theme, we have different different JavaScript for different different pages. Sure. So, uh, for that, uh, I will I will say that my strategy would be if the product pages, uh, JavaScript needs to be the, uh, needs to be, uh, needs needs to be, uh, on the product page only, then I will I we will we can give the, uh, we can give the, uh, conditions on the theme page that if the, uh, product template is a template dot name is equals to product only, then and then only we can add this type of, uh, this JavaScript, which is main product dotjs, or there is, uh, some common functionality in the JavaScript as well. Let's say if we need to add a to card functional on function functionality on the collection page, then we can we can add another function uh, another condition on the if that or, uh, if template dot name equals to product or template dot name equals to collection, then and then only this JavaScript should be loading. Other than that, we should use the noncritical JavaScripts into the noncritical JavaScripts into the asynchronous, uh, asynchronous, the the asynchronous method. Also, we should use different keyword or async keyword. Or in Shopify also, there is some strategy to, uh, load the JavaScript to scale, uh, scalability and maintainability. So we should use that as well. We need to document, uh, document and add comments, uh, to the the Shopify, Java, uh, JavaScripts also so that other developers can find out that this JavaScript why are we using this JavaScript for this page as well? And that will be my strategy to adopt the structure for the Shopify themes and JavaScript code to scalability and the maintainability. Thank you.

Yeah. So to describe a process of implementing a custom, uh, complex UI animations in Shopify theme, Will take few seconds. Yeah. So for the animations, we will use, uh, JSON format. Uh, it's JSON format animations. So it will, uh, it will, uh, allow us to perform smoothly on our site or pages. If the animation is, uh, if the animation is going on scroll, uh, animation is performing on the scroll, then we should lazy load that animation as well. Uh, so for the, uh, for the planning, I will define first, uh, first, I will define the animation and then perform the consideration. Uh, for the development approach, I will use vanilla JavaScript library. And for the code structure, I will modularize, uh, I will modularization to, uh, break down the animation logic into a separate function. For the each function, uh, animation effect. For the each function, I will I will check that if this thing is reused, then then and then only we'll use that thing. Uh, for the mod for the animation logic, the CSS animations are the best for the logic. Uh, I will define and reuse this CSS animation for the common effects like, uh, fields or scales or real relational logics as well. For the we can use the JavaScript competitive competitive complexities also. To use the JavaScript, uh, I will trigger animation to at a specific position and control animations animation timing and directions. For the performance optimization, we will use lazy loading as I've mentioned before. We will we can use rebouncing, and we can use, uh, conditional loading as well. Uh, like, for an example, if the animation is loading on home is only, then the it should not be load on other pages as well. As, uh, same thing, we will, uh, use for the animation JavaScript also. If this animation is loading on the home page, then we should not load that JavaScript into other pages. For the additions, I will say that, uh, we should use, uh, some uh, minimized dome manipulation. So for the complex dome manipulation during the animation can impact the performance and consider using the techniques like pre, uh, pre rendering animation starts. Thank you. That's it. Uh, that will be the, uh, strategy of mine to complete the the scrolling, uh, complete the UI animation while scrolling the performance. Thank you.

Sure. We'll take few seconds to understand the question first. Yeah. So to managing, uh, the states of JavaScript driven into the Shopify theme, imaging your imaging your Shopify theme is, uh, like a big stage play. You have different actors and playing their roles, uh, but he needs to remember the things, uh, throughout the play. Here's how to keep things organized. Break it down. Firstly, I will break it down, and then props and cons customers, and remember the lines and clear communication. After that, practice and makes it perfect, and, uh, then, uh, complete the complete the task. So for the breakdown, I have meant that, uh, instead of one giant script, we have separate separate scripts that is, uh, JavaScript files for each part of your play means each part of your pages. So that we can break down the JavaScripts into different different, uh, uh, small small JavaScript components and create a small small JavaScript files though so that, uh, we can, uh, we can include the JavaScript whenever and where, uh, whatever is needed is there. So for the remembering the lines, if if the, uh, if the, uh, actor needs to, uh, remember the something between the scenes. Like, we need some components, which is a common component for the one page and another page. So we need we need to create one more JavaScript file for that, and we can create the common component for same pages. And we can we can, uh, include that component or that file into both pages. Also, we can we can add different JavaScript, uh, for as a conditional purpose. Like, uh, we need to add something onto home page only, then we will give that condition if we want to we want to give some pro JavaScript, uh, rendered into product page only, then we can render the pro JavaScript to that product page only. Or, uh, let's say, if we want some JavaScript to the product page and the collection page as well, then we can give multiple conditions in the if condition. And that is how I will manage the state in JavaScript driven in Shopify theme. Thank you.

I will take few seconds to understand the question. Okay. So, uh, to implement feature tools in a Shopify theme without affecting check that if, uh, if there there are any dependencies or third party apps going on or any, uh, what is the critical JavaScript for that? Or what is the critical, uh, critical sections there which, uh, which affect, uh, my new feature or my new feature, which which can affect my new feature. So, uh, after after checking all of this, I will I will check that, uh, I will, uh, duplicate the theme file and connect our git to our our locals local environment. After that, uh, we will check that, uh, if, uh, I will perform noncritical task or small task, I will break down the I will break down my feature into smaller task, and I will perform small critical task noncritical task. And and then I will check in my local environment. After checking everything, uh, everything is working fine. I will perform I will perform the bigger task, and I will complete my task complete after completing the task, we can see we can test the task in our local environment. After that, we can check if there is conflicts going on in the gate. If there is nothing going on in the gate, then we can create a PR and we can we can ask, uh, our fellow colleagues to check, uh, review our PR. But if there is nothing going on and everything goes goes right, then we can, uh, we can edit. We can add the add the our new code into our master branch. And, uh, and then we can we can see that it is not affecting our lives live site because we have backuped our live site, and we we have worked in it, and we have checked in our local environment that that is not affecting our any live site. After after after our feature is, uh, implemented in our live site, uh, from this chart, we have to, uh, we have to test a full environment from this, uh, from end to end site. And, uh, yeah, that that is how I will implement a new feature in tables in Shopify themes without affecting our live site.

Sure. Do so here, we can we can, uh, check. Uh, we can see that there is one global class function going on, and we have one query selector called element. If the element is there and, uh, if the element is there, then we have to toggle class active. So for the selector, we have selected the menu class, but the menu class, uh, this full is, uh, this full uh, code is in JavaScript, and we we don't have dot operator in the JavaScript. So that is the problem here. So what we can do here is we can give the document dot query selector dot selector. For the selector, we have we can give document dot class selector and then the class name, which is the menu. And that is the problem here, and this that is how I will solve it. Thank you.

Will take few seconds to check the code. Sure. So here, we have, uh, sorry. So here, we have one liquid code where we are checking that if the product is available, uh, then we have to do perform some operations, or else, we are performing something else of not something else. Like, we are checking here that if product is available, then the product title is available, or else product title is not available. But what you're missing is it we have this, uh, CSS file, which is product dot CSS. It is not minified as well as it is not maintaining any condition conditions in it. So if the product is available, then and then only we should, uh, we should add this product dot CSS file with the minified version of it. So if the the this is the asset URL, we need to minify the product file as well, product dot CSS as well. So this this is how I would fix it, uh, this code. And this code does not have any errors, but this is how I would like to, uh, improve the code in it. Thanks.

I will take few seconds to understand. When they're refactoring the Shopify theme, uh, my priority is to minimize the risk. Here's how I would approach it. 1st, it's crucial to plan and understand the current store and define the clear goals for the changes. Next, I'll create a backup and leverage of git for version controls, allowing for easy rollback if needed. For development, I follow a step step by step approach starting with the small and noncritical tasks. Testing manually after each modification and cleaning up a code regularly regularly by maintaining a clean code base. To plan in understanding the current code, I will check if there is anything, uh, any third party apps going on Or, uh, what what is the critical JavaScript CSS and critical, uh, Shopify sections are coming in my way to complete the, uh, modify anything, uh, anything in my store. To, uh, I've after that, I will create a backup, uh, backup for the, uh, leverage git version control. And, uh, I will use Shopify CLI for the git control. For the step by step development, I will start with the small and noncritical changes. And after after each changes, I will I will check uh, and I will test properly through, uh, full website. So it is not affecting any, uh, regression. Uh, It is not performing any regression errors. And after that, I will clean up the code regularly and, uh, for the clean code base. And after that, we can, uh, we can raise a PR, and we can check if there is conflicts going on, then we need to resolve the conflicts with the person which, uh, with the person, and we we need to sit together with the person and resolve the conflicts together. And after after the PR is merged, we need to check once again with the end to end that there is nothing, uh, going, uh, there is nothing affecting the live site from the developed, uh, new feature. That is how I would, uh, prioritize the code modification and minimize the risk risk of regression errors.

I will take few seconds to check the question. So for the consistency, I will say that we need to create a code which is reusable. We need to create style guidelines. We need to create a theme customizable with the with this, uh, way where we can, uh, we can use same section to different different pages. Uh, we we should add, uh, regular comments on the on JavaScript file or as well as liquid files. Uh, also, we should regularly review our code and regularly review with the regularly get review from the user. So we can we can see that if something is there and we are not finding it, then user is finding it. For this style guide, we we should create a a central style guide with the with the definition of all building blocks and your store store's interface. For this theme customization, we we customize your Shopify theme to, uh, there to the style guide, this this means, uh, that applying consistent styles to the all elements throughout the stores. Like, if we are using some text, uh, if we are using some text, uh, with the with the, uh, text size, text family, and text color, then we should create one component with this. And if, uh, if through in throughout the stores, we should use third component with the for whenever we are using text or we are using this text, then we we should use, uh, we should create that component as well. If we are using any text field, then we should create, uh, one text field components for the forms as well. That that is why how we we can consistently, uh, improve our user interface. Uh, so, uh, for the also for the buttons, if we are using button, then we we should use same color button for the action buttons. We should say, uh, we should use same colors button for the clickable buttons. Or we can use we can use white spaces also to improve our improve our details, uh, visible visibility. Uh, also, we can say that uh, regular reviews from the customers, uh, gives us more, uh, more on this, uh, more impact on our user interface because they are using it, and they will give us, uh, great, uh, updates for our next update. That is how I will, uh, use, uh, user interface element across across the Shopify store.

Will take few seconds to understand the question. Sure. So for the for the client if if we can say that, uh, I I I will give you one example for this. So, uh, few few years back, I I had one client like this. She needed to, uh, create her handwritten letters and hand handwritten notes in, uh, in, uh, she wanted to use her handwritten notes or handwritten letters into her branding as her branding. So we have created one font, uh, for her. And after that, we have, uh, we have used that font, but it was not that accurate as her, uh, as her handwritten notes. So we have used, uh, we have used her, uh, her handwritten notes images as, uh, his branding. And for the guidelines, I I will say that, uh, for the team makeover, we can we can let the we can, uh, we can get the help of the UX developers. And for the met matching pieces, also, we can, uh, we can share that we we create building blocks for, uh, for the stores, and all of the look and feel should be same. Like, uh, like, I've saved otherwise that, uh, all the buttons should be the same. All all the product titles or the section titles should be the same. Or the description should be the same. We can use different different fonts for different different, uh, descriptions and titles, like the product, uh, on the product page, let's let me say, which is the main page of our product. So for the product page, we can say that for the product title, we should add a different font with the bold and clear vis visualization. Uh, Uh, also, for the description, we should use the bullet points and with the, uh, with the small, uh, small weightage of the font size. For the pricing, we should give a large and bold font font sizes. Uh, for the discount prices, we can give small font sizes with the less, uh, color code, uh, with the less, uh, color code explanation. Uh, also, uh, we can, uh, give the reviews of, uh, the review section hierarchy. And, uh, for for the related product section, we can pop up the add to cart button. As well as, uh, for the add to cart button, we should give some, uh, we should give some animations like popping up popping the button, or we can we can give the sticky add to cart button to the product page. And this is how I will, uh, translating a client's branding guideline into the cohesive design within the Shopify team. Thank you.