We understand how important it is for your store to maintain a polished and consistent appearance. This guide outlines recommended image sizes and best practices tailored specifically for the Pebble theme, taking into account its layout system, section configurations, and responsive behavior.
As Pebble relies heavily on aspect ratio settings and height controls, it’s essential to prepare your images in alignment with these parameters to ensure optimal display across all devices.
#Recommended image sizes for different sections & blocks
On the Pebble theme, we recommend you apply the particular image sizes to different sections as follows:
For these sections, the Pebble theme provides flexible height options and supports separate images for desktop and mobile to ensure the best visual presentation across devices.
We strongly recommend uploading separate images for desktop and mobile. If the same image is used, it will be center-cropped on mobile, which may cut off important details.
Adapt to first image: Preserving the original proportions of your first image slide. All other slides will follow the same aspect ratio as the first image.
Small / Medium / Large: Applying fixed heights, so images may be cropped depending on their ratio.
We recommend uploading separate images for desktop and mobile to ensure the best composition and avoid unwanted cropping on smaller screens.
Image height options:
Option
Desktop height
Mobile height
Behavior
Adapt to first image
Auto
Auto
Height adapts to the first image ratio
Small
350px
300px
Cropped to fixed height
Medium
450px
340px
Cropped to fixed height
Large
520px
480px
Cropped to fixed height
How it works:
Adapt to first image: Preserving the original proportions of your first image slide. All other slides will follow the same aspect ratio as the first image.
Small / Medium / Large: Applying fixed heights, so images may be cropped depending on their ratio.
The image ratio in this section is set to adapt to the first slide item’s image. This means all other slides will follow the same aspect ratio as the first image.
To set the blog post featured image, go to Online Store > Blog posts in your Shopify admin. Then open the post and locate the Featured image field on the right-hand side to upload your image.
On your website, the blog post featured image is displayed in two places:
Post’s thumbnail image (Blog listing page):
Displayed in blog cards. The appearance depends on Theme settings > Blog cards >Aspect ratio.
Post’s featured image banner (Blog post page):
Displayed as the main image at the top of the article. This is controlled by the Image ratio setting in the blog post template.
You can choose images with square, portrait, or landscape ratios to achieve the best visual result.
The recommended sizes are:
Square (1/1): at least 2000 x 2000 px
Portrait (4/5): at least 2400 × 3000 px
Portrait (3/4): at least 2000 × 2667 px
Landscape (16/9): at least 2400 × 1800 px
Landscape (4/3): at least 2400 x 1800 px
You can also use Adapt to image to preserve the original image ratio.
We strongly recommend uploading separate images for desktop and mobile. If the same image is used, it will be center-cropped on mobile, which may cut off important details.
From the Products tab in your Shopify admin, you can easily add new products along with their images. These products will automatically appear across product-related sections in your Pebble theme, such as Featured Collection, Multiple Product Bundles, Favorite Products, Product Bundles, Bundle Selection, and Recently Viewed Products.
Within Theme settings or individual section settings, you can also control how product images are displayed. Available image ratio options include:
Inherit
Auto
Square
Portrait
Landscape
These settings allow you to present your product images in the format that best fits your store’s design.
For optimal display quality on the Pebble theme, we recommend the following image sizes:
Square (1/1): at least 2000 x 2000 px
Portrait (3/4): at least 2000 × 2667 px
Landscape (4/3): at least 2400 x 1800 px
These are general recommendations to ensure your images look sharp and consistent across all sections.
