Xstore Theme Full Customization Tutorial for Beginners 2026

Key Takeaways

XTOR is a premium WooCommerce theme built to simplify creating professional online stores. It combines ready-made demos, element integration, and powerful built-in tools like custom builders, sales boosters, and performance optimizations, giving you everything you need to launch and grow your e-commerce site without relying on dozens of extra plugins. In this tutorial, we'll be doing a comprehensive app store guide starting with theme installation, setting up WooCommerce, editing pages with Elementor, all the way to exploring XTO's powerful built-in features that make your e-commerce store professional, fast, and conversion ready. Whether you're just launching your first online shop or refining an existing one, this guide will show you how to take full advantage of XSTO's tools from global theme options and builders to sales boosters, email customization, mega menus, and more. By the end, you'll have a fully functional polished store that's ready to go live. So, let's dive in and build your store step by step. All right. So before we go into the theme setup, if you would want to get an affordable domain and hosting, then you should try Hostinger. It is one of the most affordable web hosting provider and with a yearly plan, you'll get a free domain as well. We have a 10% discount Hostinger coupon code in the description below. So make sure to check that out if you are interested in using it. So now moving on. Now that you have your hosting, the next thing that you want to do is to make sure that you have WordPress integrated into your website. And then you want to make sure also that you have the X store theme purchase. So if you haven't done that yet, you can use our affiliate link in the description below so that you can get into the theme easily. You can purchase from there. And if you use that link, you can get the best deal or price possible. Also, if you use that link, you'll be able to support our channel. So, feel free to use the link in the description if you want to use it. Now that we have everything that we need to get started on the theme setup, we can now proceed by going here into our eight theme account because uh this is where we have purchased our X store theme. And now you can scroll down and basically you want to navigate here in my downloads. And in here you can click here on more files. And this is where you could see all the files that is available here on your eighth theme account. And what we need is this one XTOR installable archive. And this is a theme. As you can see right here, you could click here on the download button. And now you'll be able to download it like this. As you can see the file name is axto.zip. You can click here on download. All right. Now that it's downloaded, we can now go into WordPress. And in here, you just simply want to navigate here on the left menu to start installing the theme. You want to go here into appearance and then you want to go into themes. Here you can click on the add theme button depending on which uh either of these buttons in here. I'm going to click here and then you want to click here on upload theme on the top left. And in here you can click on choose file. So you can click on that and simply locate the downloaded file. So now here it is. I have now located it in my device. So that would depend on where you have saved the file that you have downloaded. So now I'm going to uh select that and click here on open. And there it is. It is now selected. Now you just need to click here on install now. And it's now going to start installing the theme from this file. You just basically also want to make sure that you have selected installable archive in here. if you use this method. And as you can see, it's currently unpacking the package. So, we just need to wait for it for a bit. And now, once it says theme installed successfully in here, you can now click here on the activate button. After that, you will now be prompted into the setup wizard for the app store. So, you can just click here on let's go and just simply um finish setting this all up. So, I'm just going to select English for this. Continue. Next, you can put in your site title and tagline in here. So, this is where you learn automation and save and continue to proceed to the next step. And in here, we have the theme license. So, you would need to input the license code in here in order for you to finally activate your theme here in XTOR. So, if you have purchased the theme, then you would be able to find it here on a theme. if you have used the link in purchasing the um the theme. So in here you just need to go back in here into account and now you'd be able to see that we have the purchase code in here. So this is what we need. So we just need to highlight this and then we would need to rightclick and copy. And after that go back into the theme license right here and just simply paste it right here. Right click and then paste. And from here you will now be able to activate that. But first, you need to confirm this to acknowledge the terms and service right there. And you have also have the option for a development domain if needed. So, I'm going to leave that unchecked because this is not a development domain. And from here, I can now click here on activate theme. Once it's all good, you'll be able to see this message. As you can see, theme successfully activated. Now, you can click here on next to complete the setup of your um store or theme. And here child theme name. So we can go for a different name, but I'm just going to leave it as it is. XO child. And the parent theme template right here is XTOR. So basically this child theme is a secondary theme that inherits all the functionality and design of the main XO theme, but allows you to make custom changes safely without affecting the original theme. This is the recommended way to customize X store because updates to the parent theme won't override your edits. So now I'm going to click here on install child theme. And now as you can see in here it says that the child theme has now been successfully installed. We can now click here on next. And in here you can now choose from 150 plus pre-built websites. So basically these are your templates. You can think of this as starter templates that you can import to instantly get a full layout like homepage, shop, product pages, blog, and many more depending on the kind of template that you would want to use. So, we have a bunch in here. So, you can scroll all the way down and there's a ton of templates in here and all of them are looking pretty good. It just depends on your preference or taste or maybe the kind of product that you are selling. So there is a template here that would be appropriate for you. But for my case, I'll just go here at the top. This one seems good to me. It's professional, slick, clean looking. And if you just want to test out the um the look first is that you can click here on view demo. And in here, you'd be able to go into their website just like this one right here or basically a live preview of the template that you are choosing. So this is what it would look like. And if this is good for you, then you can just simply go back. And now you can click here on import if you would want to use this. And in here you can go for the preferred page builder. You can go for element, goodenberg or WP bakery. If you don't know which one to choose, let me give you a quick breakdown. So, Elementor is basically the most popular among the three right now. This is drag and drop and very visual editor, beginner friendly, huge community, and there's also lots of tutorials regarding this page builder. And we have Goodutenberg, which is basically built into WordPress by default. It's lightweight, fast, fewer plugins needed, and this is best if you just want simplicity and performance, but less design freedom. And then we have the WP Bakery or WordPress bakery. This is older page builder, but it's still supported, more traditional interface, but not as intuitive as Elementor. This is best if you're used to WP Bakery already or working with older templates. So, as for this one, I'm just going to go for Elementor because this is the most beginner friendly and basically the updated version. I'm going to click here on continue. And now you can go for the plug-in installation and activation. And this demo requires some plugins to be installed. So just simply install all of them. So you can click here on install and activate all plugins. And as you can see it is now getting installed one by one. So you just need to wait for that to finish installing. All right, everything is now installed. You can now click here on continue. And from here you have the content configuration. So you can pick the content elements that you would want to be imported into the template. So we have full demo or specific sections. So in here you can select the full demo site content if you don't want to include everything. But if you just want some specific blocks or parts in here, then you can just select them individually. But as for me, I just want them all to be included. And now you can click here on install demo data. And in here we just have to wait as it is building the site. The site is now ready. You can now click here on view your new site or start customizing. Since we don't have our details imported into the site yet, we would need to customize it first. So I'm going to click here on start customizing. All right. After that, you will now be prompted in here into the X store control panel. And in here you'd be able to see that we have these options in here. You can also see it here on the left menu. As you can see, we have a bunch of XTOR menus here that we could use to control our XTOR theme like the theme options, XTOR builder, and so on. But most of them are right here on the control panel, which is this one right here. You want to click on that so you can see this and so on. So before we do this is that we're just going to go and complete the designing process first in Elementor and apply our brand details into the theme. And before we do that is that we would need to make sure first that we have the necessary plugins. So you can click here on plugins or you can also go here into XTO and you have your plugins installer in here. But I'm just going to go here into plugins plugins first and just to check that I have the necessary plugins in here. Make sure that you have the XOR core activated as you can see right here. And then we have the pro elements which is necessary for elementor. And then element itself right here is right here. And then Mailchimp and more. And then next is that we need WooCommerce integration in here since we are setting up a shop. So I would need to go here into X store and then basically just go into the plugins installer which is this one. And then in here we should see the plugins that we can install here into our X store theme. So there's still a lot that you can do right here. You can install other plugins if needed. So you can explore each one of them to see what you need. But for now, we'll just be sticking with Woo Commerce. This is absolutely necessary if you're building up a shop. So now it's currently installing. So just wait for that. And now, as you can see, it says the plugin has now been successfully installed. So now you can click here on okay. And just to double check, I'm going to go ahead into plugin. And then we should now see Woo Commerce installed into our site and should be listed here under plugins as you can see right here. And it's currently activated. All right. Now we have all of our core plugins in here. Now we can proceed into adding our brand details into our theme that we have installed. So I just need to go here into pages. This is how I like to do it. Uh, another method that you can do is to go here into element and then you can click here and edit site and then you can edit from there if you'd want to do it that way. But I prefer going here into the pages and edit each page right here so that it will be more organized. And basically in here you'd be able to see that we can edit with element when you click here at with element. So you just choose the page that you would want to edit. So, as for me, I'm just going to go with the home page right here. So, this is the front page as you can see right here. And now you can click here on edit with Elementor. And now once it's loaded, you will now be prompted in here as you can see. And we can now do our edits in here like the text and many more. So, the first thing that we'll be editing would be the logo in here, which is the header at the top. I'm going to click on that and then we will have the options here on the left side. As you can see right here, when you click here on the logo section, we can now change the site logo in here. You can click on change site logo and then you can now choose the site logo in here. You can click here on choose image. And now you want to click here on insert media if you want to upload from your device storage or insert from URL if you'd want to upload from a URL. I'm just going to go for um insert media and go here into upload files and click here on select files and select logo. In my case, it's this one. I'm going to click on that. Click on open. And we should now have it right here. And now we have our logo in here. And you could also go for your alt text here. By the way, the title, caption, description, but um I don't really need this. I'm just going to skip that. I just need a logo. Click here and select. And there it is. And now we have uploaded it and we have this notice in here that we can optimize our images to enhance site performance by in by using the image optimizer. You can install that into your site. So I also recommend that and I find it really effective. So and I'm going to click here on install now. And now in here is that we have the image optimizer. We can click here on activate plugin. And then that's it. We now have it also in our plug-in list right here. So now going back, it should now be all good. And now we have this site favorite icon. So basically what this would do is that um let me show you just by clicking here on choose image and choosing the logo. Once again, click here on select. So I'm just going to go and um disable the full screen first. And basically the favorite icon would be right here that you're seeing on the tab at the top as you can see right there. And it's currently uh like this logo. It it is still not applied. So we need to click here on save changes first. All right. So now here is the result. As you can see the logo is now changed here in the header. And we have our fav icon here at the left side which is the left side icon here when you open up a tab in your browser. So that's the fav icon in here. And yeah, so now next is uh basically this is only showing up when you're uh viewing the site and in live view. So you can do that by clicking here in the dropown icon here on view page. So that you'd be able to go into live view in the site and when you actually publish the site, you'd be able to see the fav icon, but it doesn't appear here in the editor. And now what I will want to do next is that I would want to make the logo smaller. I think it's too big. It's too tall and there's a lot of space that is wasted here at the top and bottom. Also, when I go here into tablet portrait, as you can see, it consumes a lot of space. So, I don't really like that. So, yeah, I would want to make this smaller. And to make this smaller if you also want to is that you would want to adjust the size of the image itself or the logo itself. So in here this is 500x 500 pixels. So I can click here on this logo and now I can click here and change site logo. And now is that we have this. So the suggested image dimension is 350x 100 pixels. So this is only a suggestion. It's not that strict. You can adjust it accordingly depending on the size, the height or width that you would want. So in my case, I'll just click here on choose image. And I have already uploaded one which is this one right here. This is 350x 100 pixels. Uh this is what I want. I'm going to click here on select. And now I'm just going to click here and save changes. And now from here I'm going to click here on back to editor to see the changes. And here it is. As you can see our logo now looks much smaller. And I think this looks better. It's not so big that it is consuming a lot of space. So I really like it. And now we're going to proceed to the next one. So basically I would also want to demonstrate how you would be able to edit the header in here. So you can click here on header and then it will load for a while. So just wait for that. And then once it's loaded is that you will be able to also modify the settings here on the menu. this menu in here which is your main menu and now let's say I'm going to go click here in home in here you would have the edit navigation menu so here under content is that you have some basic layout settings you have alignment menu hover effect which is native to the elementor not to the extra theme so theme has its own unique um hover effect or special effects that you can add which I will be showing you later on. And you have the drop-own indicator right here, the icon. So this is the icon library. You can upload your own SVG, active icons, and many more. So that's it. And we have the drop down right here. You have the dropown animation, alignment, dropown indicator. If you want to use that, then you can also do it right here. But I don't have any drop down in this website, so I'm not going to use that. And I'm going to go into style. And now here in style is where you'd be able to have other settings such as when I click here on the header I have the menu items in here I can edit some settings like the space between items. So when I go and increase that as you can see there is now space increased. So I actually would want to edit this. So I would want to fill in this gap. So how I want to do this is basically I just need to make the boxes or the space consumed by the logo smaller since this is only the space or the amount that the logo is consuming. So I'm just going to go and make it smaller so that um the other items can fill up those space. And in here I'm going to expand this because I will be expanding the space later on. So right there. So, I'm just going to go and put the button here on the uh rightmost side. And now in here is that I'm going to go back in here into style and space between items. I'm going to go and increase that so that it would now fill in all those gaps. Just like that. So, I'm just going to go to the utmost value right there. I think that's enough. All right, that's it. So, I think I'm good with that. So next is that we will now be moving on into the typography. So in here I'm just going to stick into normal and then we have the text color. So you can change the text color. I'm just going to make it normal again which is black by default and then background color if you'd want. The border type is you can go for solid. As you can see there's no border but I don't want that because that looks ugly. And the padding in here, you could also increase that like the top right here. As you can see, there's no padding there. The um the item is actually moving now. So, I'm just going to go and bring it back right there. That's uh good. Maybe 13 is good. And border radius. And then you have some drop-down items in here. So you can change the typography, text color, and if you have a drop-down menu, then you could also edit it right here with a background color, border type, and everything. So that's style. Next, we'll be going into advanced. So in here is that we have the XTO effect. So for this one, this would let you add special hover or animation effects unique to a store theme. So this is what I've been talking about earlier that XTOR has a unique effect that would let you have some hover effect that we did earlier in the content section. So now I have enabled this. So now I will be able to um customize this effect. So in here we have the parallax mode on mobile. We'll be testing that later on on the mobile view, but for now we'll be going on at the to the top. So in here we have the effect. So we have the 3D hover effect right here. So we can click on that and activate it. And now when we hover our cursor here in our menu, as you can see, there is now a 3D effect going on. That looks really cool. So if you don't want that, you can just easily enable it right here using the X store theme. And then you can modify the smoothness right here on how smooth the animation is going to look. So right here, there it is. And yeah, I think I'm just going to go back to the default value. And then the scale, the speed, perspective, and disable axis, glare effect. You can enable this if you'd want. So, let's see. Let's enable it. And um let's look at the effect on what it actually does. And there, there's some glare there. So, yeah, that's the glare. And yeah, but for me, I don't think this effect is fitting to my um site because I'm going for a professional look and this is uh not so professional. So, I'm just going to go and disable this actually. But this is a cool thing to have if you have a brand that's more of a casual vibe, then you can definitely do it right here. And by the way, you also have some other types in here. Um we have this scroll effect right here. So you can see when I scroll and go up and you would now have the scroll effect right here. As you can see, it smoothly glides down. This is scroll effect. And then you'd have these uh respective settings in here on the left side. And then we have the hover effect, which is basically like this. It's not 3D. So there's that hover effect right there. And then we have the floating effect. And this is what floating effect looks like. That's it. So, as for this one, I'm just going to go and disable this. We have not tested out the effects, and we'll just be going for enable parallax on mobile. So, I'm just going to set this into hover effect actually and go into mobile view. So, this is one. So, I'm going to click on mobile view and let's see how it looks. So, as for this one right here, it is actually hidden. As you can see, it's grayed out. So, this means that it is hidden from the mobile view. It's still showing because I am in the edit navigation menu. But if I'm done editing, then this will not be shown anymore. So, uh, let me show you what I mean. So, I'm just going to go back right here. Go back into desktop. And then I'm just going to go and save this right here. Save and leave. And then there it is. Now I am not selecting anything. And when I go into the mobile view, and here it is. As you can see, the navigation menu here is now gone. when you're here in the uh mobile view. So, you would actually need to click here on the three horizontal bars to show the uh navigation menu. But when you click here on editing the header, the navigation would show up in here. So, uh I just want you to take note of that in case you get confused. And now is that I'm going to go back in here into editing the header to basically editing the navigation menu. Also remember that we have turned on the parallax on mobile option earlier. And basically what the parallax um feature does is that it um moves the images or sections as you scroll down in the website. So that's basically the parallax and mobile feature. So it's that simple as you can see right here. And I'm just going to go back here into the um navigation menu. I'm going to click here on header once again and go back into the edit navigation menu option right here. And now I'm just going to disable the extra effects because I don't want this anymore. I just want it to be like this. Just some simple hover effect. And next is that we have the XTOR tool tip. So with this, this would let you show small info pop-ups when hovering over menu items. So we can enable this. And from here is that I'm going to go for uh this is a great tool. And then you could also use some formatting text in here if you'd want. I'm going to make this bold just like that. And next is that you can go for styles also. You can go for the width, the arrow size, typography, and many more. And now is that we're going to go for the position. So it's here at the top. Animation is auto. And as the animation duration, arrow offset, and the trigger here, you can go for hover. And now when I hover over the menu in here, as you can see, nothing shows up because it is stuck here at the top. And since we have our menu here at the top, um we should not set the position at the top also. We can go for left or right. So let's say left. And now when I hover on the navigation menu, as you can see, we now have this small info popup. So this is a great tool and services, about us, and many more right here. So yeah, when you hover over the navigation menu, this shows up. So it's a helpful um little feature that would help you guide your customer if needed. So you can just put in the message in here. And actually for this one in the animation, let's say I'm going to go for fade in so that we will now have a fade in uh effect right there. So that's the tool tip if you'd want to use it. So as for this one is I'm going to go for disabling this because I don't want this feature yet. On this navigation menu, we have the X store condition. So this controls when or where a menu item appears. So let's enable this. And from here we can now show or hide action. So we'll be going for show and the conditions in here. You can put it right here. So if they are logged in or login status or the browser type, you can add more by clicking here on the plus button. And then you could add a condition by operating system. So they should have a a certain operating system in order for them to be able to see the specific action. So yeah, you can do it right here even the date, date, range and time. And here in the condition type is that uh basically it's like if all conditions need to be met or just one in order to trigger the hide or show action that we did right here. So I'm going to go for all. You could also go for at least one if you'd want. And the login status right here that we have um included as a condition. So, is it logged in or logged out? So, I'm going to go for logged in. So, they must be logged in in order for them to meet this condition. And the browser type, you can include the browsers right here. Google Chrome, Safari, and more. And as you can see, when I include operating system in here, I get to have this another menu in operating system. So they must have a MacOSS in order for them to meet this certain condition and they would be able to see or the website will show them this specific action. So yeah, it's basically that simple in here for the conditions. This is helpful if you would want to add some exclusive um items or maybe features to specific customers here in XTOR so that um you can um easily do it right here. So we have the extra conditions for that. And yeah, that's it. So I'm just going to disable this again. Next up, we have the extra wrapper link. So in here is where you can control the entire menu to be clickable, not just the text. So in here is that I'm going to go for a link. Let's say google.com right there. And then now you can click here on link options. You can open a new window or add no follow if you'd want. So you could also go for custom attributes. So let's say I'm going to go for open new window. And then we have the dynamic tags in here. You can go for post, archive URL, um site URL and many more. But this wrapper link is actually redundant here in the navigation menu because we already have links in embedded into this buttons in here. So um it doesn't really take effect and this will not be able to override the link that is already embedded in this buttons and yeah that is basically the wrapper link. It will make the whole block um clickable right here. So, for example, um in here, as you can see, there is a a space right here, but it's still clickable right here, but nothing happens because again, the navigation menu is already full of links. There is already a link here embedded for this button as you can see. So, the wrapper link doesn't really override that. But you could use this in other blocks, not the navigation menu. Maybe blocks that doesn't have a link embedded to them. Next is that we have the XTOR attributes. So this would let you add extra HTML attributes so that you would be able to add it into a menu item or element. For example, you can go for um this um HTML code. So this would let you attribute to a link. This is useful for SEO. You could also go for um target blank just like this one right here. You can use it something like this attribute so that the link opens in a new tab and many more. You could also use AI right here to write the custom attributes for you. So you can click on write with AI and then you can step into the future with element AI. You can now click here on connect. So with this you actually need to log into your element account if you'd want to use uh write with AI in writing your attribute. But yeah this is actually great if you would want fine grained uh control over how links behave and how developers can hook into CSS or JS. So if you're a complete beginner then you don't need to mess with this if you have no idea about coding. And now next is that we have the XTO Ajaxify. So with this, this would basically make menu links load content using Ajax without a full page reload. So here we have lazy loading. We can enable that. So basically what this would do is that when a user clicks on a menu item, for example, this navigation menu, instead of refreshing the whole site to go into the specific destination of this button, only the relevant content area updates. Like for example, the only this body um updates right here. the header and the footer doesn't update anymore because it stays the same even in a different destination here on your website. So, this is best for product filters or category menus where you would want instant updates. It's just that not all plugins or script play nicely with Ajax loading. So, if you notice some broken functionality, you may need to disable Ajax for those links. So, here it's currently enabled. So yeah, it's basically just a toggle on or off button. It's a very simple feature, but very powerful if it goes well with your plugins or scripts. So for example, I'm here in the live view of the website. So notice that the header here doesn't load or reload anymore when I am changing uh location here in the website. Like for example, I'm going to go into home. you'd be able to see that only this part here is reloading into about us. As you can see, this doesn't get refreshed or reloaded. So in that way, it will be much smoother for the website or faster to load when navigating here on your website. So that's basically Ajax and it's very useful. So yeah, that is basically the last of the X store features here available on the edit navigation menu. You also have some layouts, motion effects and transform. So these are your basic settings here that is built in in ele. So we also have the sticky right here. So if you'd want to keep the navigation menu stick at the top, as you can see, we still have it right here. It's just that it's not visible because only the text here is sticky. But I'm going to set this to none right there because I don't want it like that. You can also go for the logo. You can make it sticky if you'd want. You could have it here in the motion effects. So you can do it one by one. And also the white part if you would want to. So those are your advanced basic um options here in Elementor. And now we'll be moving on into the buttons. So we're going to click here on the button. And now we can go for the content. We have some general settings. We could go for the hover effect. So again, this is built in for element. This is not the act um effects. So let's say I'm going to go for a fill to top right here. So when I hover, as you can see, there's a fill going on with the color. And we have the animation effect, the text, and many more right here that you would want to enable. And then we have the style once again. So you have the typography, the text color, background color or background type, and then the color in here. So as for this one, I'm just going to change the color in here. So I'm going to go and make it like that. So it fits our logo color in here. So I'm just going to change it a bit. So let's say something like this. That's good. And then the get started button. So, I mean the text I also would want to change that. So, actually I'm going to go for the text right here. Text color. I'm going to set it into orange. And here it is. Orange right there. And actually, this looks bad. Let's see. Let's make it more orange and see if it's actually any good. I think the white one was better. So, I'm just going to leave it at white right there. So, I think that looks good. Now, let's go into advanced. And in here, we have the Xar effects. Once again, you can enable that if you would want to go for another effect. Select the scroll 3D hover. As you can see, when I enable that, we now have the 3D hover effect there or just simple hover effect. So, I think the 3D hover effect looks good in here. So, it actually gets uh bigger. I like it. And then we have some other things in here. So basically the same thing that we have discussed earlier. Also another important thing is that here in the content section you could go here for the link so that you could control on where this button would lead the customer when they click on it. So for example I would want to just um lead them into google.com or maybe just uh stay put with this link. So it's going to put the uh or redirect I mean the customer to the certain link. So in this case in the invado um product of um XTOR. So let me just save this so that we also could save the XR effect that we did. And now we're going to go for a live preview. So we have it right here. So we can just refresh this so that we would now be able to get the updated settings. And now as you can see right here there is now that 3D hover effect in the button. Now when we click on that it will now lead us into the invado market with the XOR theme as indicated in the link that we have um set earlier. All right. So now next thing that we're going to discuss is that we're going to be adding some elements or widgets here into our website. So first let's save our progress here in header. So we can do that by clicking anywhere outside of the header. let's say here and click on save and leave and once it's saved is that we can now click here on edit page. So we will now be proceeding into editing this page and all the elements here will be unlocked right there. So now we can select the specific elements. Now I would want to add a countdown or a countdown timer in here to create a sense of urgency to my customers so that they would grab the deal immediately. And I just want to click here on the add element button on the top left. And basically in here is that I'm going to go and find the countdown. So we have a store widgets in here. And we have the countdown right here. So we have the countdown timer. We can drag it right here on anywhere we would want to put it here in a page. So I would want to put it right here. There it is. So now we have that countdown. So in here we can click on this countdown timer and then basically we can edit the settings in here on the left menu. So what you're seeing here in the left menu highly depends on what kind of widget you have imported here into the website. So we will not be able to test each one of them because there are too many. But basically they all work the same way. You just need to edit here on the left menu when selecting that specific X or widget or element. So in here we have the due date. Um we could you could set this if you would want to. And we have the stretch items, horizontal align, show 00 calendar, days, hours, minutes, seconds depending on uh what you would want to show. So here on stretch items, you could see it could be stretched like this if you want to fill that up. But I think this one is enough. And next is that we have the heading. You could go for um yes if you'd want to add this certain heading in here, but I don't want that. So I'm just going to stick here into general. So here we could add a due date. So let's say that we are running um a holy week special discount. So let's say I'm going to go or maybe a summer discount actually. So I'm going to go until the end of April. So here at 30. So now it will not be updated right here. Or maybe you just want it until um uh until one day only. So let's see. I'm going to go back in here. So let's say 21 right there. So there is only one day. And then after that is you can set that. And there it is. And also the time by the way. So I'm satisfied with the time. So I'll just leave that be. And there it is. It is now selected and we now have one day. And next is that you can go for the um label position. You can go for left, you can go for right, you can go for bottom, however you'd want it. So I just want it like this one right here. And I would want to show everything and custom labels. I don't want that. So basically I'm done with the timer. Just like that. So basically now I just would want to edit this text. So I would want to remove this um header right here or subheading text as they call it here. I'm going to remove that just like that. And then I'm just going to go and customize this. And now I'm going to go for grab the discounted deal now right here. And I'm going to go for this one. Um, for this one, I'm just going to say grab or um buy the actually uh grab is the best word. Grab the deal now with huge discount for this summer sale. And I'm going to say um you can purchase all of auto first products subscription with this discount just like that. So now we have it just like that. And yeah, I think that's pretty good. And in here is that I'm going to change the button also. So I would want to rearrange this. So, how I want to do this is basically I would want to put this at the bottom right here. There. And I would want to make it centered. So, now I'm just going to go and expand this right here. And actually drag it just like that. And as for this one, I'm going to make it centered. There it is. Now, centered. And also for this one, I'm going to just going to expand this box. Oops, that's wrong. So, I'm going to go press Ctrl + Z to undo. And let's see if it would go back. There it is. And now is that I'm just going to go and expand this and make it uh longest possible. Right there. And I'm also going to make this centered just like that. So it's now centered. And next is that I would want to um change the color of the button for this one right here. And I'm going to go into style for that one. And now I'm going to go for the background color. I'm going to make it into orange so that we stick to our branding color. Just like that. And I'm going to go for the text color. I'm going to make it white. That's even better. All right, that's good. And now I also want to customize the text in here. So let's say uh grab the deal now. Just like that. And then as for this one right here is I'm going to go for browse. Um oops. I'm going to go for right here. Let's say um view the um product maybe something like that. Yeah, just view the products. And this one is grab the deal. Now, also I would want to add some effect here from Ato. I would want to add a 3D hover effect because I really like it and I think it's very intuitive. As for this one, I'm not going to add anything. I just would want to highlight this button in here. I actually would want to make this button bigger so that it would tower over this button in here and it will be highlighted and or it would stand out more. So, I'm just going to click here on this button and navigate here into advance. And then we can go here to transform. And now I can just go for scale and modify this right here. I can make that bigger. Just like that. I think this one is fine. And as for this one right here, I'm also going to modify the um transform aspect of this one. And I'm going to make it a bit smaller right here. So, it can't be made smaller already because this is already the minimum size, but it's fine. We can just um offset this so that it's not so close to the bottom. And I'm going to set offset it for a bit. Let's say I'm going to go for eight. Just like that. And also offset this right here. I'm going to go for transform and offset just a tad bit. Just like that. So yeah, I think I like it more now. That's it. And I'm satisfied with the button. The next thing is that we have this one right here. You could also change the image here if you would want to. And you could um select the image resolution, caption, link, and many more. And as for now is that I'm going to go and put something in here so that it's not so empty. I'm going to put a product carousel in here. So basically um we can do that by clicking here on the plus button again and we can go into the um X store widgets. So now I'm going to add a carousel in here. So I'm going to go for carousel anything because I just want to put an image carousel in here. You can also go for the other widgets in here if you'd want. But yeah, this is what I want. So I'm going to click here. And basically in here on the left side is where we can edit our carousel. we can see the items. So, I'm going to go for item one. And in here, you can add any text, but as for this one, I only want the media. So, I'm just going to delete all of this. And I'm going to click here on add to media. And then I just basically select the photos in here that I would want to add. So, in my case, I have my file in here. I'm just going to drag and drop it. All right. So, here it is. Now, it is uploading. So, let's just wait for it to finish. And here it is. So, now I'm just going to go for this one right here. So, basically, these are just a sample um product placeholders. So, we have this one. One, two, three, four. I don't want it like that. I only would want one image per uh slot right here. So, I only want one image. So, I'm just going to select this one. Insert into post. And here we have it. And from here we could actually make it bigger right here by adjusting it right here by scaling it up. And then we can make it centered by clicking here on align center. So in that way it is centered as you can see. And then I'm going to go and make it a bit bigger now. Just like that. I think that is perfect. And then next is that you could now go for the second item right here if you want. So this is product number one. Sample product number one. And I'm going to go for product number two in here. I'm going to delete this once again. Add media. And then basically do the same thing. So this one, insert into post. And this one is number three. So wrong product. I'm going to go for this one, which is a product number four. So let me just find the product number two, which is this one, I think. So it's this one. There it is. Product number two. And now um you can go here and then you'd be able to see the product number two in there. And now the problem here is that we would have to format this once again. The trick here to format them easily so they are all the same size is basically I just want to go back into item one and I'm just going to go and click here on edit so that I can see the width and the height. So I just need to copy this and remember 25945. So now I can go into um item number two and in here I can edit the image once again and also put in the size custom size and put it the same width and the height to 59405 and make it center and click on update. And from here we would now have the same size. As you can see it's like that. It's as easy as that. And now um there's a slight variation here at the top. As you can see, it's not aligned perfectly. So in that way, I can just uh remove the space here because there's space right here. All right, the space is now deleted and it should now be exactly the same size. There it is. So we just need to do the same thing. We're going to add another item and this one is for sample product number three. So add media again and find number three, which is this one. I'm going to click here on insert into post and basically do the same thing. Edit and custom size and then the width here and the height and make it centered and update. And there it is. And last one is for product number four. So I'm going to delete that. Add media product number four photo. Insert it and then edit once again. And then go into size, custom size, width, and then the height. And then as for this one, I'm going to go for centered once again. And now we have a carousel right here made easily. So you could also do it the same thing. But um this is highly subjective if you want to do the same style as I did right here. And now all I have to do is repeat the same process here on the other parts of this homepage. So I will not be showing you um everything right here that I'll be doing because it will just bore you. it will be um very subjective and redundant because it may not be the feature that you will be using. So uh basically what you want to keep in mind is that when you insert a block in here, so let's say I'm going to go for this one add element is that you can just simply drag and drop it because we're using the element editor. So it's basically just drag and drop just like this one right here. And then to edit that certain block or element or widget that you have dragged in here, you just need to click on it and then navigate here into the left side. And this this is where you can see the settings on how you'd be able to customize that according to how you'd want it to look. So that's the important thing that you would want to remember in here. And now another thing that I would want to discuss is this one right here. So you could click here on plus. So this would add another section in here. So basically add another space automatically. You can go for the XTO studio XTO live paste and then we can also use AI if you'd want. So as you can see beta you could use this if you log into Elementor AI or login with your Elementor account and then yeah so we're just going to go click here on XO Studio and we'll be exploring this. XTOR is basically a builtin library of pre-esigned sections, blocks, and layouts that you can insert directly into your page. So, it's like a mini template marketplace inside the theme, giving you ready-made designs for headers, footers, product showcases, call to actions, and many more um parts of a website. So the difference basically from the template that we did earlier was the demo import or the one that we did earlier was a full website that was imported as our template or theme. But this one are parts of a website. So you can choose which part you would want to import in that specific uh part of the website that we were editing um just now. So, let me just uh pick one right here. So, let's say I'm going to go for uh something simple. This one is a header. A header. A header. We already have a header. So, I'm going to look for something else. And actually, I'm going to go for a plan for example right here. So, you can click here on preview if you'd want. Then you'd be able to preview that part. So, just wait for it to load. And here's what it would look like. And then you could also view it in other views or other devices. Right here, this is the mobile view. This is how it would look like. And then once you're ready, you can click here on insert. And then it will now be inserted to the part of the website that you have indicated. So we just need to wait for it to load. And as you can see, it is now inserted here in our website. And now it is um available for us to edit. Once again, you can click here on that specific part you want to edit and just simply navigate here into the left menu. Same goes for the other parts. And notice that we have some space right here. So, uh you can also remove that if you would want to. And yeah, basically that is how you would be able to uh do this in uh in the element edit page. Next is that you want to make sure that every change that you have made right here is actually looking good on other views. Like for example here in tablet you want to check on how it would look here on the tablet mode. This how to look like. If it's okay with you then you can proceed. So actually this one is pretty decent. It's all good. Now let's go into the mobile view. If it's actually also good. So here it is. It's looking like this. And uh here's the countdown. Grab the deal. view the products and so on. So it's not so good here. It's too congested on this part and in here you could also edit this. So now you could click on it and then from here you could go for the style you can make it centered right here. And when you go here into desktop view it will not be affected as you can see. And in here in the mobile view it's in centered. So you could also customize it right here without affecting the other views. And we have this button right here. You can make that smaller if you'd want. And we have this button and so on. So basically, um, the gist here is that you would want to make your edits in each view so that you'd be able to make sure that everything looks good no matter what view or what no matter what device the customer is using to go into your website. And yeah, that's basically everything that you would need to know here. uh you'll be repeating the same process as you complete more pages here in your website. Last thing that I will discuss here in the editor page would be the top menu here because it's also very important. So first is that we have this button. This would uh take you to the uh back end or the homepage of uh WordPress and this one would be able to make you add an element in here. So we already know this. And then we have the page settings where you can modify the settings of the page that you have selected in here. So now you could see that we can customize the title. We could go for homepage for example. And then we have the status um featured image um order allow comments hide title page layout the grid layer basically like this view if you'd want that. And then you can customize the width and everything else. And then you have the style. You can go for the margin, the padding of the website. And then custom CSS for coding if you have some knowledge here. And yeah, that's basically it for the page settings. So if you'd want to save your changes, you just want to go into another page. For example, I'm going to go for this one right here. And just click on save and leave. And then you just simply want to go back. If you'd want to go into that page, you can. So we have this one and as you can see the name is now homepage and next is that we have this one. So this is basically for the notes. So when you open this is that you'd be able to add some notes here on the parts of the um website. So I'm going to click here and then as you can see we now have the notes panel and I have some comments that I have made earlier as an example. So you can see it just like this. And now if you'd want to make some notes is that you want to make sure that you are um in this view right here. And then you canot choose which part of the elements in here you'd want to make notes of like for example this one. You can click on that. And now we have this pin. Now you can make notes like u make make some improvements here and leave a note and then you should see that listed in here. Next is that we have this one which is the history where you can see the actions that was done in this homepage or um this page right here and then you can see the revisions. So um let me just um go here into revisions and this is where you'd be able to see the detailed revisions or changes that was made here in your website. Next is where you'd be able to navigate through throughout your website. You can see the pages in here. You can also add a new page if you'd want. And we have the different views in here. We have already discussed this on how you'd be able to optimize the views. So, let me just close this notes panel in here. And then we also have the mobile portrait right here. So, um this is also a view. And then we have the checklist. So, this is basically just a checklist from Elementor on what you should do to set up your website. So in here you can set up your global fonts and colors. We haven't done this yet. You could also click here on go to site identity now. And basically this is where you can set your colors. But in my case how I like to do this is that I just um set the color per part manually. It depends on your preference. You can also set it up right here on the global fonts and colors if you'd want. And next is that we have the what's new. basically some announcement or patches here in element so that you'll be updated with the latest update and then the finder. So if you want to find anything here in element this is where you can find it like for example you would want to add some element you can type in element and then you can see that you can now add a new floating element the settings in here regarding elements tools and many more and in here is where you can see the structure. So let me just uh go back and here. So let me just go and save and leave so that it will not be grayed out. And now we have the structure available. You can click on that. So basically this is where you'd be able to control the layout and hierarchy of an element. It's not a flashy effect like um tool tips or parallax, but it's definitely a way to define how the element is organized and interacts with its container. So in here you can see that we have a lot of containers in here. So this would uh let us adjust how the element sits inside its parents container. So for example here you can drag this and you can rearrange this just like that as you can see. And as you can see it's now rearranged just like that. So this is also another way for you to rearrange your elements in here. And then here you can click here to uh view your uh changes. So preview and basically the same thing that we did earlier when you click here on dropown and click on view page. You can also publish. Now if you are now satisfied with everything and you think you're ready, you click here on publish and it will now be published just like that. And we have the drop-own menu where you can save this as a draft if you're not yet ready to publish or you could go for save as a template and view page. All right. So now we are done with the designing part on Elemener with the app store features that you could use there. Next is that we're going to set up our WooCommerce because this is absolutely necessary because we are a store or a shop. So if you don't have this plug-in installed yet, you want to make sure that you go here into X store and go into plugins installer. And from here you can now get the WooCommerce plug-in right here. Just simply click on the install button just like this one on Woo Commerce if it's not yet installed. So now I'm going to click here on WooCommerce so that we can start setting it up. And now it's currently loading. And now you can click here on set up my store. So this is my recommended method on how you'd be able to start setting up your um WooCommerce. And in here you just need to answer these questions in here. So I'm going to go for um I'm just starting my business. depending on which one is appropriate for you and what type of products or services are you planning to sell. So in my case I'm going to go for education and learning. I'm going to click here and continue and then get a boost with the free features maximize conversions with payments payments and many more and click and continue there and then it's now loading. So let's just wait for that to load. And now from here it's now going to prompt us to log in. So you just need to log in here. You can use your email, your Google account, Apple account or GitHub account depending on which one you prefer in creating or signing in. Once you're logged in, you'll now be able to proceed here. So you just need to follow and complete the steps in here to properly set up your WooCommerce. So first is add your products. So we can click on that. And from here, what product do you want to add? You can go for a physical product, variable product, group product, or if you're already selling elsewhere, you can just import your products in a form of CSV file so that you don't have to manually import each one of them. You could also go for print ondemand products. And in here, you can also click here on view more product types. You also have the digital product and external product. In my case, I'll just go for a digital product for this one. And now we'll be able to proceed to the next step. So we would need to add more details regarding our digital products in here. So first is a product name. So in my case for this example I'm just going to go for a sample um ebook or eguide product number one. Something like that. And in here you could also edit this with element if you want. So um this is the permal link right here. And then you can add a product description. So in here is that I'm just going to go for something simple. This is the sample product description of this product right there. And then next is that we have the product data. So you can see the regular price right here. So let's say that this is uh 5,000. And now the sale price that is right now would be uh 4500 or 4,500. So that the customers would actually see this as a discount and they will be more enticed to buy this product and the price is even more appealing. Also don't forget here in the product data um you can go for virtual if this are intangible and not shipped and downloadable if applicable to the digital product that you are selling in here. And then you have the downloadable files. You can add a file in here. So you can click here. Can go for the file name or the file URL in here. So you can also choose the file from your device storage if you want. So I'm just going to go and do that. And actually I'm just going to go for the sample product and insert file URL. And there it is. And you can add more files if needed. And download limit. Download expiry. You can set that right here. And sale price time start. and uh time end for that sale price if um you'd want it to end. Also, we have some more right here. You can go for inventory. So, some more details link products. So, if you'd want to upsell another product once uh the customer is interested in buying this product, you can select for that right here. But as of the moment, we don't have any products yet because we're just starting out. But this is basically where you can select that if you'd want to upsell and if you'd want to cross-ell. This is where you can um select your product. And next is that we have the attributes. You can add it right here. Some more advanced um settings like the purchase note menu order. We have the Reddit Snapchat and more options in here like subscriptions if you want to sell subscriptions here in WooCommerce and bought together. So this one is from Xto right here as you can see. So you could um select another product in here that you would like to suggest that should be bought together with this certain product that you are selling. So that's it. And then after that you can proceed here into the product short description. So I'm just going to go for again another sample a sample short product description. Next is that we have the app store options. So this is exclusive in the app store. if you have the XAR theme. So, we have the general and we have the primary category and the sale countdown. If you'd want that, then you could um enable it right here. You could go for grid, list, single, single list or single list or grid. And then we have the single layout on how you'd want it to look like the product layout in here. And I just want to go here for in inherit and disable sidebar. And some more options in here like the thumbnail, product calorie slider, size guide type, and many more. We have the archive page, so you can archive image, hover effect. So I just want it to be inherit. So I don't want to set any of these effects yet um on this uh current options because I haven't decided. So I'm just going to see what it would look like uh later on before I decide here. And then the extore assistant. So, for this one right here, you would need to log into the X store um account and you'd need to go into the control panel. But basically, once you're all satisfied with your settings in here, you can now proceed here at the uh right side or right menu. In here, we could see that we can uh save this as a draft. Um we could preview, we could already publish this. And there are still some more um options in here like the product image. You could set that right here. You can click here and set product image. And then you can set that right here. Choose the image and set it. There it is. And then product gallery. You can add product gallery images if you'd want. And product categories. You can add a new category in here if you want. And this is also where you'd be able to see the categories that you have um created. Product tags. We have the X store brands right here. You can add a new brand if you'd want. And then this is a brand. So they are separate in here. This is exclusive to the XSAR theme. We have the post attributes and a product video. So, if you'd want to add a video, you can click here on add product gallery video. You could also do the same thing. If you go here to product description, you could also add a video in here. And basically, once you're done with the details in here, once you're satisfied with it, you can click here on publish. And then you'll be able to add it into WooCommerce as a live product. There it is. And then now is that we are um going to go and click here on continue setup because we are now done in um creating or adding our first product. So now we can proceed to the next step in setting up our WooCommerce. And of course you can repeat the same process um later on or right now um until you're satisfied. And now we'll just be proceeding into the setup payments. So you want to click here on setup payments and we will now be proceeding into that step. So now in here one very important thing that you should take note is the business location in here because this would greatly affect on what options or providers you have available. Like for example I'm going to go for United States right here and click on apply. And then you'd be able to see that I now have different options here for payment providers and also it would affect the more payment options in here. So you want to make sure that the business location here is absolutely correct. And you can just basically choose the payment method or payment provider that you would want to integrate here into your WooCommerce. For example, here in um accept payments with Woo itself. You can click here on install or PayPal. You can click here on complete setup. You basically just need to follow the on-creen instructions. After that, it would be subjective on which one you would choose because um there is a lot of choices in here, especially if you're in a different location that I am. But yeah, it's very simple on how you can set it up. You just need to log into your account or whatever payment provider that you are using in here. So, just make sure to follow the instructions once you click on this button. So, as for this one is that I'm just going to go for a PayPal account because I think this is the simplest one. I'm going to click here on complete setup so that we can complete this step. So, now let's start by clicking here on activate PayPal payments and you can choose your account type personal or business and click here and continue once you selected one and tell us about the products you sell. I'm going to go for virtual and you can go for physical goods and subscription also. continue. And in here, you can add expanded checkout for more ways to pay. You can go for credit and debit cards or you could go for a different payment provider for local payment methods. Going to click here and continue. And in here, you can complete your payment setup. So, you'd need to connect to PayPal. And from here is that um you would need to go through this process. So, let's just wait for this to load. Let me expand. And in here you can connect a PayPal account to start accepting payments on WooCommerce. So you just need to log in in here and then click on next once done. And from here you just need to provide the password. So you're going to click here and login. And now once done you can see that you're now all set. Now you can click here on return to WCommerce. And then that's it. You just need to wait for this one to load. And now you'll be prompted in here. And as for this one is this are other things that you can do here regarding the PayPal payment. But for now we'll just skip that. The important thing is now we have a payment method. You can also enable this right here so that you can add a protection to your payments. That is also very helpful. And now we are done with this step. We have now added a payment method. So now we can proceed to the next one. So let's just click here on WooCommerce so that we can go back in here into the main page. Next we have the collect sales tax step. So we can click on that and from here you can set the store location and configure tax rates in here. So this is um subjective depending on where you're from. So I'll not be um guiding you all throughout for this one because it might be different in your case. But yeah, these are all personal details anyways. So you can definitely do it on your own. So, you just need to set it up and then you can launch the store in here, but we don't need this because we already have the X store theme in here. And also, if you are selling um physical products, then I suggest going here at the bottom and going into review shipping options and make sure that you have your shipping zone set up in here. And yeah, basically that's everything I recommend on on setting up here in WooCommerce before you proceed into the other things here in XTOR. And that's it. We are now complete on the WooCommerce setup. All right. So by now your website or store is essentially set up already with all the fundamentals. So now I'll just be discussing the other features that is available here on XTOR as this would also greatly improve your store if you decide to use these other features that I'll be discussing right now. So make sure to stay tuned and basically you just need to go here into WordPress page so that you can go here into the back end of your site and go here into app store on the left menu and in here the first thing that we'll be discussing it would be the theme options. Now the first setting that I would want to discuss here under theme options would be the breadcrumbs. So in here you could customize their style and position. So as you can see we have the style, the title tag, the categories or title tag and some more options in here like the background text color breadcrumb effect. You can choose that right here. We have parallax and mouse move text animation and scroll padding type face and many more. So this feature is basically helpful for navigation and SEO because Google uses breadcrumbs in search results. So optimizing this would really be a big help if you are aiming for SEO. Also to follow it up is that we also have the SEO option here on the theme option. So right here in the left menu you can click on SEO. So in here we can enable the SEO settings. So you can enable this toggle that on and from here we have the custom meta description meta keywords open graph image no index no follow tag. So these are your options here in the SEO section. So these are basic SEO settings. Now that we have looked at the breadcrumbs and SEO settings inside here in a store you can see that the theme already provides a solid SEOfriendly features like clean code. We have schema support and options to help search engines understand your site better. But while a store gives you the foundation, Moz just takes SEO to another level. So if you would want your e-commerce store to rank higher in search results, Moz is a tool that you should definitely give a try. It helps you go beyond the basics, finding untapped keywords, analyzing competitors, tracking your rankings, and uncovering opportunities to grow your traffic. So, once your store is set up and optimized with XTOR, Moz is the next step to really push your SEO strategy forward. I'll leave the Moz link below in the description, so check it out if you're serious about boosting your store's visibility and reaching more customers. you want to use it if you want to get the best deals possible. So now going back into the theme options next is that we have the general layout. So for this one right here we have a bunch of options here. We have the site layout. You can go for wide layout, boxed, framed or bordered. We have the site width mobile optimization. I recommend um enabling this because this would help you disable and use HTML, CSS and JS of the desktop elements. So um this would make it actually smoother. And then we have the mobile user scalable. So this optional if you would want to allow users to scale content on mobile devices. And we have the site preloader right here. So enabling this option will provide a nice loading effect while your site or page is in loading mode. So this is subjective but um I just turned this off right here because I think it just makes it laggy. And then we have the images loader so you can upload an interesting PNG to make the waiting time less of a hassle. Static blocks X Studio Studio. So enabling this option will give you access to the X Studio for Elementor page builder. So exactly what we did earlier. So I also recommend um enabling this so that you can use it in element and we have the menu advanced options and classic widgets panel and many more. So yeah this is basically the general or layout options. Next is that we have the global sections. So this is where you'd be able to assign reusable sections like a promo bar or custom header or footer that appear across multiple pages. So here you can see sections. So you can select the position of the global section on the website. So in here you can go for before site wrapper, the position and the generic sections. You can also add a new item if needed. Don't forget to click here on save changes. Next we have the footer options. So in here this is a drop-own menu. You can go for footer layout, footer styling, copyright styling and back to top bottom. And yeah, this is where you can manage the footer layout, widgets, copyright text, and its styling. So, first here in footer layout is where you could customize the columns, enable or disable the demo blocks, sliding effect, and widgets toggle on mobile. We also have the footer styling wherein you can uh change the color scheme for the text, the link colors, the background padding, and many more. We have the copyright styling in here. You can see that you can change the color scheme. Once again, the link colors, background, and padding. And then the back to top button on uh in here. You can turn on show back to top button at the bottom right of the page. Or you could go for this one also, which is for the mobile version. For reference, this is the back to top button that is being referred on the footer. So when you click on this, as you can see, it will now scroll you back up to the top of the website. And now moving on, we have the mobile panel. So with this, you can customize the mobile navigation panel like the icons, menu items, and mobile specific features. So in here, you can enable the mobile pane so that you can add essential icons such as cart, shop, home, and many more. You have the sections in here that is available on mobile so that you can also easily reorder them. Right here you can click here on the arrow buttons to rearrange them if needed. So that's it. And then we have the main configurations. You can show labels, show text, um toggle the 01 content type and many more in here. And we have the style. So you can go for the height of the mobile panel. You can modify it right here. And then the content zoom. So, this is the option that allows you to zoom in or out of the content in the current element and a background control and some more color control in here. And then once you're all done with your settings, don't don't forget to click here on save changes. Next up is that we have the styling or colors. So, this is where you can set your global color schemes, backgrounds, and design accents to keep branding consistent. So in here we have the dark version toggle. So you can turn on the switch to change your website to the dark style version. You can enable that right here. And then um you can click here on save changes. And once it's saved is that we can try and refresh this website right here. So now let's click here on refresh. And from here, as you can see, we now have the dark version in here, which is actually not optimized that well. So, I suggest not turning this on if you haven't really optimized your website for this. So, blindly turning it on will result into something like this. As you can see, the text is not readable anymore. So, I suggest turning it off for now. Click here on save changes. In here, you can also choose the main color of the theme. So this would be the color of links, active buttons and elements. Right here you can select the color. You can click here and then you can choose or pick the color in here. Same goes for the mobile or browser bar color, site background. We have container background color slider arrows color, site slider arrows color and many more. Here in input we have the border radius, background color and border color. Here in alerts, we have the background color, text color in here, light buttons, and yeah, basically the design or styling options in here is everything right here in the styling or colors um section. And once you're done, click on save changes. Next, we also have the age verify pop-up. So, this would enable a pop-up that ask visitors to confirm their age before entering the website. So this is useful if you are selling alcohol, adult or restricted products. So you can enable this just like that. And you also have the developer mode um available in here. If you need some time to test your age verification pop-up, you can use this mode in here. And note that the pop-up will be displayed on each page load in developer mode. And here you could enter the title text for the pop-up right here. So you can see this is the before you enter and then the content in here. Are you over 18 years old? This website requires you to be 18 years or older. So you can customize this text in here. And then we have the agree button text. You can go for yes I am and deny button text. No, I am not. You can also customize it right here. And we have the deny button redirect. So if they choose the no button or deny button, you could just enter a link in here to redirect them. like for example google.com and you can also leave it empty. If you would want to open the error content which is basically like this and now let's say that um I'm not going to be putting anything in here. So we'll be going here into the error content settings. So you can see that we have the error title text access forbidden and then the uh description or text in here that you could also use. And we have the pop-up style, the alignment, dimensions, and many more right here, including the colors and other controls. And basically, um, once you're done is that I'm just going to go and, um, enable this. And basically, I'm going to click here on save changes. And let's see. I'm now going to go here and refresh the site. And as you can see, we now have this notice in here. So, this is the age verification popup. So when I click here on no I am not I can see the access forbidden in here. So I will not be able to access the website anymore. Next is that we have the WooCommerce shop um settings in here. So it's a drop-down menu and there's a lot of options that you can actually customize in here. So this is where you can control the shop page layout, product read styles, quick view, wish list, cart behavior and many more. So in here we also have the shop page filters. Here under shop and then product design catalog mode. You could enable it right here. We have the shop elements. So there's actually a lot in here. Single product page cart page. So there's a lot of features here that you can enable or customize. And yeah, basically all about the WooCommerce shop or plugin that we have installed. And this is also where you could customize them if needed for your product. Next, we have the typography. So, this is where you can set your global font sizes and line heights for headings, body text, and buttons. So, here you can choose the font family or the font style that you want, the variant right here. So, basically um all um similar to the size. So, you can go for ultra light, light, book, medium, semi bold, and bold. You can choose that right here. And here the font size itself you can indicate line height, letter spacing, text transform and then your font color. We also have the paragraphs font size, line height, headings and many more. So that's typography. It's very easy to understand all about text. Next up we have the blog. So in here you can go for the blog layout or the single post. So this is where you can configure um the post styles, meta display and related post also. So here the blog layout is uh you can choose the layout itself right here. So you can choose which one and the post brow full width massenry side position and many other features here regarding the layout of your blog. And we also have the single post in here. So there's also a bunch of options and again we have the layout for the single post sidebar position and more. Next is that we have the portfolio section. So this is where you can manage portfolio or project layouts if you would want to showcase your creative work. So in here you can enable portfolio projects. In here you could toggle on or off for this feature and you can now customize the portfolio page. If you enable this you can select the page. So actually you can add a page um exclusive for a portfolio. Um that is what I recommend in here but I haven't added it um as of now. So you can just select which page in here that you would want to use for portfolio. And we have the filter categories type. So if you'd want to show all portfolio categories for filtering projects, you can choose all. But you could also go for only parent if you would want to prevent the display of subcategories for filtering. You could go for full width, stretch, first project, masonry and many others right here. So we also have the project designs, image size in here that you could um customize. And yeah, this is basically it for portfolio. Next we have social sharing. So for this one, this is where you can enable sharing buttons on products, post or portfolio items. So in here you can include the website socials. You can select which website socials you'd want to include and then you can copy the link on click. So this would enable the feature to copy the sharing link to the clipboard when it is clicked. So I suggest um turning this on. I like to turn this on right here. And then we have the icons field. So you can enable this option to restyle the social media icons with field background colors according to the unique color scheme of each social media platform. I personally don't like this one, so I just keep it disabled. And from here, click on save changes once done. Next, we have GDPR and cookies. So, this is where you can add cookie content, banners, and GDPR compliance notices. So, basically, if you notice when you go into a website and they are asking for uh cookies, this is basically the setting in here. You can enable that and then you could um see some options. So you can show on desktop, show on mobile view and you can also um change the position of the banner animation type and the cash lifespan in here. So the customers agreement choice will be stored for a day limit you set in this option. So this is also another um important um setting here in the GDPR and cookies and then the content in here. So this website use cookies to improve your experience. You could also customize this if you want. Page details, static block, and many more right here. So, we have the pop-up style settings that you can customize here also. Next is the 404 page. So, this is where you can customize the page not found screen with your own design and helpful links. So basically, you can just go here into the content and just type out whatever message you would want to to put for the customer to see when they land on an error page or 404 page. And yeah, that's basically it. You can also go for code if you would want. Next is that we have the theme custom CSS. So this is where you can add your own CSS rules to override or extend theme styling. So, this is where you can uh add some codes. If you are knowledgeable about that, but if you're a complete beginner with no idea in coding, then you can just skip this one out. Um, this is not for you. This is for those uh geeks that would be able to use this um feature with coding because you would need to actually put some codes in here to use the CSS or the theme custom CSS. Next is that we have the speed optimization. So this is where you'd be able to um customize the options for lazy loading, minification, and performance tweaks to improve site speed. So all the settings in here is designed to improve the speed and performance of your website. So in here we can disable pjax uh pagenation. So you can use Ajax instead of pjax for shop, blog and portfolio pagenations. If um Ajax is fine with you, then you can click here on enable and it would um improve your performance. If Ajax is compatible with your website and we have the image loading type. So to improve the site loading speed, there is a beneficial technique that delays the loading of offscreen images which are considered non-critical resources. So in here you could go for lazy. So in this uh way um the images will be replaced by a 1x one pixel placeholder and the LQIP means lowquality image placeholder initially loads a lowquality small version uh size of the final image and fields in the container. So basically these are downgrades if you'd want to prioritize um site performance over quality of the images. So, I'm just going to go for default in here because I think the image is important in my site. And then we have disable native WordPress lazy loading. So, you could also um enable this right here so that there will not be no lazy loading in here. If you are not lagging at all, then it would be better if you enable this. But if you're lagging and need more performance, then um you could just go and try and experiment toggling it on and or off and see which one is better. And then we have the rocket delay disable old browser support um Ajax menu dropdown. So you could also use Ajax for your dropown menu and then the dropown cache and static block cache and many more right here. So, there's a lot of settings in here that you can use to improve your site performance. We have also the disable emoji in here, embeds, and many more right here. So, this are the options that would help you optimize your speed and performance for your website. Next is that we have the live theme options. So, this is used for previewing changes in real time before publishing the site. And it will take you here into the editing page. And then you can go for the general layout. And basically this is also the theme options in here. And you can go for different mobile views or uh I mean different views in here. We have the tablet and mobile views also available in here. And also notice that these are all the theme options. So that's it. And then lastly we have the import or export. This is essentially where you can save your theme settings or transfer them to another site. So you could use export if you'd want to transfer this to another site or import if you'd want to use another file and import it here into a store. And that's it. Next is that we'll now be going to the app store builders. We are now done with the theme options. And in here, this is basically where you can um see a set of powerful tools that would let you design and control specific parts of your site without needing extra plugins. So instead of relying only on Elementor for page editing, Xto gives you dedicated builders for key areas of your store. So as you can see, we have header builder, footer builder, single product, products archive, cart page, and many, many more. So you could just choose which one you would want to edit. For example, I would want to edit the um header. You can click here on go to builder and then you could choose via elementor or customizer depending on the editor that you have chosen to install here on your Xar theme. Let's say element. Now I'll be taken into element and it will um show me the header. So this is my current header in here. And now you can click here on edit on the top right and it will now proceed into editing the header. So we just have to wait for it to load for a bit. And as you can see we are now taken back in here into the editing page. So basically the same thing to do earlier. Um you can just click here on the header and edit your things right here that you would want to edit. And basically the same thing goes for the other parts in here. For example, the cart page builder. I'm going to click here on go to builder. And then now, as you can see, I am now in element once again. Same as the one before. And now I'm taken here into my shopping cart page. As you can see right here, I'm in the cart section. And now I can edit the this page right here. So I can just click on the things or elements in here. So yeah, this is very useful if you'd want to navigate to the specific pages here in your app store theme website so that uh you won't get lost and you can see everything and go there easily and edit them with ease. All right, so now next is that we have the sales booster. So this is basically a collection of built-in tools designed to help you increase conversions and sales on your e-commerce store. Instead of installing multiple plugins, ASTOR bundles this marketing and engagement features directly into their theme. So you don't have to go away from a store and you can choose which one you need right here. Like for example, I want to try the fake sale popup in here and activate it on our site. So now I'm going to click here and activate. And now there would be some pop-up in here to let us modify the uh sale booster um element in here. So we have the fake sale popup and you can use this option to enable or disable pop-up elements. You can go for image time ago and many more. So what um appears here highly depends on what um sales booster or builtin uh tool that you have chosen in here. So in this case this it's the fake sale pop-up. So I have this options in here. You can put in the settings right here that you would want for this um certain uh feature. And in here we can now go for price. Enable that. And we have hide out of stock products, sound notification, custom audio file, and many more in here. So we also have the pop-up animation. So I'm going to go for slide up for this one. And then once you're all done with the settings in here, you can click on save changes and settings successfully saved. And now we can um close that. And from here, let's go and refresh our um website in here. And now, as you can see, we now have the fake sale popup in here on the bottom left. So, this is what it would look like. And this product that is shown in here is actually from the product that we have um added in WooCommerce. If you remember, this is the price in here. This is the original price which is 5,000 and we reduced it to the sale price of 4,500. And in here they can actually click here on view product so that they can go into the product page of that certain product and purchase it from here. So yeah, that's the sales booster, which is the fake sale pop-up. And there are a ton more that you could add into your website so that um it would be able to help in getting you more conversions or sales. So this is also a really helpful feature here in XTOR um theme. One of my favorites. Next is we have the email builder. So in XTOR, this is a feature that would let you design and customize the transactional emails that WooCommerce sends to your customers. So things like order confirmations, um, shipping updates, password resets, and account notifications. So instead of plain generic WooCommerce emails, you can make them match your store's branding and look professional with this feature. So now let's enable it. I'm going to click here to toggle it on. And now wait for it to load. And in here you can now go here. As you can see it says your email builder is activated. You can now try it by clicking the button below. So here you can go for developer mode. If you need some time to build your own email templates and keep the region wants to be sent for customers, you can use developer mode uh for the meantime. But if you're not yet live, then you can click here on go to email builder right away. And in here is where you'd be able to see the email templates that you have. So in here we have this one right here for canceled orders. Right here we have the failed orders, order on hold, and many more. So you could go for each email on which one you would want to edit. For example, here on canceled order, I'm going to go click here on edit and it will now take me here into the email editing page. And now you can see the elements. So, basically very similar to the Elementor that we did earlier. It's still a drag and drop um editor in here. You can go for the layout, the content, and here on the right side is where you'd be able to um customize some other settings in here. And if you would want to customize an element, just simply click on it and then navigate to the left menu. Very similar to what we did on the element in in editing our website. So basically the same concept in here and then we also have the editor in here. Um this is where you'd be able to go into the editing the specific element that you have selected and elements if you'd want to add elements. So it's basically that simple. So just need to apply everything that you have learned in uh earlier in creating or editing the uh theme website here from XTOR. And once you're done, you can click here on update. And that's basically it. You have now updated the uh theme or you have now built your email in here with your own preferences or with your own design. So when you click here on update, it will now be saved and you can now go back and go for the other email templates if you would want to. You could customize them all. And that's basically the email builder here in X store. Next thing to discuss is that we have the patcher. This is another useful feature. So, you want to go here to keep your theme up to date with fixes and improvements. As you can see, there's a bunch in here that's available. You can click here and apply to install it. And this would ensure compatibility with WordPress and WooCommerce updates, especially when you're facing errors. Next is that we have the custom fonts under content management. So, this is where you'd be able to upload and use your own fonts beyond Google fonts. that is by default available here in X store. And take note that the uploaded fonts you uploaded in here, you will find it in customizer and typography section. And you can select the font from there. You can click here and upload font and basically just upload a file in here to install it into your X store website. And then yeah, that is basically it on how you can do custom fonts. Next, we have the slides section. So, for this one right here is where you can see the built-in slider feature for banners, promotions, or hero sections. So, you could add a new slide if you don't have one yet by clicking here on add new slide. And then you will now be taken into another page. And this is basically like the XO studio that we did earlier. So, let's just wait for that to load. And here we are in the Xto templates. As you can see, it's very similar to the studio. You can just choose which slider you would want to add to your website. For example, I want this one. I can now uh click here on insert. You can also preview it first if you'd want. I just want to go for insert right here. And now it's loading. And now you can edit the um slider in here. You can change the text, the image in here. So basically the same process as we did earlier when editing the website. It's still in Elementor. So basically the same thing on how you'd be able to edit this and replace it with your own site's details. For now, let's say that everything is now done. And basically what you want to do from here is that you would want to go and um click here on publish once you are ready. And yeah, that is basically how you can use the slides. And now when you refresh it from here, you should now be able to see this slide in here that you have just created. And you can edit it from here anytime or view it anytime. Next is that we have the mega menus available. So you can create advanced drop-down menus with images, icons, and multiple columns, which is perfect for large stores with many categories. So you can click here on add new mega menu. Once you're here in mega menus and now we'll be taken into another um thing just like the um the studio that we did earlier and with the slide. So let's just wait for that to load. And here we are on the templates again. But for this time this is for the mega menus. So you can choose which mega menus you would want to use on your website. Like for example I would want to use this one. I'm going to click here on insert. And now we'll be prompted into the editing page once again once this is loaded. So let's just wait for a bit. All right, here we are on the editor page. And from here you can now edit each category in here. Like for example, this one. I can just click on that, navigate on the left menu and customize the text from here. And some other options like the style, content, and advanced. Basically the same thing that we did earlier in element. You can still use it right here. And that applies to the elements, all of the elements here in this mega menu. And now once you're done, you want to make sure that you click here on publish. And now to apply it into our website, we would need to go back into this uh settings in here in the um builder. So exter need to go into the header builder because that is where we'll be putting the mega menu. I'm going to click here and go to builder and then element. And now let's just wait for that to load. And once it's here, you're going to click here on edit on the top right. And now once you're here is that you just basically would want to navigate here into the elements. And you just need to find the mega menu. And now in here, you just simply would want to drag it into where you want to put it. Let's say I want to put it here on the uh bottom of the header right here. So just like this one. And in here you want to click on the mega menu. And then just need to go here into the edit mega menu and go into items. And here you can edit the menu item in here. Like for example um all products. And then in here you can go for the content type. And just make sure that you select mega menu. And there it is. And now in here you have some other options in here that you can customize. But basically the mega menu should now be working just like this one exactly as the template that we did um earlier uh just like this one right here. So you should now be able to see it on here as a mega menu just like that. And that's basically it and how you can apply your mega menu here on your website. And now lastly is that we have the search analytics feature here in a store which you can find here under performance and optimization. So this is also a new feature. You want to enable this just like this one right here. So what this would do is that this would track the visitors search on your site so that you would be able to understand your customer intent better and optimize product offerings based on that data. So as you can see right here the currently the search data is empty. So this is a new site. So we don't have any data yet. So it would take some time for them to collect the information and you'd be able to see that information in here. So yeah, this is basically it for the Xto theme tutorial. I hope this video has been very helpful to you. That's everything you need to know in order for you to start using this effectively. And also again, you want to use the link in the description if you'd want to support our channel and get the best deals possible for Hostinger, for the XOR theme if you want to get this, and also for mozz.com for SEO purposes. That's it. Thank you for watching and see you in the next