Image Editor for Images on your Company Store

This tutorial will go over using the new Image Editor available for images on your company store. This image editor is available on the following types of images you upload to your store.

• Product Images (Images and Product Sub-Option Images)
• Category Banners
• Store Logos
• Design (Header Logo, Slideshow, Background Images, and Code File assets)
• Pages

Article Sections

• Accessing Image Editor
  • Product Images
  • Product Sub Option Images
  • Categories
  • Size Charts
  • Store Logos
  • Background Image
  • Header Logo
  • Slideshow Image
  • Code Files
  • Pages
• Image Editor Tools
  • Crop (rotate, zoom, & crop Image)
  • Resize
  • Finetune (modifies image display)
  • Filter (adds image filter)
  • Annotate (draw, add shapes, and text)
  • Sticker (emojis, and numbers)
  • Undo & Revert
• Related Articles
• Notes

Accessing Image Editor

The below sections discuss how to access the image editor in your store's admin area.

Product Images

The image editor for product images can be located by clicking into Images (1) after viewing an item, then click the edit image (2) icon. Click Save when finished editing your image.

Product Sub Option Images

The image editor for sub-option images can be located by clicking into Product Options (1) after viewing an item. Then view a sub option and click Sub Options (2), then click the edit image icon (3). Click Save Changes and Save when finished editing your images. Otherwise, if you're creating store level Product Options, you can follow the same steps to access the image editor for store level options.

Categories

The image editor for category banners can be located by clicking into Categories (1) under Product & Categories. Then click the image area under Banner (2), and hover over the image and then click edit image (3). Click Save when finished editing your category banner.

Size Charts

The image editor for Size Chart images can be located by clicking into Size Charts (1) under Products & Categories. Then click the edit (2 - pencil icon) for the size chart image. Finally, hover your cursor over the uploaded image and choose to edit image (3). Click Save when finished editing your size chart image.

Store Logos

The image editor for store logos can be located by expanding Logo Management (1), then click into Logos (2). After viewing a Logo, hover over the image and click on the edit image icon (3). Click Save when finished editing your Logo.

Background Image

The image editor for background images can be located by expanding Design (1), then click into Store Design (2). After expanding Sitewide (3), hover over the custom background image and click the edit image icon (4) for the image you upload. Click Save when finished editing your image.

Header Logo

The image editor for your header logo can be located by expanding Design (1), then click into Store Design (2). After expanding Header (3), hover over the logo and click the edit image icon (4) for the image you upload. Click Save when finished editing your image.

Slideshow Image

The image editor for slideshow images can be located by expanding Design (1), then click into Store Design (2). After expanding Slideshow (3), hover over slideshow image image and click the edit image icon (4) for the image you upload. Click Save when finished editing your image.

Code Files

Locate the image under Code Files (1), then right-click the file and click Adjust (2) to bring up the image editor. Click Save in the image editor when finished with your image.

Pages

After viewing a page under Pages (1), right-click the image you have uploaded and click edit image (2) to bring up the image editor. Click Save and then click Publish when you have finished editing your image.

Image Editor Tools

The below section discusses the tools available within the Image Editor.

Crop (rotate, zoom, & crop image)

This tool allows you to Rotate Left (1), Flip horizontal (2), Crop images using pre-defined shapes or manual cropping (3). You can also adjust the Rotation (4) manually and Zoom (5) on your image by using the slider (6). For Zoom, you can also use the scroll-wheel on your mouse (or 2 fingers on a trackpad). Click Apply in the editor when finished to apply your changes to the image. Or click Cancel to not add the changes.

Resize

This tool allows you to re-size the image by using the width and height boxes (1). You can also use the padlock (2) icon to constrain your image's dimensions so they remain proportionate. Click Apply in the editor when finished to apply your changes to the image. Or click Cancel to not add the changes.

Finetune (modifies image display)

This tool allows you to make display adjustments to your image. These adjustments include Brightness (1), Contrast (2), Saturation (3), Exposure (4), Temperature (5), Gamma (6), Clarify (7), and Vignette (8). To make adjustments use the slider (9) below the image to drag left or right. Click Apply in the editor when finished to apply your changes to the image. Or click Cancel to not add the changes.

Filter (adds image filter)

This tool allows you to apply a filter to your images. Example filters include Cold (1) and Warm (2), but there are also options for Chrome, Fade, Pastel, Mono, Noir, Stark, Wash, Sepia, Rust, Blues, and Color. Click Apply in the editor when finished to apply your changes to the image. Or click Cancel to not add the changes.

Annotate (draw, add shapes, and text)

The Annotate tool allows you to Draw (1), Erase (2), Add Shapes (3), and Add Text (4). To annotate your image, click to choose the annotation option, then set the color and additional options. Next, on the image area left-click and move your cursor to add your annotation. Click Apply in the editor when finished to apply your changes to the image. Or click Cancel to not add the changes.

Additionally with using Annotate you have tools to Move to Front (1), Duplicate (2), and Delete (3) for the annotation you add. You can also Resize (4) the annotation.

Sticker (emojis and numbers)

The Sticker tool allows you to apply default emojis or numbers (1), or you can choose select image (2) to upload one from your computer. Click Apply in the editor when finished to apply your changes to the image. Or click Cancel to not add the changes.

Additionally with using Stickers you have tools to Move to Front (1), Duplicate (2), and Delete (3) for the stickers you add. You can also Resize (4) the sticker by clicking it.

Undo & Revert

If you need to undo (or redo) your changes, you can use the arrows at the top of the image area (1). You can also revert ALL changes by using the Revert icon (2).

Related Articles

• Add a Product Manually
• Product Options
• Product Categories
• Logo Management
• Logo and Home Page Image/Slideshow
• Pages Builder

Notes

• For the Zoom feature, please use the scroll wheel on your mouse (or 2 fingers on a track-pad) to zoom-in and zoom-out on the image. If you're finding the Zoom is stuck, click the number to reset the Zoom.
• Please note, once you have applied your changes and have saved your image, there's not a way to revert the image back to its old display.
• The Resize functionality may not update immediately but the changes are being made.