Create Site Branding Design
When creating a new Shopify site, we need to create the "brand" design for the site.
Take information from BaseCamp submissions from client, as well as current website work. Designers should feel free to contact client designer (see New Site Information for contact information) for assistance or information.
Note: Site designs are only to be reviewed by the client as allowed by the project tasks. In order words, don't share new site design schemes with the client without clearing with the Project Manager.
Note: Using DropBox It is important that we keep all source, original and created artwork related to our projects. We use DropBox for that purpose. Take a moment to see how we label DropBox folders and files (using the [StoreCode] as a prefix, for instance). Store ALL work produced in DropBox
No exceptions.
Create Logos
Branding usually begins with the brand's logo. While there may be variations used in the final site design scheme, we need to obtain and create versions of the client's logo for various purposes.
Create Master Logo
So that all versions of a site logo can be created for the website, as well as for future uses, create a "Master Logo" .psd or .ai file:- File width should be at least 2000px wide, unless it's simply impossible to obtain logo art that big. Otherwise, size as large as possible with good resolution. Minimum width should still be at least 600px. If this cannot be created, we need to go back to the client for assistance in obtaining a larger logo art.
- Store in the site DropBox folder under the [StoreCode] Design folder.
- Name the file [StoreCode] Logo.[psd | ai].
- Minimize extra space around the logo. We can always pad around a logo, but we don't want to have to crop the logo art each time we need to create a web version.
- Create the following layer groups with the appropriate versions (please properly name each group and layer for easy reference):
- 4C Light BG (Full Color, Light Background)
- 4C Dark BG (Full Color, Dark Background)
- GS Light BG (Greyscale, Light Background)
- GS Dark BG (Greyscale, Dark Background)
- BW Light BG (Black/White, Light Background)
- BW Dark BG (Black/White, Dark Background)
- Where a full-color version is not used by the brand, the 4C group can be left out.
- If there is a "tag line" or slogan that optionally appears with the logo, make sure to put on a separate layer so that it can be included or not depending on the need.
- Be sure to include any trademark or registration marks that belong to the logo.
Web Logos
Once the Master Logo is created, you can create certain default web versions that we are expected to need when constructing a new web site. The design specifications of a site may dictate different sizes, but it's important that we create certain versions for various required uses.
Save these versions in the [StoreCode] Design / [StoreCode] Web Logos folder in the DropBox (if this folder does not already exist, please add).
- Header Logo. [StoreCode]-logo.png 400px wide. Use 4C Light BG group.
- Header Logo Dark BG. [StoreCode]-logo-dark.png 400px wide. Use 4C Dark BG group.
- Email Logo. [StoreCode]-email.png. 100px high. Use 4C Light BG group.
- Email Logo Dark BG. [StoreCode]-email-dark.png. 100px high. Use 4C Dark BG group.
If there is an optional tag line, then create the same as above, appending -tag to each file name (e.g. [StoreCode]-logo-tag.png).
Multiple Sizes
When multiple sizes are required for any of the default logos, append the size to each version so others will know the size that is being used. For example, if you create a 500px version of the Header Logo, the file name would be [StoreCode]-logo-500w.png for a 500px wide version. If you need to note height, use "h" for the size.
Alternative Logos
In some cases, brands have multiple logos or "pieces" that are used for various design purposes. When these are provided, please create the highest resolution version you can and save as a .psd or .ai file so that any web version can be created later. You should create the same layer groups as for the Master Logo. Name the file appropriately.
Create Site Assets
Based on the design scheme, create the various banners, images, alternative logos and headers needed to construct the actual design in our Shopify Base theme. Store all assets in DropBox.
Create Client Design Scheme
Each client will have their own unique design scheme. Their styles need to be recorded and saved in their project file.
Create Style Tile
While it may be necessary to create full layout mock-ups in Photoshop, in most cases a "Style Tile" is sufficient to communicate layout parameters to the production team. Creating headers, major components (category product layouts, sidebars, banners) and the like are usually enough to allow our production specialists to create the desired look and feel.
Color swatches for various elements, while specified in the Design Specifications (see below), provide visual cues for clients and staff alike. The Style Tile is very much akin to what an interior designer puts together to show their clients various swatches of carpets, wallpapers, paints and trim.
Create Design Specifications
In most cases, our responsibility is to tranfer the client's current e-commerce brand to our Shopify platform. Depending on the input of the client, we want to take the client's brand and apply it in new, updated fashion on the platform. Chances are, the client's current site has neither responsive design or up-to-date usability. Therefore, it is our responsibility to construct a design that maximizes sales conversions while providing maximum brand impact.
While a design for a site can be created as a Photoshop file, it works best to only provide sketches and guides so that the team can build right onto the platform to expedite the development process and provide everyone with a real-time design to evaluate and test.
When specifying fonts, try to identify a Google font that can be used. Google fonts are faster to load and easier to implement. Go to https://www.google.com/fonts to see the full selection of 682 available font families. Be sure to note what weights are available for various fonts. Available weights vary by font family. When you specify a Google Font for an element (e.g. H1), specify both the font family and weight (e.g. Lato, 900).
In order to create the Design Plan, you need to create a Notebook file in the TeamWork project plan (if a file doesn't already exist). In this file, create the following sections and information:
- Header Design. A .psd and/or instructions for how to create the header and top navigation. It's important to map out where the top navigation and any other secondary top navigation should appear. The size of the logo should be specified, as well.
- Body Design. Description of how the main content or body of the site should be designed, including any background elements, parallax effects, etc.
- Footer Design. Description of how the bottom footer should be crafted. The very bottom footer (with the copyright and powered by) should also be described; however, the elements of this section cannot be changed: only the colors and fonts can be altered.
-
Fonts. Specify font family and sizes for:
- H1
- H2
- H3
- H4
- body text
- any special text elements
-
Color Palette. Specify the hexadecimal values for the following:
- Primary button
- Secondary button
- header text
- body text
- footer text
- header background
- body background
- footer background
- navigation elements
- link
A Word about Primary Color/Button
Throughout our sites, we use the Primary color to denote the one, singularly important action we want a buyer to take. For instance, on a product page, the "Add to Cart" button is the primary action. On the cart page, the "Checkout" button is the primary button, while the "Update Cart" button is a secondary action. Therefore, the "Checkout" button would have the primary color, while the "Update Cart" button would be given the denoted secondary color.
It's important to consider the color that should be used as the site's Primary button color, as it greatly impacts sales conversions and usability.
Configure Theme
The OLM Base Theme is now configured to achieve the goals of the Branding Design scheme.
As you configure the theme, make sure you adhere to the following guidelines.
Customize Theme
In the Shopify store backend, go to Online Store > Themes. By clicking on Customize theme, you have access to a long selection of various panels which contain many settings for colors, typography, etc.
As you customize the site, make sure you utilize as many of the settings rather than use CSS for styling. This will make future adjustments easier. For detailed information about the Theme Configuration panels, see OLM Advantage Theme Basics.
Using Google Fonts
If the branding design calls for a Google font to be used:- Go to https://www.google.com/fonts.
- Find the font as specified in the Design Scheme.
- Click Add to Collection.
- Find any additional font families specified and add them to the Collection (which will appear the bottom of your browser window).
- When you have added all specified font to your Collection, click Use in the Collection area.
- For each font family listed in the Collection, select any specified style (or weight).
Note: Do not select more styles than necessary, as it can impact page rendering time.
- In the area, 3. Add this code to your website:, copy the link reference shown.
- Go to Online Store > Themes in the Shopify store backend.
- Click Customize theme.
- Open Advanced panel.
- Paste the Google link copied above into Custom header code. (Note: When using Google Fonts or any outside source, use "//domain.com" instead of "https://domain.com" in the link tag. Leave out http: or https:. All sites go SSL when they go live and having one or the other will compromise the security. If you leave out the http: or https:, the browser will add the appropriate protocol.)
- Click Save changes.
Custom Fonts
Font Squirrel - Use Font Squirrel's web font generator to convert most licensed fonts to a web font for embedding.
If you already have a font, but not the format required by @font-face, convert the file at http://onlinefontconverter.com/
Converting WOFF to TTF - Sometimes the only available font is a WOFF, so use the Everything Fonts website to convert to a TFF. https://everythingfonts.com/woff-to-ttf
In the event that none of the above sites convert the font, use Fontie https://fontie.flowyapps.com/home
1. Upload fonts to /assets folder 
2. Open and edit the "custom.scss.css.liquid" file from the /assets folder. Change the url name to the name of the fonts uploaded in step 1.
@font-face {
font-family: 'HelveticaNeue-LightCond';
src: url('HelveticaNeue-LightCond.eot');
src: url('HelveticaNeue-LightCond.eot?#iefix') format('embedded-opentype'),
url('HelveticaNeue-LightCond.woff2') format('woff2'),
url('HelveticaNeue-LightCond.woff') format('woff'),
url('HelveticaNeue-LightCond.ttf') format('truetype'),
url('HelveticaNeue-LightCond.svg#HelveticaNeue-LightCond') format('svg');
font-weight: normal;
font-style: normal;
}
Copy the font-family name from within the single quotes and add to the typography section (e.g. 'HelveticaNeue-LightCond'; include single quotes.) .
Modifying Theme Files
Occasionally, a .liquid theme file needs to be altered in order to achieve the desired layout specification.
Note: If you're not familiar with .liquid theme files (.liquid is the template "language" used by Shopify), please ask the Project Manager to assign this task or a sub-task to an experienced team member. Incorrect changes in a .liquid theme file can have very serious consequences, although if you follow the methodology described here, any coding errors won't affect core .liquid files.
To modify a theme file:
- Go to Online Store > Themes.
- Click the … button and select Edit HTML/CSS.
- Click Add a new template to create a new file.
- Open an existing template file you wish to modify and copy and paste it's contents into the new file you created.
- Save the file, naming it by using the name of the existing template file and inserting .[descriptor] just before .liquid.
For example, if you need to modify the "product" template file (product.liquid), you would create a new file and copy all the existing content of product.liquid into the new file. If the new file is for digital products, as an example, you might name the new file product.digital.liquid. In this way, this file would appear as a possible choice for a given product.
If you need to modify the product template for all products, we still want to avoid modifying product.liquid and, instead, create a new file called "product.default.liquid" to signify to users that this would be the template file to use for all products. In this way, any future theme updates would not affect your modified files.
Note: One exception to this process is when the entire theme design needs adjusting. In this case, the theme.liquid file can be directly modified. However, before doing so, a backup copy of the existing theme.liquid file should be created just in case.