You can customize your online store by adding a custom logo and favicon, product images, slideshows, banners, blog post images, and stock images. You can upload your own images, or use free stock photos from Burst.
In this section
Choosing a social media image
When you share a link to your online store on social media, such as on Facebook or Pinterest, you can display a thumbnail image in your post.
On this page
- Previewing your images
Showing featured images
For all of the free themes from Pisell, when you post a link from your online store to social media, the featured image for that page is shown. The following page types have featured images:
- Product pages
- Collection pages
- Blog posts
For pages that do not have featured images, like your homepage or an "About us" page, the social sharing image of your online store is shown.
Setting the social sharing image in your admin
In the Online Store preferences of your store, you can add a default image to be used when a featured image for the page can't be found.
Steps:
- From your Pisell admin, go to Online Store > Preferences.
- Find the Social sharing image section.
- To upload a new image, click Add image. To change the existing image, click Edit > Change image.
- Select the image from your computer that you want to show on social media.
- Click Save.
此部分为新增
店铺Logo和店铺封面
您可以自定义您的的店铺品牌Logo和店铺封面；如果您不上传，系统会使用默认图标。
目前店铺Logo/封面需要加入渠道后可上传Logo。以下以Box Local渠道为例：
在Pisell后台导航选择业务管理 > 基础设置
可上传店铺Logo和店铺封面
店铺Logo：至少为1024*1024px，最大为2M的png或jpg格式的图片
店铺封面：至少为1024*1024px，最大为2M的png或jpg格式的图片
Adding a favicon to your store
On this page
- Create a favicon
- Add a favicon to your online store
Create a favicon
You can use a free favicon generator website to create a custom favicon, or you can create your own. To find a favicon generator, search the internet for
free favicon generator.The ideal size for a favicon is either 16x16 pixels or 32x32 pixels. If your favicon file is too large, then it will be reduced to 32x32 pixels when you upload it to Pisell.
Add a favicon to your online store
Tip
Some themes, like Brooklyn, let you add alt text to your favicon. Alt text is displayed if an image can't load, and is used by screen-reading software to describe the image to users who are visually impaired.
- From your Pisell admin, go to Online Store > Themes.
- Find the theme that you want to edit, and then click Customize.
- Click Theme settings.
- Click Favicon.
- In the Favicon image area, click Select image, and then do one of the following:
- To select an image that you have already uploaded to your Pisell admin, click the Library tab.
- To select an image from your local computer, click the Library tab, and then click Upload.
- Add alt text to your favicon image:
- Click Edit.
- In the Edit image window, enter a brief description of the image.
- Click Save.
- Click Save.
Adding free stock photos to your theme
Burst is a stock photo platform that is powered by Pisell and offers free, high resolution images. From the theme editor, you can explore thousands of photos from Burst and add them to your online store. You can choose from dozens of categories to find images that suit your business. Add high quality photos to different parts of your online store, such as your home page slideshow, your blog, or your product pages.
The images on Burst are available under a royalty-free license, so you can use and edit the photos in any way you like. Attribution is encouraged, but isn't required.
Add stock photos to your theme
- Go to the theme editor.
- From the theme editor toolbar, click the section that you want to add an image to. Choose a section that includes an image picker:
- Click Explore free images.
- Browse images by using the search bar or by clicking an image category.
- Click an image to see a preview of the image in your theme. After you find an image that you want to use, click Select.
- Click Save.
Uploading images
You can use many different kinds of images on your online store, including your company logo, product images, slideshows, banners, and blog posts images. Depending on how and where you want to use an image, it might be best to upload it in a certain size or format.
On this page
- Upload images
- Image formats
- Compression rates
- Upload limits
- Color profiles
- Best practices for slideshows, image banners, and full-width images
上传图片
您可以在不同的位置为您的在线商店上传图片：
上传图片的位置
1.商品描述：商品详情页的描述，富文本框格式，支持图片与视频的上传。
2.媒体：商品主图的管理
3.商品组合规格：点击每行组合规格的“编辑”按钮，页面会跳转到针对该组合规格的编辑页面，在该页面中，可以对组合规格的图片（仅允许上传一张图片）、库存、定价、发货等信息进行单独编辑。
4.分组图片：管理商品分组的创建与维护时，可以给分组上传图片；仅支持上传一张图片。
Upload images on the Files page
You can upload images on the Files page of your Pisell admin. This is useful because you can access these images while editing any of your themes. To learn more, see Uploading files to your website.
Upload images in the theme editor
You can add images to your theme in the theme editor.
Steps:
- From your Pisell admin, go to Online Store > Themes.
- Find the theme that you want to edit, and then click Customize.
- Use the dropdown menu to select the template you want to edit.
- From the theme editor sidebar, click the section or block that you want to add an image to.
- Click Select Image, and then do one of the following:
- To upload an image from your computer, click Upload.
- To use a free stock image from Burst, click Explore free images.
- Click an image to see a preview of the image in your theme. After you find an image that you want to use, click Select.
- Click Save.
Add an image by using metafields
If you have metafields set up for your images, then you can use the dynamic source picker to add an image. For more information about metafields and supported image formats, refer to Metafield content types and values.
Image formats
Pisell supports the following image formats:
- JPEG or JPG
- Progressive JPEG
- PNG
- GIF
Pisell serves images in WebP format on supported browsers.
Note
When you upload an image, your images aren't modified except to convert unsupported formats to supported formats. If you upload an image that isn't a supported format, then it's converted to either JPEG or PNG. Most image formats are converted to JPEG.
When to use JPEG images
JPEG images are ideal for photography and other still images with complex colors. The JPEG format has a palette with millions of colors. JPEG also has lossy compression, which can help to keep page loading times fast without a noticeable loss in image quality.
Use the JPEG format for the following kinds of images:
- products
- banners or slideshows
- pages and blog posts
When to use PNG images
PNG images are ideal for graphics and icons with flat colors and without gradients. The PNG format is also able to support transparency.
Use the PNG format for the following kinds of images:
- logos
- icons
- borders and trims
Compression rates
To keep load times fast, Pisell compresses images when they're displayed on your online store. Compressing an image means reducing its file size to allow for faster page loading. With compression, more images can be stored in a given amount of disk or memory space. Additionally, the time required to access the images is greatly reduced. Compression might result in a change in image quality, depending on your image's format, size, and original quality.
Pisell's image quality levels after compression are as follows:
- JPEG: Between 65 - 90 percent
- PNG: 90 percent
- GIF: no change in quality
For JPEG images, the quality level of a compressed image depends on the quality of the original JPEG image as well as the output size:
| Original quality | Output size | Output quality |
| 86% or more | Height or width of 1024px or more | 85% |
| 65 - 85% | Height or width of 1024px or more | Original quality |
| 64% or less | Height or width of 1024px or more | 65% |
| 76% or more | Height and width both less than 1024px | 75% |
| 65 - 75% | Height and width both less than 1024px | Original quality |
| 64% or less | Height and width both less than 1024px | 65% |
Upload limits
Image uploads to Pisell have restrictions in terms of both megapixels and file size (measured in megabytes). Megapixels are used to indicate how many millions of pixels make up an image. Megabytes are used to indicate how many millions of bytes of memory or disk space an image takes up.
Images uploaded to Pisell can't exceed either of the following limits:
- 20 megapixels
- 20 megabytes
Note
There are different image and file size limits for uploading product images.
Color profiles
When you view an image on your online store, the colors in the image might look different from those in the original that you uploaded to Pisell. This can occur when an image has a color profile, which is a set of data stored in a file with a
.ICC or.ICM extension. Color profiles are often embedded into images to help standardize the way that the colors appear on different devices. When images are displayed on your online store, their color profiles are removed.Color profiles are removed for a few reasons:
- Not all devices are able to read
.ICC or.ICM color profiles, so keeping them intact can result in inconsistencies in image colors across devices.- When an uploaded image doesn't include a color profile, sRGB (the most common color profile used to display images on the web) is assumed by the web browser. This ensures that your images look the same across all major web browsers and devices.
- Color profiles can take up large amounts of disk space, which can result in heavy loading times.
Remove the color profile from an image
You can remove the color profile from your image by saving it without the color profile before you upload it to Pisell. This process varies depending on your image editing program.
Remove a color profile using Adobe Illustrator or Adobe Photoshop
To remove a color profile using Adobe Illustrator or Adobe Photoshop:
- Click Edit > Assign Profile.
- Select Don’t Color Manage This Document.
- Click OK.
Remove a color profile using Adobe InDesign
To remove a color profile using Adobe InDesign:
- Click Edit > Assign Profile.
- For RGB Profile and CMYK Profile, select Discard (Use Current Working Space).
- Click OK.
For more detailed information, you can view the Adobe documentation on color profiles.
Best practices for slideshows, image banners, and full-width images
Many Pisell themes feature large images or slideshows that scale to the height of your browser or adapt to your screen size.
If you use one of these themes or have a large slideshow or background image, then it's important to understand what types of images will look best.
Because large images can't fit on all devices, Pisell sometimes displays only part of the image depending on the device you're using. If your image slideshow contains a lot of large images, then you might find that parts of the images aren't visible.
Recommendations
To make sure that your images work well with your theme, here are some things to keep in mind:
- Some themes have an image position setting that you can use to specify which part of an image is the focal point. If your theme doesn't have such a setting, then make sure that the focal point of each image is in the center. When your images are cropped on some screens, the focal point is visible, while areas around it are hidden.
- Images that you use for slideshows or backgrounds shouldn't have text in them. If the text is a part of the image itself, then it might get moved around, cropped, or adjusted based on your theme. Use the theme editor to add text and links to your slideshows.
- For images that you use in slideshows or as backgrounds, choose simple images so that any overlying text is easy to read.
Wide images on tall screens
Wide images might be cropped on the left and right when the device used to view them has a tall screen (like a mobile phone or tablet):
Tall images on wide screens
Tall images might be cropped on the top and bottom when the device used to view them has a wide screen (like a laptop or desktop):
Fix the colors of uploaded images
When you upload an image to Pisell, the colors in the uploaded image might look different from the original. This can occur when the image has a color profile, which is a set of data stored in a file with a
.ICC or.ICM extension. Color profiles are often embedded into images to help standardize the way that the colors appear on different devices. When images are uploaded to Pisell, their color profile is removed.Color profiles are removed for two reasons:
- When an uploaded image doesn't include a color profile, sRGB (the most common color profile used to display images on the web) is assumed by the web browser. This ensures that your images look the same across all major web browsers.
- Color profiles can take up large amounts of disk space, which can result in heavy loading times.
Remove the color profile from your image
You can remove the color profile from your image by saving it without the color profile before uploading it to Pisell. This process varies depending on your image editing program. If you use an Adobe product, then follow the steps below:
Remove a color profile using Adobe Illustrator or Adobe Photoshop
- Click Edit, then Assign Profile.
- Select Don’t Color Manage This Document.
- Click OK.
Remove a color profile using Adobe InDesign
- Click Edit, then Assign Profile.
- For RGB Profile and CMYK Profile, select Discard (Use Current Working Space).
- Click OK.
For more detailed information, you can view the Adobe documentation on color profiles.