Settings · Placket 1.0.0
Performance and images
Fast pages sell more and rank better. Most of the weight on a fashion store is images, so a few habits make a big difference.
How the theme handles images
- The theme asks Shopify for several sizes of each image, from 320 px to 2400 px wide, and the browser loads the one that fits the screen. It never asks for an image wider than your original file.
- Images load lazily (when they are close to the screen), except the first large image on a page, which loads right away.
- Fixed ratio boxes (Portrait, Square, Landscape) crop the image to fit. The crop follows the focal point of the image.
- Fonts are loaded with a fast fallback so text is visible while fonts download.
Image sizes
These sizes are recommendations. Shopify accepts larger files, but they take longer to upload and add no sharpness.
| Where | Recommended size | Notes |
|---|---|---|
| Product photos | 2048 x 2560 px (4:5) | Use the same ratio for every photo of a product. |
| Slideshow and Image hero | 2400 x 1600 px or taller (the Stage layout fills the screen) | Keep the subject in the center or set the focal point. |
| Mobile image (slideshow, hero) | 1200 x 1500 px | Optional, for a different crop on phones. |
| Collection images | 1600 x 2000 px (portrait) or 1600 x 1600 px (square) | Matches the Image ratio of the section. |
| Editorial story, Image with text, Lookbook | 1600 x 2000 px | Portrait looks best. |
| Image gallery plates | 1600 px on the long side | |
| Blog and article images | 2000 px wide | |
| Logo | SVG, or .png at twice the display width | The header logo is shown between 60 and 320 px wide. |
| Logo list | SVG, or .png with a transparent background | |
| Favicon | 32 x 32 px .png | |
| Share image (social preview) | 1200 x 630 px | Set in your admin: Online Store > Preferences. |
File tips:
- Use JPEG for photos and PNG or SVG for logos and graphics. Shopify can serve modern formats automatically.
- Keep each file under about 500 KB before you upload if you can. Free tools such as Squoosh or TinyPNG help.
- Shopify has a file size limit per image. See Shopify Help Center for the current limit.
Focal points
A focal point tells the theme which part of a photo must stay in view when it is cropped.
- In the theme editor, select an image field (for example the Image of an Image hero).
- Pick the image, then choose Set focal point (or open it in Content > Files and edit the focal point).
- Click the most important part, for example the face or the garment.
- Save.
Focal points matter most for the Image hero, slideshow, collection banner and any section with a fixed Image ratio. Choose Adapt to image if you never want cropping.
Alt text
Alt text describes an image for people who cannot see it. It also helps search engines.
- On products: open the product, select an image and choose Add alt text.
- In sections: the theme uses the image's own alt text. Add it in Content > Files or when you pick the image.
- Describe what is shown: "Model wearing an organic cotton tee in navy". Skip "image of".
- On the product page, with Show plate captions on, the alt text is also shown as the caption.
- Purely decorative images are marked as decorative by the theme automatically where a text label is nearby.
Videos
- Use Video file (uploaded to Shopify) or a YouTube or Vimeo link. Add a Cover image so the page loads quickly.
- Keep videos short. Do not autoplay large videos.
Animations and speed
- Reveal sections on scroll is off by default. It adds small animations as the page scrolls.
- Fewer sections on the home page load faster. Aim for 6 to 8.
- Every installed app can slow down your store. Remove apps you do not use.
Check your speed
- In your admin, go to Online Store > Themes and read the Online store speed report on the Themes page.
- Test your live pages with a free tool such as PageSpeed Insights. Test the home page, a product page and a collection page.
- Scores depend on your images, apps and content as much as on the theme.