Modules, Layouts and Themes

Modules, Layouts and Themes

okay so let’s move onto something a little more involved, let’s move onto how to modify actual pages to your website. Now with most systems this would involve a lot of coding and HTML, or would require you to be okay with whatever theme you were provided with. We at Saleturf have had to live under both of those umbrellas at past jobs, and we decided that those options were outdated.


So we built our own system, the modular layout theme system. This can be accessed by going to the system setting on the left, and looks like this


the system is split up into smaller, easier to work with chunks, that as a whole allow you to easily modify your website yourself, and end up with a very nice looking site, that functions how YOU want it to, not how some web developer THINKS your store should work.


To begin, let’s start with the smallest part, the modules. To begin let’s look at the front page of Seeca Beauty, our test company we use for illustrating how all of this works.


pretty bare bones, but functional. We have a top bar with search, shopping cart and favorites, a search bar below that, and then a menu mar, with bags and cases, beauty tools, a test category, and nails. Below all of that we have a carousel listing our “top products”. And below that


we have two buttons, one to take you to beauty tools and one to take you to bags and cases, and below that we have 4 featured products. All pretty standard looking.


Now before we go any further I want to state we are going to try to explain this in as much detail as we can, while still making it easy to understand, as we know most stores we cater to don’t have their own dedicated web developer on staff. We can help build out your site upon request, and we are more then happy to do so, but we also understand that sales is a fast paced game, and sometimes you need to make changes in minutes not hours, so we have built this system in here so you can do just that. With that said, let’s look at the back end, where all of the moving parts that let this work live.


The modular layout theme system works like this, you have individual modules, things like that search bar or the carousel that shows a rotating group of our most popular products, we have dozens of those individual parts that get LAID OUT on pages. So we create modules and then we go to the layout section to well, lay them out


modules looks like this


there's a lot here I know, but it will all make sense here in a moment. On the right you will notice that most of these items only have one button, the purple edit button. That is because most of these are the default items that come stock with a Saleturf website. We will get into how to create NEW MODULES later in this tutorial. Clicking on many of the edit buttons for these will likely take you to a pretty simple looking page, which will look like this

and others will look like this

let’s try disabling one of these items, for this example I am going to go to “featured top products” one of the non stock items for Seeca Beauty


I am going to click on edit, and change enabled to disabled, and see what that does to our website


and I will change that


and click the purple save at the top right


now below our two buttons to beauty tools and bags and cases we see that those 4 featured items are gone


we can put them back by just changing that disabled back to enabled too, which I will do.

We can also change what is included in those featured products here as well, a very common thing for an online store to do


you can also change the limit of items shown here and the height and width of the section in pixels.


So that is the basics of WHAT a module is, it is a single piece of the site, that can be turned on or off and is designed as one single building block of the website itself.

but how do we get NEW MODULES? Well it turns out that is incredibly easy, there are TWO WAYS to create new modules, let’s open up one of those stock modules, for this example let’s look at featured for this first example


inside at the top, type in a NEW MODULE NAME

I did this, added a few products to it and changed the status to enabled so later in this tutorial when we place it within the website it will launch automatically


then just click save in the top right, and there you have it, a new module! Now this is the simplest way of making a new module, its easy to do and its fast, its great for making slight modifications to one or two items so you can change thing sup on different pages.

so let’s look at the second way to create a new module, let’s go back to our modules screen and click on the module designers button towards the bottom of the screen


Well thats all well and good you might say, but what do I do with that? How do I place that on my website?
Clicking on this takes you to a fairly familiar looking module screen, but with one VERY important difference


it’s that button there that says Open Design Editor go ahead and click that, when you do you’ll be greeted with this.


now this is a much more complicated way to create a module, but with complexity, comes power. Let’s look at what all this thing can do. Let’s look around the module, starting on the top left, here you can change the view of your website from a standard computer monitor, a tablet, and a cell phone. Editing the computer monitor will edit all three of them, but editing the tablet and cell phone layouts will change those ones specifically, that way you can tailor the site to each device independently.


The top middle of the screen has buttons for view component, preview, full screen, view code, and in the section next to that is undo and redo, import, clean the canvas, and save. In the top right we have four buttons, style manager settings, layer manager and blocks. Below that is the work surface for that particular manager. The one listed in the above picture is for the block section. We will cover this section in far more detail in another tutorial, but here are some quick tricks you can do with it. The first

thing I want to touch on is how easy this is to do. Columns are just that, they are big slots for you to slide content into. Text, easy enough, its text. Links, links to other sites, and images, well that’s obvious. So I am going to add a column to the top of my screen


all I did was pull a picture from the server, and drop it into that top box, now if I think its too tall, I can use the items on the right to adjust it down, to let’s say 50% of its size

here is width, it’s currently set to 50% let’s change that to 20%



let’s drag and drop some text

so this is how we can put individual items onto the page, and slowly build up a module, but there is another way, and in my opinion this is the coolest thing about the Modular Layout Theme System is you can just grab code from other websites and drop it directly into the editor. Here is a page from earlier.

I am going to press ctrl A to highlight everything on this page


I am now going to drag all of this highlighted content into the white area of the manager, the easiest way is to just put both on two seperate monitors, or if you only have one monitor to push one all the way to the right of the screen and the other all the way to the left.

Once I’ve done that, I get this


is it perfect? No but it definitely built MOST of the web page without us having to do too much work. There is a LOT more to this module system, and as I’ve mentioned already, rhe Modular Layout Theme System is a very powerful tool, and like most powerful tools, there is a lot to learn. We will cover more of this part of module creation in a later tutorial, but in the meantime this specific part of the system is mostly made using a system called GrapesJs, and there are lot’s of tutorials online showing how to create very detailed sites using it. But before we dive more into this, let’s move on to layouts, and maybe try using one of these modules in a layout.

you’ll notice that Layouts looks an awful lot like modules did, and that makes sense as all the ones listed here are also the stock ones that come with all Saleturf websites as well. You will see that most of them are labelled after pretty normal parts of the website, and we will get more into what each of these correspond to momentarily, but for now, let’s focus on how modules and layouts work together. Let’s scroll down to product

product is the layout that governs the actual product pages inside of your website. Clicking on the edit button takes us here.


Let’s see what all is here, at the top we have the name of the layout, pretty self explanatory there, below that is what store this is connected to, as with Saleturf you can have multiple stores connected to one account, say if you are a makeup shop, but you have a secondary store that just focuses on selling bags, like purses, clutches and backpacks, it’s a similar enough business that your skills might work in both, but they are different enough it could necessitate a separate online store to better control SEO etc.


lastly are the modules that will be listed on that page


so first off, let’s look at a normal product web page




here is a page for a travel toothbrush bag, a pretty simple item, and a pretty simple web layout. Primary picture and price at the top, small description in the middle and things like the sku and upc at the bottom


so let’s look back at that layout for it

it’s a pretty basic layout, most of the heavy lifting has already been done for you, the standard store layout is baked in so to speak, but modules can be put over top to modify it. Let’s try doing just that.

I am going to click the plus button here, and add a module to the top of this page, just to show you how the modules and the layouts work together. After clicking the plus sign I am greeted with this


I can choose anything in there to add to this page, for examples sake I am going to choose the featured test type we built earlier in this tutorial


I am then going to put it at content top, so it shows at the top of the “content” item on the page, which in this case would be the actual item and price listed on the page, again I will explain what these “content items” are later in this tutorial, for now let’s focus just on what it is we’re doing, which is listing the featured items test type list I made earlier on the product sale page.

Lastly is the sort order, which is really does it come first, second, third etc on the page, we already have an item listed as 0, so I am going to mark ours as 1, so it shows up after that one.


So, let’s see what that looks like, so I am going to click save in the top right, then go back to the web page I was on, and refresh it by pressing F5, or by clicking refresh in my browser.


we now see that above everything, there are 3 featured items, this will look this way on ALL products since it was done on the actual product layout, so all products will be laid out this way. Now why would a company want to do this? Well I have seen this used at the bottom of pages to list popular add on items, like guitar gig bags, make up bags and other common accessories that customers are likely to buy. I’ve also seen this used to add things like banners at the top of pages around holidays to get people to know what all you have on sale, a great way to turn browsers into buyers.


Now I am going to undo these changes so the site goes back to normal


so let’s look at Layouts some more, and maybe make one of our own from scratch so we can see how it is our layout system works


let’s try this, go to the purple plus sign on the main layouts page


here I am going to give our layout a simple name, Test Type and we can look through all the parts of our Layout system


first let’s click on the plus sign for store, and we can leave that on Default as that is the primary store, but you’ll see when you click on select location that there are quite a few options


for instance heres one


now Seeca Beauty doesn’t have a product compare page, but with this, we could start to set one up. We could list it as a new layout, build a module that allows us to compare prices and then plop that in here as a new module type, and then in the theme editor, put this as a link at the top of the home page. Each of these pieces is used as part of a whole to build a website piece by piece, and we will dive deeper into each aspect of this in part 2.