Borders > Layout & Borders
Borders is a really versatile theme with a lot of available settings for a creative layouts. The two main areas of interest when customizing the theme's design are layout & borders.
Layout
In the layout settings you can control the paddings, margins, size, border radius of all the elements of your store.
Main container
You can set a horizontal / vertical margin for your main container, which helps if you want a "boxed layout". This margin is responsive, meaning that if you set it to a really large value (eg: 50px), it will decrease as you reduce your screen's size. Also, you can choose to completely remove any margins on mobile devices in order to get the most of the little space you have there.
One last interesting option is the ability to have a fixed centered layout, where on large screens the content will not fill your entire screen, but be centered with a fixed width of 1360px.
Grid items
This theme's design is based on a strict grid system, so here is the place where you can edit the padding within all grid items and also the border radius, which applies to any element that has a padding.
Even if these are general settings that affect your entire store, you can still change the grid design for most of your sections, individually, having almost complete freedom on your layout.
Borders
The most interesting part of the theme's customization capabilities is the Borders area, which allows you to control how the grid is divided by handling borders at a section / page level.
Main container
The main container border refers to the border which is around your entire store.
If your check the "Remove margins on mobile" option in the Layout settings, the border you set here will not be visible on mobile devices.
Primary borders
This is the border that you will see the most, because it appears between all inner grid items and also inside the drawers & menus. Again, it's something that you will be able to remove later at a section level.
You can also add padding to these borders, padding which will take it's value from the inner grid padding set in the previous section.
The width of this border is maxed out at the secondary borders width. For example, if your primary borders have 10px width but your secondary borders have 5px width, your primary border will only display a 5px width.
Secondary borders
The secondary borders are less visible because they only separate sections, so you will see them at the bottom of any section. Again, you will be able to remove this border for any individual section.
The padding option is more complex here, because you can add it only inside the main container & footer sections, and keep the header out of it, or add padding everywhere.
Modals / drawers
As previously written, all drawers and modals will inherit the border style that you set above, with the limitation of 1px for the width! However, if you want to disable borders completely inside drawers, you can do so here.
