> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/basic/image.md).

# Image

Control image cropping, sizing, hover effects, and visual filters for any image you add to a section in your store.

Use it for product photos, lifestyle shots, brand imagery, or illustrations. Upload an image (with the option to select a separate mobile image asset), then control how it is cropped, sized, and styled on desktop and mobile independently, including how it reacts when a customer hovers over it.

### 1. What you can do

With the Image block, you can:

* Display product photos, brand imagery, illustrations, or lifestyle visuals
* Let customers click an image to view it full screen with lightbox zoom
* Link an image directly to a product, collection, or other page
* Add hover effects: a color overlay, a media swap, a zoom, or a grayscale transition
* Set aspect ratio, corner rounding, and width separately for desktop and mobile
* Apply a visual filter such as Warm, Vintage, Grayscale, or High Contrast

### 2. How to add an Image block

You can add an Image block to any [custom section](/arctos-theme/section-templates/section.md) or any compatible block, with no limit on how many you use in a single section.

{% stepper %}
{% step %}
**Click the section or block**

In the Theme Editor (Customize), click the section or block where you want to add an image.
{% endstep %}

{% step %}
**Add an image block**

Click **Add block**.
{% endstep %}

{% step %}
**Select Image**

Select **Image** from the block list.
{% endstep %}

{% step %}
**Upload or select your image**

Upload your image or select one from your Shopify file library.
{% endstep %}

{% step %}
**Adjust the settings**

Control sizing and appearance using the settings described below.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Block settings

These settings let you control how your image looks, behaves, and responds when customers interact with it.

#### 3.1. Image

**Image** is the setting where you add the picture for this block. You can upload a new file, select one already in your file library, or explore free stock photos offered natively by Shopify.

<table><thead><tr><th width="150.80078125">Setting</th><th width="139.67578125">Options</th><th width="454.3125">What it does</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Image picker</td><td>Upload a new file, select one already in your library, or explore free stock photos.</td></tr><tr><td><strong>Show different image on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>When turned on, reveals a separate mobile image picker so you can upload a portrait or mobile-optimized crop for smaller viewports.</td></tr></tbody></table>

*Supported formats are PNG, GIF, JPEG/JPG, WebP, and HEIC. Files can be up to 20 MB, with a maximum size of 4472 x 4472 px (20 MP).*

{% hint style="info" %}
WebP gives you the best balance of quality and file size. Keep images under 500 KB where you can. For sharp results on retina screens, upload at twice the size you intend to display, so a 600px-wide image should be uploaded at 1200px.
{% endhint %}

#### 3.2. Layout

<table><thead><tr><th width="113.80078125">Setting</th><th width="139.67578125">Options</th><th width="491.3125">What it does</th></tr></thead><tbody><tr><td><strong>Orientation</strong></td><td><ul><li>Auto</li><li>Square</li><li>Portrait</li><li>Landscape</li></ul></td><td><ul><li><strong>Auto:</strong> Keeps the image's original ratio with no cropping.</li><li><strong>Square:</strong> Crops to 1:1.</li></ul><p><em>Choosing <strong>Portrait</strong> or <strong>Landscape</strong> unlocks secondary Aspect ratio settings:</em></p><ul><li><strong>Portrait:</strong> Crops to a vertical format (9:16, 4:5, 3:4, or 5:7).</li><li><strong>Landscape:</strong> Crops to a horizontal format (16:9, 4:3, 3:2, or 21:9).</li></ul></td></tr><tr><td><strong>Width</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit:</strong> Shows the image at its natural size, up to the available width.</li><li><strong>Fill:</strong> Stretches it to fill the full available width.</li><li><strong>Custom:</strong> Sets an exact width in pixels or as a percentage.</li></ul><p><em>Image height is calculated automatically based on the width and chosen aspect ratio.</em></p></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables setting an independent width and aspect ratio for mobile screens.</td></tr></tbody></table>

#### 3.3. Style

These settings control how the image looks beyond its size and crop: its color treatment, corner shape, and any overlay or scroll effect placed on top of it.

<details>

<summary>Overlay</summary>

Adds a semi-transparent color layer on top of the image, useful for darkening a photo so text placed over it stays readable.

<table><thead><tr><th width="95.85546875">Setting</th><th width="161.9453125">Options</th><th width="406.0625">What it does</th></tr></thead><tbody><tr><td><strong>Color style</strong></td><td><ul><li>Solid</li><li>Gradient</li></ul></td><td><ul><li><strong>Solid:</strong> Applies a solid color overlay over the image.</li><li><strong>Gradient:</strong> Applies a gradient color overlay over the image.</li></ul></td></tr><tr><td><strong>Color code</strong></td><td><ul><li>Color</li><li>Gradient color picker</li></ul></td><td>Sets the exact overlay color.</td></tr></tbody></table>

</details>

<details>

<summary>Filter presets</summary>

Applies a ready-made color treatment with no photo editing needed.

<table><thead><tr><th width="120.23046875">Options</th><th width="543.8828125">When to use</th></tr></thead><tbody><tr><td><strong>Normal</strong></td><td><ul><li>Effect: No filter applied</li><li>Best for: Keeping the image’s original colors and natural look</li></ul></td></tr><tr><td><strong>Grayscale</strong></td><td><ul><li>Effect: Removes all color for a clean black-and-white look</li><li>Best for: Creating a timeless, elegant feel or minimizing color clutter to make text overlay pop</li></ul></td></tr><tr><td><strong>Vintage</strong></td><td><ul><li>Effect: Adds warm, faded tones</li><li>Best for: Giving photos a nostalgic, retro, or cozy aesthetic</li></ul></td></tr><tr><td><strong>Warm</strong></td><td><ul><li>Effect: Enhances golden and sun-kissed tones</li><li>Best for: Making portraits, food, or outdoor shots feel inviting and vibrant</li></ul></td></tr><tr><td><strong>High contrast</strong></td><td><ul><li>Effect: Deepens darks and brightens highlights</li><li>Best for: Making dramatic, bold images that stand out and catch the eye immediately</li></ul></td></tr><tr><td><strong>Fade</strong></td><td><ul><li>Effect: Softens the colors with a washed-out matte look</li><li>Best for: Low-contrast designs where you want text layered on top to be effortlessly readable</li></ul></td></tr></tbody></table>

{% hint style="info" %}
Filters and overlays render in the browser and add a small amount of page load time. One or two per page won't be noticeable, but applying heavy filters across dozens of images can slow your storefront down.
{% endhint %}

</details>

<details>

<summary>Corner radius</summary>

Controls how rounded the corners of your image frame are.

* **Main corner** matches the global corner radius set in your theme.
* **Small** and **Extra small** inherit from the [main corner](https://ursus-ecom.gitbook.io/arctos-theme/blocks/basic/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner) value and scale it down proportionally for a subtler effect.
* **Pill** applies fully rounded ends to the image container.
* **None** removes rounding entirely for a sharp, full-bleed look.
* **Custom** lets you set a precise value to match a specific design.

{% hint style="info" %}
For a professional look, inner elements (like this Image block) should have a smaller corner radius than the outer product card container to maintain visual harmony.

* If your outer layer uses the **Main corner,** choose **Small** or **Extra small** for this image.
* As a rule of thumb, if the container has large padding, drop the image radius by 2 levels; for normal/small padding, drop it by 1 level. Adjust via **Custom** if needed.
  {% endhint %}

</details>

<details>

<summary>Enable parallax effect</summary>

Engages a premium parallax scroll where the image moves at a different speed than the page. This creates a captivating, cinema-like illusion of 3D depth that instantly elevates your site's design.

</details>

#### 3.4. Interaction

These settings control what happens when a customer clicks or hovers over the image. Hover effects apply to desktop only.

<details>

<summary>Zoom preview</summary>

Enables a full-screen zoom when the image is clicked. Enabling this feature will automatically disable the image link.

</details>

<details>

<summary>Full image link</summary>

Turns the entire image into a clickable link. Turn this on to direct customers to a specific product, collection, page, or external URL.

<table><thead><tr><th width="94.88671875">Setting</th><th width="99.859375">Options</th><th width="488.2109375">When to use</th></tr></thead><tbody><tr><td><strong>Link</strong></td><td>URL</td><td>Link the image to a product, collection, page, or external URL. To link to a section on the same page, enter the section ID with a <code>#</code> in front, for example <code>#about-us</code>.</td></tr><tr><td><strong>Open in new tab</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on if you want the link to open in a new browser tab instead of replacing the current page.</td></tr></tbody></table>

</details>

<details>

<summary>Hover interaction</summary>

Sets what happens when a customer hovers their mouse over the image on desktop. Choosing an option reveals corresponding conditional controls below.

<table><thead><tr><th width="140">Setting</th><th width="160">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Hover interaction</strong></td><td><ul><li>None</li><li>Zoom in</li><li>Grayscale</li><li>Color overlay</li><li>Reveal image</li><li>Play video</li></ul></td><td><ul><li><strong>None</strong> keeps the image static on hover.</li><li><strong>Zoom in</strong> scales the image up slightly within its frame.</li><li><strong>Grayscale</strong> temporarily removes color on hover.</li><li><strong>Color overlay</strong> displays a solid or gradient color layer on hover.</li><li><strong>Reveal image</strong> swaps the image for a secondary image on hover.</li><li><strong>Play video</strong> plays a secondary video on hover.</li></ul></td></tr></tbody></table>

{% stepper %}
{% step %}
**Color overlay controls**

Configures the overlay color when Hover interaction is set to **Color overlay**.

<table><thead><tr><th width="140">Setting</th><th width="160">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Color style</strong></td><td><ul><li>Solid</li><li>Gradient</li></ul></td><td>Choose <strong>Solid</strong> for a uniform color layer or <strong>Gradient</strong> for a multi-tone blend.</td></tr><tr><td><strong>Color code</strong></td><td>Color or Gradient color picker</td><td>Sets the overlay color or gradient code.</td></tr></tbody></table>
{% endstep %}

{% step %}
**Reveal image controls**

Configures the secondary image and optional overlay when Hover interaction is set to **Reveal image**.

<table><thead><tr><th width="140">Setting</th><th width="160">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Image picker</td><td>Upload or select a secondary image to reveal on hover.</td></tr><tr><td><strong>Overlay</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables a color overlay on top of the revealed image.</td></tr><tr><td><strong>Color style</strong></td><td><ul><li>Solid</li><li>Gradient</li></ul></td><td>Selects solid or gradient overlay. <em>Only available when <strong>Overlay</strong> is On.</em></td></tr><tr><td><strong>Color code</strong></td><td><ul><li>Color</li><li>Gradient color picker</li></ul></td><td>Sets the overlay color or gradient code. <em>Only available when <strong>Overlay</strong> is On.</em></td></tr></tbody></table>
{% endstep %}

{% step %}
**Play video controls**

Configures the secondary video and optional overlay when Hover interaction is set to **Play video**.

<table><thead><tr><th width="140">Setting</th><th width="160">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Video</strong></td><td>Video file picker</td><td>Upload or select a video to play on hover.</td></tr><tr><td><strong>Overlay</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables a color overlay on top of the hover video.</td></tr><tr><td><strong>Color style</strong></td><td><ul><li>Solid</li><li>Gradient</li></ul></td><td>Selects solid or gradient overlay. <em>Only available when <strong>Overlay</strong> is On.</em></td></tr><tr><td><strong>Color code</strong></td><td><ul><li>Color</li><li>Gradient color picker</li></ul></td><td>Sets the overlay color or gradient code. <em>Only available when <strong>Overlay</strong> is On.</em></td></tr></tbody></table>
{% endstep %}
{% endstepper %}

</details>

#### 3.5. Spacing

<table><thead><tr><th width="140.05078125">Setting</th><th width="147.79296875">Options</th><th>When to use</th></tr></thead><tbody><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables custom margin spacing around the image block, with individual top, bottom, left, and right pixel controls.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate margin values for mobile screens. <em>Only available when <strong>Margin</strong> is On.</em></td></tr></tbody></table>