Scrolling down past the variants, you'll see the section for
managing the product's images. On the left there's a button to
Choose images if you want to upload more images for this
product. To the right of that are the images that are already
uploaded.
The product images will be displayed on the product page in your
store in the same order as they appear in your admin.
You'll notice that the first one is marked as
featured.
Remember from before, the main image for a product, the one that
will be displayed by default in your store, is called the featured
image. The other images will be displayed as thumbnail images, or
smaller images, underneath the featured image. You can reorder the
images, as they will be displayed in your store, by dragging and
dropping them individually to where you want them.
Whichever image you put first in the order will become the
featured image.
You will notice that each image has three small icons
underneath. From left to right, these icons enable you to: edit the
image, set the alternative text for this image and delete the
image. Let's look first quickly at the alternative text and
deleting the image as editing the image provides a lot of different
features.
- Set the alternative text: The alternative or
ALT text is displayed when the image cannot be displayed for some
reason. It is also used to describe the image for people who are
visually impaired or blind. To set the alternative text, simply
click on ALT, write the alternative text in the pop-up
that appears and click the Done button to save. It's
generally a good idea to repeat any text that is in the actual
product image in the alternative text.
- Delete the image: The last icon on the right,
underneath each of the product images is the trash icon . Clicking
on this will delete the image from Shopify. A pop-up will appear
asking you to confirm that you wish to delete the image. There is
no way to get it back afterwards so make sure you have copies on
your own computer!
- Edit the image: Clicking on the first icon
will open up a great little tool called Aviary which you can use to
edit the image. For full control of your image, you might prefer to
use software like Photoshop or Pixelmator. But for most simple
manipulations, you can rely on this tool. You'll notice the buttons
Crop, Resize, Orientation, etc. Let's examine each of these
features one by one.
- Zoom: Click on the small magnifying glass at
the top left of the image board to reveal a slider to control the
magnification of the image. If you look at the screenshot on the
last page, you will see I'm using the zoom tool.
- Crop: With the crop tool, you can select the
area you want to keep in your image. Everything outside that area
or frame will be deleted. This is a useful way to: change the shape
(or aspect ratio) of the image, remove unwanted details or focus
the image more specifically. You can use this tool to make your
image square, for example.
- Resize: With the resize tool, you can change
the size of the image. By default, if you change the width, the
height will change proportionally, or vice-versa. The use of this
tool isn't really required as Shopify will manage the sizes of the
images displayed in your store.
- Orientation: With the orientation tool, you
can rotate your image if necessary. You can also mirror, or what is
often called flip horizontally or vertically your image. Try it
out, you can always click cancel to undo your changes.
- Redeye reduction: If there are people in your
photo that have red eyes due to the camera flash then you can use
the redeye reduction tool to remove the red. Click on the redeye
tool then choose the tip size for the tool that you want using the
selection of circles at the top. Precisely apply the tool by
clicking the mouse in the middle of the red eye area.
- Blemish: With this tool, you can remove
blemishes not only from skin but from any surface. Choose an
appropriate tip size for the tool and apply to small areas with
blemishes. It can be useful to zoom in on the image using the zoom
tool, the little magnifying glass, at the top left of the image.
Sometimes a first application will reduce the blemish and a second
application remove it completely.
- Saturation: The saturation tool gives you
control of the intensity or vividness of color in your image.
Clicking on the tool will activate a slider to control the
saturation. Sliding to the left will reduce the saturation and fade
the image's colors so that the colors look washed out. Sliding to
the right will increase the saturation so that the colors are more
vivid. Sliding too much in either direction is often too much.
However subtle adjustments in saturation can make the image more
attractive.
- Brightness: With the brightness tool, you can
control the brightness of the image. Similarly to the saturation,
you use a slider to control the brightness.
- Contrast: With the contrast tool, you can
control the difference between light and dark tones in your image.
The lower the contrast, the more flat or dull the image will
appear. The higher the contrast, the more "pop" or vibrancy to the
image.
- Draw: With the draw tool, you can choose a tip
size and color, and use this to draw on the image. There is also an
eraser tool if you want to erase a part of your drawing.
- Text: With the text tool, you can add some
text in the color of your choice. Select a color, type your text
and click on the add text button. You can move the text by dragging
the text box with the mouse. Or you can adjust the size and
orientation of the text by dragging on the round handle at the
bottom of the text box. Remove the text by clicking the x at the
top right of the text box.
- Whiten: The whiten tool can be used to whiten
teeth. Choose a tip size and apply to areas that you would like to
whiten.
- Effects: If you're an Instagram user then you
will already be familiar with the many filters that can be applied
to photos. With this tool you can apply different filters that
change the style of your image. You zcan have your image in black
and white, in sepia, in soft focus and many other styles.
- Undo and redo: At the bottom left of the image
editor window, there are buttons to undo and redo the changes that
you have made.
If you are happy with the
changes you have made, then click the Save button to make those
changes permanent. If you want to leave the editor without saving
the changes, click on the x at the top right of the image
editor window.