The Commerce Kickstart Theme is based off the Omega Base Theme, so a healthy knowledge of Omega will allow you to manipulate the presentation of your website.
To edit the regions and zones of your site, you can edit the YOURTHEME.info file as per the tutorial or in the original Omega Documentation. The Zones and regions determine where you may place your blocks and content etc in the theme settings itself.
To configure the behaviour of the website, edit the regions (column width etc) on your sub-theme settings on your admin as such:
yoursite.com/admin/appearance/settings/THEME_NAME
Scott Tolinski of LevelUp Tuts did a tutorial on how to edit this which can be quite helpful:
http://leveluptuts.com/tutorials/drupal-tutorials/58-drupal-theming-omega-101-4-omega-settings
Finally, to tweak the CSS of your site, you will need to understand how the CSS is managed. All CSS should be located in your \sites\YOUR_THEME\drupal-7.XX\sites\all\themes\THEME\css
folder.
By default Commerce Kickstart like all Omega themes will contain a global.css
, theme-alpha-default.css
theme-alpha-narrow.css
, theme-alpha-normal.css
, theme-alpha-wide.css
files. Global is the primary CSS you'll be operating in, just be sure you tweak the CSS in a mobile first manner. Anner media query specfic styling should be handled in the appropriate style sheet.
Now, since you are using Kickstart there will be a lot of pre-configured CSS; some of which may become useless or unused if you tweak the regions and zones too much but hopefully once you understand Omega better you will be able to make tweaks to the aesthetic as appropriate. I highly recommend Level Up tuts video tutorials as a basic, and try to read the Omega Documentation to understand how to handle the theme appropriately.