Guide to creating image (portrait-mode campaign)

If you are preparing for a portrait-mode campaign on Shoplive, please refer to the following guide to create and use images.

Logo image

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

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

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.

Size conversion for product images larger or smaller than 128x160 will be applied as in the example above.

Product list’s header banner image

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

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

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)

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)

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

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

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.