Vaibhavi

So, hi. I'm a Shopify developer from the past four years. I'm from India, and I've built over 50 Shopify stores. You can say I've used many things like Debut theme or any other paid things as well. In my career, I've built many custom features in Shopify, including a shipping calculator with the shipping country code, or a collection page with the add-to-cart functionality and a pop-up with all product details or a mega menu. I've built numerous mega menus with other new features. I've built static pages and blog pages with the add-to-cart functionality. I've built detailed blog pages with pagination. I've built many key features from scratch. As soon as I've built Shopify theme sections, which are critical to develop, like using nested blocks, which wasn't updated before in Shopify, so we couldn't use nested blocks. To prevent such issues, my problem-solving skills with Shopify are very great. Thank you.

Yeah. So, for the Shopify schema, I will say that Shopify liquid code is more of the shop's own store. For the Shopify schema, we can say that if a client wants to add descriptions from the Shopify theme editor, then we should use Shopify schema. Or if a client wants static code, then we can use Shopify liquid code. So, if a client doesn't need any hassle to add content from the Shopify theme editor, then we can use Shopify liquid code. But if the client wants, let's say, an example, like, if there's a hero section day by day, and there's a sale going on, he needs to add content day by day, like, if there's a sale going on, he needs to add anything or anything like that. If she or he needs to add effects on the image. So, if a 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, you need to add these images, and we don't need to edit these images throughout the year. So we can use Shopify liquid code.

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

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

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

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

We can check, 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 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, this full code is in JavaScript, and we don't have a dot operator in JavaScript. So that is the problem here. So what we can do here is give the document query selector dot selector. For the selector, we can give document dot class selector and then the class name, which is the menu. And that is the problem here, and that is how I will solve it. Thank you.

Will take a few seconds to check the code. So here, we have, one liquid code where we are checking if the product is available. If so, we perform some operations; otherwise, we perform something else. Specifically, we are checking that if the product is available, then the product title is available; if not, the product title is not available. However, what's missing is that we have this CSS file, product.css, which is not minified and doesn't maintain any conditions. So, if the product is available, we should add this product.css file with its minified version. If this is the asset URL, we need to minify the product.css file as well. This is how I would fix it. And this code does not have any errors, but this is how I would like to improve the code. Thanks.

I will take a few seconds to understand. When they're refactoring the Shopify theme, 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 clear goals for the changes. Next, I'll create a backup and leverage Git for version control, allowing for easy rollback if needed. For development, I follow a step-by-step approach, starting with small and noncritical tasks. Testing is done manually after each modification, and the code is cleaned up regularly to maintain a clean code base. To plan and understand the current code, I will check if there are any third-party apps or what critical JavaScript, CSS, and Shopify sections are coming in my way to complete modifications. Then, I will create a backup and leverage Git version control, and I will use Shopify CLI for the Git control. For the step-by-step development, I will start with small and noncritical changes. After each change, I will test properly through the full website to ensure it's not affecting any regression. I will also clean up the code regularly to maintain a clean code base. And after that, we can raise a PR, and we can check if there are conflicts going on. Then, we need to resolve the conflicts with the person, and we need to sit together with the person and resolve the conflicts together. After the PR is merged, we need to check once again end-to-end that there's nothing affecting the live site from the developed new feature. That's how I would prioritize code modification and minimize the risk of regression errors.

We need to create a code which is reusable. For 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 that is customizable in a way where we can use the same section on different pages. We should add regular comments on the JavaScript file as well as the liquid files. Also, we should regularly review our code and get regular reviews from users. So we can see if something is there and we are not finding it, then users are finding it. For this style guide, we should create a central style guide with the definition of all building blocks and the store's interface. For this theme customization, we should customize the Shopify theme to the style guide, which means applying consistent styles to all elements throughout the store. Like, if we are using some text, if we are using some text with a specific text size, text family, and text color, then we should create one component with these. And if throughout the store, we should use the same component for whenever we are using text or this text, then we should use that component as well. If we are using any text field, then we should create one text field component for the forms as well. That's why we can consistently improve our user interface. For the buttons, if we are using a button, then we should use the same color button for action buttons. We should use the same color button for clickable buttons. Or we can use white space to improve our details and visibility. Also, regular reviews from customers give us more impact on our user interface because they are using it, and they will give us great updates for our next update. That's how I will use user interface elements across the Shopify store.

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