Edit spacing and sizes

This is an article for old theme version - prior version 3.0 that we've launched in March 2023 where we've included this option:  https://share.getcloudapp.com/p9uZl66W

Highlight is design with a lot of white space around elements, which increases the creative feeling and makes everything well balanced. 

If you wish to play with spacing for whatever reason, you can do so very easy, since all spacing is controlled via CSS variables, so when you change one, it will apply everywhere.

For staters, open the theme's /assets/theme.css file and at the very end of it, paste the following snippet:

/*! Variables declarations 
  If you wish to change margins, paddings, heights, this is the place to do so 
  Almost all dimensions & spacing is based on these variables 
!*/
:root {
  /* large desktops */
  --grid-width: var(--grid-perfect-width); 
  --body-margin: calc(150px + var(--header-logo));
  --section-margin: 35vh;
  --button-height: 60px;
  --button-padding: 30px;
  --product-item-margin-asymmetrical: 160px;
  --product-item-margin-regular: 100px;
  --cart-margin: 50px;
}
@media screen and (min-width: 1023px) and (max-width: 1366px) {
   :root {
    /* smaller desktops */
    --section-margin: 30vh;
    --body-margin: calc(110px + var(--header-logo));
  }
}
@media screen and (max-width: 1023px) {
  :root {
    /* tablets */
    --grid-width: calc(var(--grid-perfect-width) - 80px) !important;
    --grid-padding: 40px;
    --body-margin: 75px;
    --button-height: 56px;
    --section-margin: 20vh;
    --product-item-margin-asymmetrical: 100px;
    --product-item-margin-regular: 80px;
    --cart-margin: 40px;
  }
}
@media screen and (max-width: 599px) {
  :root {
    /* phones */
    --grid-width: calc(var(--grid-perfect-width) - 60px) !important;
    --grid-padding: 30px;
    --body-margin: 50px;
    --section-margin: 20vh;
    --button-height: 48px;
    --button-padding: 20px;
    --product-item-margin-asymmetrical: 60px;
    --product-item-margin-regular: 50px;
    --cart-margin: 30px;
  }
}

These are the defaults. You can now start editing these as you wish, and the changes will reflect everywhere.. For example, let's say that you wish to reduce margins between sections, you will want to edit the --section-margin property, which for desktops is at 35vh. Just edit tis value for 25vh for example, and you'll see how spacing changes accordingly. If you do change a value, look at the other viewports to make sure that you change it for those as well (if need it).

Experiment with different values and find what works for your store.