FAQ

How to optimize images with high quality?

To optimize your images while maintaining high quality, we recommend using the WebP format instead of JPEG. WebP offers better compression with minimal quality loss, ensuring faster load times and improved visuals.

You can easily convert your images to WebP format using this online tool: https://squoosh.app/.

https://prnt.sc/_Lhafp1xL4Kk

How do images affect my Shopify store’s speed?

Large images can slow down your store. Follow these tips for optimization:

We recommend optimizing image formats for improved loading times. Whenever possible, please use .jpg for standard images and .png for those requiring a transparent background. For icons and logos, .svg is still the best choice.

To give you an idea of the impact, .svg images are typically between 5-11 MB, while converting them to .jpg or .png can reduce the size to 100-150 KB, resulting in significantly faster page loads.

For image compression, you can use this tool. However, please ensure that the quality remains high when compressing images.

What happens when I upload an image to Shopify?

Shopify automatically resizes images to fit different screen sizes while maintaining aspect ratio.

How can I control image cropping?

• Use images with centered subjects: If important details (like text or faces) are near the edges, they might get cut off.
• Use larger images: A higher resolution helps maintain quality when cropping occurs.
• Use the image settings in your Shopify theme to control how images are cropped. For images can be image ratio settings, image height, or image width depends on the theme settings.
• Use square images (1:1 ratio) for products and collections.

Can I edit images within Shopify?

Yes, Shopify’s built-in image editor allows you to:

• Use Focal point feature
• Crop, resize, and rotate images
• Add color background
• Add alt text for SEO and accessibility

Focal point

In each section that includes an image, you have the option to set a focal point. The focal point represents the specific position within the image that you want to ensure remains visible even as the image is cropped or adjusted by the theme. This allows you to maintain the intended focus and visual impact of the image, regardless of how it is displayed on different devices or within various theme layouts.

Follow these steps to adjust the focal point of an image in your Shopify theme:

1. Open the Theme Customizer
   • Go to Online Store > Themes in your Shopify admin.

   • Click Customize on your active theme.

     Add a Section (if needed)

   • Click Add section and select a section that includes an image block.

     Navigate to Section Settings

   • Find the image block inside the section settings.

     Select and Add an Image

   • Click on the select image.

   • Upload or choose an image from your media library.

     Edit the Image Focal Point

   • Click Edit in the top right corner of the image.

• The image will open in a new window.

Set the Focal Point

• Click on the image to select the focal point position.
• This ensures the key part of the image stays visible when cropped or resized.

• Save Changes
• Click Save to apply the focal point setting.

What is a Color Scheme in Shopify?

A color scheme is a predefined set of colors used throughout your Shopify store for consistency in branding. It typically includes colors for backgrounds, text, buttons, and other design elements.

How Do I use Color Schemes?

1. Go to Online Store > Themes in your Shopify admin.
2. Click “Customize” next to your active theme.
3. Click the gear icon, then select “Colors”.

• In the Schemes section, edit existing schemes or click “Add scheme” to create new ones
• Customize colors for backgrounds, text, buttons, and other elements.

• Save your changes.

You can use hex codes, RGB values, or the color picker to select colors that match your brand. To set the color to transparent, delete the hex code from the text field. Creating consistent color schemes helps provide a better shopping experience for your customers.

After you define your color scheme in your theme settings, you can assign a color scheme using the color scheme picker in your theme's sections and blocks. The color scheme picker is available only in certain sections, blocks, and general theme settings.

How to create color swatches and improve their appearance using an image instead of a color?

There are two ways to use color swatches. The first method involves creating a necessary list of colors that will be displayed as color swatches, showing the customer which colors the product is available in. The second method is similar to the first but expands your options for displaying the product's color. You can replace the usual color swatch with an image that will more informatively showcase the product variant.

For example, you can upload an image that identifies not only the color but also the fabric or material texture or even shows the product itself in the corresponding color. Below are illustrations of color swatches.

To familiarize yourself with the step-by-step guide on how to set up color swatches, follow the link.

Displaying the fabric ↓

Displaying the entire product in the corresponding color ↓