This article covers: Adding a cover and product page gallery (images or videos) to the product, and sorting them correctly.
For general operations of the image selector, see Upload and Select from Gallery.
Prerequisites
- The product's edit page must be open (How to List a Product).
- Owners/editors can upload; viewers can usually only select images already in the gallery.
Path
Shop → Product Management → Open Product → Top Tab Media.
The description text is: "The first one is the cover, and the rest are product page galleries; you can add images or videos and drag to adjust the order."
Step-by-step operation
- Switch to Media. If there is no media yet, you will see "No media added yet; you can select images from the gallery, upload images, or add videos."
- Choose one from the toolbar:
- Add from gallery: Open the selector on the "Gallery" tab, multiple selections are allowed, confirm and add.
- Upload images: Open the selector on the "Upload" tab, multiple selections are allowed at once.
- Add video: Enter the URL for YouTube, Vimeo, or direct MP4/WebM link; you can also select a cover image (for list and carousel thumbnails). If YouTube does not have a cover set, the official thumbnail will be used.
- After adding, use the drag handle in the upper left corner to adjust the order.
- Fill in alternative text (optional) for each item when needed (accessibility and SEO).
- Use the bottom toolbar to save draft or publish. A successful prompt will say "Product media saved."
When adding a product, media will be created along with the basic information; subsequent edits will also save using the same toolbar.
Cover rules
- The first item in the order will also serve as:
- Store list cover
- Main image for product page
- SEO/social sharing image (if not set otherwise)
- The first thumbnail will be marked with Cover.
- If the first item is a video, the list and share image will use that item's cover image (YouTube can automatically use the official thumbnail; for Vimeo/MP4, please select a cover yourself).
- The front end displays it by cropping, so please place the important subject in the center of the frame, and do not align text or logos to the edges.
Front-end zoom view
Customers can click the main image on the left side of the product page (or the video play icon) to open the full-screen media carousel, and use the left and right keys to switch between images and videos.
Recommended size and format
Image backend prompt: 1200×900 px (4:3), width at least 1200px. Format JPG or WebP.
It is recommended to be the same as the cover for the message list for consistency in photography specifications. For more site-wide rules, see Folders, Sizes, and Formats.
Number of entries limit
A maximum of 20 entries for the same product (combined images + videos). The toolbar will display "Current entries / 20 entries."
Switch product images for specifications
If options like color or style correspond to different photos or videos:
- First, add media on this page and save.
- Then go to the corresponding specifications tab:
- Specification field (dropdown/single choice) expand that option → Bind product image, select one from the product media.
- Price table: Click on "Bind product image to specification value" below the price row, and choose for each specification value (e.g., color).
- When customers select this option on the front end, the carousel on the left side of the product page will switch. Options like size and quantity that are not bound will not change the switched media.
Do not upload a second file for the options; always select from the product media.
Which folder will the images go into?
Uploading from this page (as well as images in product descriptions, specification illustrations, and video covers) will be stored in the image library folder 'Product Management'. You can later filter by folder in the selector. Changing the product name will not retroactively affect the folder of already uploaded images.
Remove media
Click the removal control for that item to remove it from this product.
This does not necessarily delete the file from the entire site library; other pages or products may still be using the same image. To delete the file, please follow the image library deletion process, see Delete and Usage Check.
How to verify?
- The first item on the media page is the cover you want, so the quantity and order are correct.
- The front-end
/shopcard cover is correct (the video should show the cover image, not a broken image). - The main image and carousel order of the product details should match the backend. Clicking the main image will open the enlarged carousel; videos can be played. When a specification with bound media is selected, the left carousel will switch to that item.
- Use social preview or SEO tools to check if the shared image is the first image/video cover (if no SEO image is set).
Common Issues
| Situation | What to do |
|---|---|
| Upload button is missing | The account is a viewer, or permissions are restricted. |
| Image uploaded but not on product page | Did you click save at the bottom? Is it still in draft, or is the front-end preview using the wrong status? |
| List cover is not the desired image | Drag the correct image (or video with a cover) to first place and save. |
| Video has no thumbnail | For Vimeo/direct MP4, please select a cover image for that item; YouTube usually generates a thumbnail automatically. |
| Screen is cropped cutting to the point | Reshoot or recrop, center the subject; aspect ratio aligned to 4:3. |
| Can't find the recently uploaded file in the library | Select the folder 'Product Management' or clear filters; search by file name. See Upload and Select Images from Library. |