Adding and managing images in Instant Builder is straightforward. This guide covers inserting images, selecting from your library, and configuring sizing options.
Adding an Image to the Canvas
Step 1: Open the Insert Panel
Navigate to the Insert panel in the Instant Builder.
Step 2: Select the Elements Tab
Click on the Elements tab in the top-left corner of the Insert panel.
Step 3: Find the Image Element
Hover over the Image element header. A popover will appear showing the image element.
Step 4: Drag to Canvas
Drag the image element from the popover onto your canvas. The image layer will be placed where you drop it.
Selecting an Image
Once your image element is on the canvas, you need to assign an image to it.
Select the image element on your canvas
In the right sidebar, locate the Image header
Click on the image selector
A popover appears displaying your image library
Selecting an Image
Once your image element is on the canvas, you need to assign an image to it.
Select the image element on your canvas
In the right sidebar, locate the Image header
Click on the image selector
A popover appears displaying your image library
Image Sources
At the top of the image popover, you can switch between two sources:
Source | Description |
Instant | Images uploaded directly to Instant |
Shopify | Images from your connected Shopify store |
Note: Shopify images only appear when your project is connected to a Shopify store.
Shopify Product Images
When working within a layout connected to a Shopify product, the Shopify tab provides access to dynamic product images.
Product Images
Under the Product header, you'll find all images associated with the linked Shopify product:
Image | Description |
Featured Image | The main product image |
Image 1, 2, 3... | Additional product gallery images |
These product images are dynamic—they automatically update based on the connected product, making them ideal for product detail page templates.
All Images
Under the All Images header, you'll find all images stored in your Shopify content folder. These are available across your entire Shopify store.
Important: Shopify product images are only visible when your Instant layout is connected to a Shopify product. For general Shopify assets, ensure your project is connected to Shopify.
Finding Images
Use the search field at the top of the popover to quickly locate specific images by name.
Uploading New Images
Click the Upload button at the bottom of the popover to add a new image to your Instant assets library. The uploaded image becomes immediately available for selection.
Image Sizing Options
Fit vs Fill
Under the Image header in the right sidebar, choose how your image behaves within its image layer:
Mode | Behavior |
Fit | The image scales to fit entirely within the image layer without cropping. If the image proportions differ from the image layer, white space appears on the sides. |
Fill | The image scales to completely fill the image layer, cropping any overflow. Parts of the image may be hidden if its proportions differ from the image layer. |
Example: For a tall image in a wide image layer:
Fit — Shows the full image with empty space on the left and right
Fill — Fills the width completely, cropping the top and bottom
Image Layer Dimensions
The image layer can be resized like any other object on the canvas. Select the image element to access sizing controls in the right sidebar under the Size section.
Available Size Options
Option | Description |
Width | Set the image layer width |
Height | Set the image layer height |
Min Width | Define a minimum width constraint |
Max Width | Define a maximum width constraint |
Min Height | Define a minimum height constraint |
Max Height | Define a maximum height constraint |
Aspect Ratio
Control the proportional relationship between width and height by setting an aspect ratio. Click on the Aspect Ratio option in the Size section to choose from preset or custom ratios.
Preset Ratios
Ratio | Name | Common Use |
Auto | Automatic | No fixed ratio; width and height adjust independently |
1:1 | Square | Profile images, thumbnails, social media posts |
2:5 | Portrait | Tall images, mobile screens, story formats |
3:2 | Landscape | Photography, print media |
16:9 | Video | Widescreen video, YouTube thumbnails, presentations |
Custom Ratio
Select Custom to define your own aspect ratio. Enter your desired width-to-height proportion to create image layers that match specific requirements.
Quick Reference
Task | Location |
Insert image | Insert panel → Elements tab → Image |
Select image | Right sidebar → Image → Click selector |
Switch to Shopify images | Image popover → Shopify tab |
Search images | Image popover → Search field |
Upload new image | Image popover → Upload button |
Set fit/fill mode | Right sidebar → Image → Fit/Fill |
Adjust dimensions | Right sidebar → Size |
Set aspect ratio | Right sidebar → Size → Aspect Ratio |