.png){kind=logo}
Guide to creating image (portrait-mode campaign)
- Print
Guide to creating image (portrait-mode campaign)
- Print
Article summary
Did you find this summary helpful?
Thank you for your feedback
Guide to creating image (portrait-mode)
If you are preparing for a portrait-mode campaign on Shoplive, please refer to the following guide to create and use images.
Logo image
.png "image(283).png")
This is the logo image exposed on top of the player. There is no limit to the horizontal size of the logo, but we recommend it to be less than 630px. Make sure that the length is 144px and that the background is transparent. The image displayed on the screen is fixed to a maximum vertical size of 44px.
Campaign preview/ON AIR/Ended images
.png "image(284).png")
All images used during campaigns should be fixed at 900px in width and 1600px in height (aspect ratio of 9:16). However, on iPhones with a notch (9:19.5 ratio), the left and right areas will appear cropped, as shown on the right. In order to prevent the content in the image from being cropped, we recommend that the contents of the image be created within 738px in width and 1280px in height.
If you have installed the Shoplive Plugin
If you run the page where Shoplive Plugin is installed on mobile, the campaign preview screen is exposed.
The display ratio of the preview screen is 1:1.5. Therefore, we recommend that you create important content within the display ratio.
Product image
.png "image(285).png")
This is the product image displayed in the product thumbnail and in the product list exposed to the player. We recommend product images to be an output size of 64px in width and 80px in height.
.png "image(286).png")
Size conversion for product images larger or smaller than 128x160 will be applied as in the example above.
Product List header banner image
.png "image(287).png")
This is the banner image displayed at the top of the product list. We recommend a size of 1020px in width and 168px in height. Depending on the screen size, the size of the image will be reduced or enlarged.
Pop-up>Coupon
.png "image(288).png")
This is the image used for the coupon pop-up. We recommend the display area of the coupon to be 390px wide by 360px tall or 390px wide by 180px tall. Create a coupon image with a size that fits the live player UI, and make the background transparent (png file).
Pop-up>Banner
.png "image(289).png")
This is the image used for the banner pop-up. Considering the space on both sides of the player when the banner is exposed, the size of the banner image should be fixed at 900px (multiple images) horizontally but the vertical size can be set flexibly. The size of the banner displayed on the screen is 315px wide, and it can be enlarged or reduced on devices with different screen sizes.
Device screen size that is less than 375px: scaled down according to aspect ratio
Device screen size of 375px or more: keep at 315px
Pop-up>Show more pop-up (image)
.png "image(290).png")
When a user clicks on a pop-up such as notice, coupon, banner, etc., the image pop-up can be displayed. For example, if you click on the notice pop-up, you can display detailed information through the image pop-up. You can fix the horizontal size of the image to 900px and set it to the desired size vertically. long vertical image pop-up can be viewed by scrolling. The size of the image pop-up exposed to the screen is 300px wide, and is enlarged or reduced on other devices with different screen sizes.
If the screen size of the device is less than 375px, the size of the banner is reduced according to the screen ratio.
If the screen size of the device is 375px or more, the size of the banner is maintained at 300px.
Pop-up > Event Winner Announcement Pop-up("Event winner announcement icon" in the pop-up)
.png "image(315).png")
This is the image exposed at the top of the event winner pop-up. We recommend images with a fixed size of 420px in width and 132px in height. Based on the screen size of 375px, the maximum height is 80px.
Quiz thumbnail
.png "image(322).png")
It is a thumbnail image exposed in the quiz pop-up. We recommend a size of 144px in width and 144px in height. Quiz thumbnail images are fixed at 46px regardless of screen size.
Grid-type Quiz image
.png "image(327).png")
This is the grid-type image for quiz pop-ups. We recommend 450px in width and 336px in length. If the recommended size is exceeded, the image will automatically be reduced to 450px in width and 336px in height.
Image resource specification
The recommended image size below is 3 times the actual image size that will be shown on the screen.
This is to display high-quality images on high-resolution mobile devices, and you can create images according to the recommended sizes below.
Image | Recommended size | Supported image formats | Capacity limit | Recommended size |
|---|---|---|---|---|
logo image | width 144px ~ 630px height 144px | PNG, Animated PNG | 10MB max | less than 2MB |
Pre-campaign image On Air background image Campaign ended image IE unsupported image | width 900px height 1600px | JPEG, PNG | 10MB max | less than 2MB |
product image | width 128px height 160px | JPEG, PNG, Animated PNG, GIF | 10MB max | less than 2MB |
product list header banner | width 1020px height 168px | JPEG, PNG, Animated PNG, GIF | 10MB max | less than 2MB |
Pop-up > Coupon | width 390px height 360px | JPEG, PNG, Animated PNG, GIF | 10MB max | less than 2MB |
Pop-up > Banner | width 900px height 300px ~ 900px | JPEG, PNG, Animated PNG, GIF | 10MB max | less than 2MB |
Pop-up > Show more pop-up (image) | width 900px height unlimited | JPEG, PNG, Animated PNG, GIF | 10MB max | less than 2MB |
Pop-up > Event winner pop-up | width 420px height 132px | JPEG, PNG, Animated PNG, GIF | 10MB max | less than 2MB |
Pop-up > Quiz thumbnail | width 144px height 144px | JPEG, PNG, Animated PNG, GIF | 10MB max | less than 2MB |
Pop-up > Quiz image | width 460px height 366px | JPEG, PNG, Animated PNG, GIF | 20MB max | less than 2MB |