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.

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.