Images are one of the most powerful and flexible kinds of content in Replo. Replo can import images from anywhere on the internet using a URL, or it can read images directly from your Shopify store's theme.

To Add an Image:

1. Navigate to the page you want to add an Image to in the editor.
2. On the left side of the editor, click the "Components" toggle, then search for "Image".
3. Drag the image into the page.

Setting the Image Source

Initially, an image will be empty and display a placeholder icon.

To Set the Image Source of an Image:

1. Select the image you want to edit.
2. Under "Image Source" in the right panel of the editor, click "Select Image".
3. Click "Select Image" to open the Media Library.
4. Select the image you want to use, or enter a URL to use an image from outside of your Shopify store.
5. Click "Insert Image" to set the image source.

Image Positioning and Alignment

Images can be configured to cover or stretch to their box's size using the image controls in the right-side editor panel. To edit the positioning of an image, click on the image preview displayed under "Image Source", then use the controls there to control the positioning.

Alt Text for Accessibility

To edit the alterative text of an image (important for your page's accessibility for screenreaders), click on the image preview displayed under "Image Source", then use the field there to input the alt text.

Different Images on Mobile

Replo supports setting a different image on the same component on different device sizes. To add an image for a specific device size, simply toggle to that device size in the editor header, then edit the Image Source normally. See Responsive Design for more information.

Lazy vs Eager Loading

Images Eager load by default in Replo but you can update this setting in Image configuration’s Loading dropdown:

Lazy loading images can improve page speed by deferring the loading of non-critical resources until they are needed. Eager loading may be preferred when the images are small, located above the fold, or the number of images is low. Ultimately, the choice to use Lazy or Eager loading depends on the specific needs.

SVG Images

Replo supports Scalable Vector Graphics (SVG) images. SVG images can scale to large sizes without becoming blurry or using a large file size, which makes them perfect for logos, icons, geometric shapes, and much more. SVG images can be exported from popular tools like Adobe Illustrator, Figma, and Sketch.

To use an SVG image, simply upload the SVG file to the Media Library when choosing an image. You can adjust the image component's width and height in Replo, and the SVG image will scale to fit those dimensions.

Animated GIFs

Replo supports using animated GIFs as the source for image components. To use an animated GIF, simply upload the .gif file to the Media Library when choosing an image. The animated GIF will play automatically in the Replo preview. Animated GIFs can be styled exactly like normal images.

Shopify Image Size Limitations

Images uploaded to Replo are automatically uploaded to your Shopify store. That means those images are subject to Shopify's restrictions. Shopify limits images on two dimensions megapixels and file size.

Images uploaded to Replo can’t exceed either of the following limits:

• 20 megapixels

• 20 megabytes

To find your image’s megapixels, you can use the following equation: (pixel width x pixel height)/1,000,000. For example, an image with a resolution of 4900x6930 would be 33.9 megapixels based on the equation: (4900x6930)/1,000,000 = 33.9 MP In a case like this, the image will fail to upload.