Ctrlk
Contact support
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Image & video size recommendations

Recommended image and video sizes for the Avante theme: high-res but compressed images, portrait mobile images for banners, and light, short videos to keep your store fast.

Avante is responsive, so there's no single fixed pixel size — images scale to the screen. Following the guidelines below keeps your store sharp on every device and fast to load. Two rules apply everywhere:

  1. Upload high-resolution images, then compress before uploading (tools like TinyPNG or Squoosh). Export at roughly 2× the display size so images stay crisp on high-density (Retina) screens.

  2. Use separate desktop and mobile images wherever a section offers a Mobile image field — otherwise the desktop image is center-cropped on mobile.

How Avante sections handle image size

Different sections control images in one of four ways. Each section below tells you which one it uses.

  • Image ratio — you pick an aspect ratio from a dropdown; the image is cropped to it.

  • Desktop + Mobile image — the section suggests a ratio ("Looks best with…") and has a separate Mobile image field.

  • Height-based / background — the image fills the section; you control the height, not a fixed ratio. Use a large, high-res image.

  • From Shopify — product and collection images come from your Shopify products/collections; the ratio is set per section.

Standard image ratios (used by most sections)

Whenever a section has an Image ratio dropdown, these are the options and recommended sizes:

Image ratio
Recommended size

Original

keep the source ratio; upload ≥1600px on the long side

Square (1:1)

1200 × 1200px

Portrait (4:5)

1200 × 1500px

Narrow portrait (2:3)

1200 × 1800px

Traditional (4:3)

1600 × 1200px

Landscape (3:2)

1800 × 1200px

Wide (16:9)

1920 × 1080px

Banners

Slideshow with media / Image with hotspots

Separate Image and Mobile image fields. The theme suggests: desktop landscape (3:2) or wide (16:9), mobile portrait (4:5) or square (1:1). Recommended: desktop 1920×1080 (16:9) or 1800×1200 (3:2); mobile 1000×1250 (4:5) or 1000×1000 (1:1).

Image banner

Full-width background banner. Uses Height mode (Adapt to first image / Percents / Pixels) and Height — no fixed ratio. Upload a large, wide, high-res image; on mobile only the first image shows.

Each image block has a Banner size: Square (1:1) → 1200×1200, Big square (2:2, larger square) → 2000×2000, Horizontal (2:1) → 1600×800, Wide (4:2, larger 2:1) → 2400×1200. Keep ratios consistent across the grid.

One Image ratio for the whole gallery (standard ratios table above). Grid type controls how many show per row.

Horizontal scrolling banners

Full-height scrolling panels — height-based, no fixed ratio. Use tall portrait high-res images. Desktop size (Big/Medium/Small) and Mobile height control display.

Fullscreen banner with product

Full-screen background (separate desktop + Mobile background image, no fixed ratio — use a large landscape desktop image and a portrait mobile image) plus a product card (standard ratios table).

Media

Shoppable media slider

Vertical/reels slides — Media ratio: Portrait (4:5) → 1200×1500, Narrow portrait (2:3) → 1200×1800, Vertical (9:16) → 1080×1920. The product card uses the standard ratios table.

Stories slideshow

Story covers display as circles — upload roughly square images (~1000×1000), keep the subject centered. The product card uses the standard ratios table.

Media with text / Media with side tabs

Standard Media ratio for the main media and the context image (standard ratios table). Media size (Large/50%/Small) only changes display size.

Image grid, Image comparison & Multicolumn

  • Multicolumn and Image grid: standard Image ratio; keep one ratio across all columns. (Image grid pulls images from the page's custom.gallery metafield.)

  • Image comparison: separate desktop + Mobile image per side (desktop landscape 3:2/16:9, mobile portrait 4:5/1:1). Before and After images must be the same size, or the slider won't line up.

Image with hotspots

Separate Image and Mobile image (desktop landscape 3:2/16:9, mobile portrait 4:5/1:1). Keep key subjects away from the edges so hotspots sit cleanly.

Content, collections & trust

Blog posts

Standard Image ratio. Post images come from each post's Featured image (Shopify Admin → Online Store → Blog posts).

Link list with popover image

Standard Image ratio per link; the image shows as a popover on hover. Portrait works well.

Events

Standard Image ratio per event. The date sits as a badge over the image — keep that corner clear.

Collections (Featured collections, Collection grid, Collection list, etc.)

These show your products and collections, so images come from Shopify (product images and the collection image). Each section sets its own Image ratio (standard ratios table) — there's no global ratio in Theme settings → Product card. Upload product and collection images at high resolution; pick one ratio per section for a consistent grid. You can set a Placeholder image in Theme settings → Product card for products without a photo.

Collection with sticky image

Product cards use the standard ratios table; the sticky side image is a large portrait visual (high-res).

Logo slider

Looks best with square (1:1) — upload square, transparent PNG logos (~500×500), sized consistently.

Icons with text

Use the built-in icon library, or upload a custom icon image — square, transparent PNG/SVG, about 2× the Icon size (e.g. 320×320 for a 160px icon).

Video

  • Keep videos short and light — a large file (30MB+) noticeably slows page load. Compress and trim before uploading.

  • Match the video's aspect ratio to the section to avoid cropping.

  • Background/loop videos in banners are always muted and autoplay — this is a browser policy, not a theme setting.

Best practices

  • Use separate desktop and mobile images wherever offered — one image for both gets center-cropped on mobile.

  • Keep sizes and ratios consistent within a section; mixing ratios creates an uneven layout.

  • If a section is set to "adapt to first image," the first image sets the ratio for the rest.

  • Export at ~2× the display size for high-density screens, then compress.

  • Keep key content centered so it isn't cropped on smaller screens.

Why do images look blurry or low quality?

  1. The uploaded image is smaller than the space it fills — use a higher-resolution source.

  2. No Mobile image set on a banner — the wide desktop image is cropped or scaled on mobile. Add a portrait Mobile image.

  3. Swatch, logo, or thumbnail too small — re-upload at a larger size.

Related

Last updated

Was this helpful?