Theme, images, & CSS

You can adjust these settings by navigating to Website > Design.

A note on browser compatibility

All themes support the three most recent versions of the following browsers:

  • Apple Safari
  • Apple Safari Mobile (iOS)
  • Google Chrome
  • Google Chrome Mobile (Android)
  • Microsoft Edge (Chromium)
  • Mozilla Firefox

As part of our efforts to provide a secure, modern, and efficient experience for all subscribers and customers, support for legacy browsers (including Internet Explorer v9 - v11 and non-Chromium versions of Microsoft Edge) officially ended on March 31st, 2021.

Theme

Liftoff offers a collection of nine unique themes, with a combined 50 varying color schemes. Every theme in this area is fully responsive (i.e. 100% mobile-friendly).

Theme demos

For each theme, there exists a Live Preview so that you can see an example of the theme in action, complete with images and content, and decide whether it's the right one for your site. When you've made your choice, click the Activate Theme button, and you're ready to go.

Screenshot
Description

Aegis

A professional but friendly theme that looks great on a variety of storefronts. Compatible with IE 10+, Chrome, Firefox, Safari, and mobile browsers.

View Demo

Altair

Altair is a theme for modern browsers with a variety of color schemes. This theme shines with longer category and product descriptions, and features a more information-dense product landing page than normal. Compatible with IE11. "Evergreen" browsers (Chrome, Firefox, Edge, other auto-updating browsers) recommended.

View Demo

Denali

A clean and classy theme that looks great on boutique-style storefronts. Compatible with IE 10+, Chrome, Firefox, Safari, and mobile browsers.

View Demo

Haute

Haute is a fun, modern theme which works bets with evergreen browsers (Chrome, Firefox, Edge, Safari, other with auto update features) and utilizes rich colors, great for emphasizing your branding. This theme features a sidebar with collapsible categories, and prominently displays contact information for your customers' benefit.

View Demo

Lionheart

A contemporary design that puts your products and content at the forefront. Compatible with IE11, Microsoft Edge, Chrome, Firefox, and mobile browsers.

View Demo

Matterhorn

A causal and friendly theme that looks great on laid-back storefronts. Compatible with IE 10+, Chrome, Firefox, Safari, and mobile browsers.

View Demo

Nebula

A modern and crisp theme that looks great on casual and cool storefronts. Compatible with IE 9+, Chrome, Firefox, Safari, and mobile browsers.

View Demo

Vanguard

A clean and professional theme that looks great on corporate storefronts. Compatible with IE 9+, Chrome, Firefox, Safari, and mobile browsers.

View Demo

Vox

A vibrant and sharp theme that looks great on tech-style storefronts. Compatible with IE 9+, Chrome, Firefox, Safari, and mobile browsers.

View Demo

Images

Company Logo

This image generally appears at the top left of each site's page. It's also the image that appears on every outgoing email generated by the Liftoff system. If you like, you can override this image within emails. The email settings article explains how.

Logos must be a transparency-enabled PNG or GIF file. Images must be at least 300px in width/height.

Background Image

In most cases, this is the image you see on the login / registration page on your site. Depending on the theme you select, it may appear elsewhere as well.

Background images should be at least 1200px wide and 600px high with a web/screen resolution of 72-96 dpi. Only JPG/JPEG images are supported. Because images can adversely affect SEO and user experience, the file size of background images is limited to 350KB.

Favicon

Need to generate one for your site? We recommend Favicon.io for an easy and free solution.

The favicon file should be a 152x152 pixel 24-bit PNG file with transparency.

Best practices for other image types

Product images should be a minimum of 800px wide, and all product images should have the same aspect ratio.

Homepage hero slides work best with ~1200x500-600. They should be at least 1200px wide.

Featured collection images should be ~500px wide with a consistent height (recommended 300-500px).

More items images should be at least 300px wide with a consistent height (recommended 80-120px).

Category images are recommended to be 800x800px.

CSS override

You can customize just about any aspect, area, or element of your site by injecting custom CSS into this box.

Any valid CSS which you place into the Override CSS area will be applied to your site immediately. In some cases, it may be necessary for users to perform a "hard refresh" in order for these changes to be loaded into their browser. First-time visitors will see your changes immediately.

Simply type or paste your CSS into this area, press the Save Changes button, and your new styles will be served alongside the rest of your site's content and styling.

❗️

Be careful with CSS

You're welcome to make whatever changes you need here, but be warned: CSS has a way of creating unintended consequences. Make absolutely sure you know what you're doing before overriding site code!

The "C" in "CSS" stands for "cascading," and for good reason. To familiarize yourself with the cascade effects of CSS (for better or worse), we suggest the following:

CSS from Mozilla Developer Network
This is a highly technical article. If you're just starting out, you may want to review the article below instead.

"The C in CSS"

🚧

My CSS changes aren't showing up!

In some cases, it may be necessary to perform a "hard refresh" before your CSS changes are loaded into the browser. This can be done in most browsers by holding the SHIFT key while clicking the reload button, or by pressing CMD+SHIFT+R on PCs running Mac OS, or CTRL+F5 on Windows PCs.

You can learn more about this at RefreshYourCache.com.

In other cases, you may have syntax errors or incorrect selectors in your CSS. CSS is an advanced topic, and this feature is intended for use by users with prior understanding of CSS. If you are unsure of how to proceed, it is recommended to review third party training materials on CSS before utilizing the CSS Override feature of Liftoff.