Theme, images, & CSS

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

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.

Themes

Liftoff offers a collection of unique themes, each with a variety of color schemes to choose from. Every theme in this area is fully responsive (i.e. 100% mobile-friendly).

Theme demos

For each theme, there exists a live preview, allowing you to see an example of the theme in action (complete with sample 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 the selected theme will be applied to your site.

891891

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; however, 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

This is the tiny image that appears to the left of your site's URL and, in some browsers, on the "bookmarks toolbar."

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

10151015

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

Any valid CSS 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.