Skip to main content
How-to

Images

StoreFront themes are built around particular image sizes, and the image CDN generates everything else from what you upload. Give it one good source image per item and it produces the modern formats and the responsive variants for you.

Formats to use​

Upload item and theme images as JPEG/JPG, GIF, PNG, or SVG. If you have images in another format, such as TIFF, convert them before uploading.

info

Item images look best square rather than rectangular, and consistent across your catalog. Sampling every item image to the same dimensions is worth the effort.

Sizes to upload​

Upload a single high-quality source image per item and let the CDN do the resizing.

GuidanceValue
Recommended source image1 to 4 megapixels
Maximum useful size9 megapixels
info

A 4K monitor is 3840 x 2160 pixels, which is 8.2 megapixels. Uploading beyond 9 megapixels wastes storage and bandwidth, and makes thumbnail generation slower, without improving what the customer sees.

Theme image sizes​

Each theme is designed around particular dimensions. Items are 600 x 600 or larger as a PNG in every theme; the featured item image is 600 x 600 as a PNG in every theme. The sizes that differ by theme are the home slider images:

ThemeHome slider
Coffee1400 x 1200
Craft1020 x 680
Elements1920 x 1080
Fashion1280 x 590
GridzyNo slider
HeroNot specified
JewelNot specified
Lifty1080 x 720 (banner)
Mr. Teas1000 x 563
NativeNot specified
Natural1020 x 680
TrialNo slider
Woodland1500 x 1000

Center the focal point of a slider image. Expect slight cropping at the top and bottom on desktop, and at the left and right on mobile.

What the image CDN does automatically​

Uploading one image is enough, because the CDN generates the rest:

  • Modern formats. AVIF and WebP, served when the customer's browser supports them.
  • Responsive sizes. Visual Builder image elements support responsive images, and a single upload can produce up to 30 variants across breakpoints so each device gets an appropriately sized file.

Add an image to a page​

Adding an image to a page takes two steps: upload the file, then reference it in the page content.

Upload the file​

  1. Open your StoreFront's File Manager tab and go to the folder you want the image in.

    The File Manager, with a page folder selected

  2. Click the File Upload icon.

    The File Upload icon in the File Manager toolbar

  3. Either drag the file onto the Drag files here area, or click Add Files and browse for it.

    The file upload dialog

  4. Click Start Upload.

    The queued file, ready to upload

The file then appears in the File Manager.

The uploaded file listed in the File Manager

Place it on the page​

  1. Go to StoreFronts → Pages and click the pencil icon for the page.

    The page list with the edit icon

  2. Open the Content tab.

    The Content tab of the page editor

  3. Add an img tag referencing the uploaded file.

    An img tag added to the page content

  4. Click Save and Preview.

warning

The URL is case sensitive. The filename in your img tag must match the uploaded file exactly, or the image will not load.

Upload your logo as GIF, JPG, or PNG.

info

Use PNG. It gives better quality for the limited color range of a typical logo, and it supports transparency, which lets the logo sit on any theme background cleanly.

How you upload it depends on whether your theme has the Visual Builder.

On a Visual Builder theme​

  1. From the StoreFront menu, click Browse your Store.

    The Browse your Store button

  2. Click Edit at the top left of the page. This menu appears only while you are logged into the UltraCart back end, never to your customers.

    The Edit button on the storefront

  3. Hover the sample logo until it is outlined in blue, then click the gear icon or press s to open the settings panel.

    Uploading a logo in the Visual Builder

On a theme without the Visual Builder​

  1. From the StoreFronts page, click the General tab.

    The General tab

  2. Under About Your Store, find StoreFront Logo. Your current logo appears below the label, or "No Logo" if none is set.

    The StoreFront Logo setting

  3. Click Choose File, then Add Files, or drag the graphic onto the dialog.

    The logo upload dialog

  4. Click Begin Upload.

    Beginning the logo upload

Set a favicon​

A favicon is the small icon a browser shows in the tab, the address bar, bookmarks, and history. StoreFronts accepts a favicon.png and converts it to the .ico format browsers expect.

Prepare the image first:

  1. Start from your logo, or a simplified version of it.
  2. Use square dimensions. The icon has to fit in a square.
  3. Check that it stays legible at 16 x 16 and 32 x 32 pixels, which is how it is usually displayed.
  4. Start from at least 260 x 260 pixels.

Save it as favicon.png, then upload it:

  1. Go to StoreFronts and select the storefront.
  2. Open the General tab.
  3. In the About your Store section, find StoreFront Favicon.
  4. Upload your favicon.png.

Change the image an item shows in the home slider​

An item in the home slider displays its default image when only one image is configured. When an item has several, the slider uses the one whose image code is Featured.

  1. Go to Main Menu → Items → Item Management and open the item.

    The item editor

  2. Scroll to the StoreFronts section of the item editor.

    The StoreFronts image section of the item editor, showing image codes

  3. Set the Featured code on the image you want the slider to show.

For the slider's own settings, see Home page slider.

Was this page helpful?