Image settings

Overview #

The image settings control the overall appearance and functionality of images across your shop. These settings are applied globally but can be customized at the section or block level to suit specific needs. This flexibility ensures a consistent visual style while allowing for tailored adjustments where necessary.

Key components and functionality #

Image

This setting allows you to select an image to be used within the theme. It is essential for displaying visual content throughout the shop.

Image style

The image style setting provides options to customize the appearance of images. You can choose from the following styles:

1. Default - The standard image style.
2. Rounded corners - Images will have rounded edges.
3. Circle - Images will be displayed in a circular format.

Max image width

This setting controls the maximum width of images in pixels. You can adjust the width from 0 to 1600 pixels, with increments of 16 pixels. The default value is 0, which means no maximum width is applied.

Aspect ratio

The aspect ratio setting allows you to define the shape of images. Options include:

1. Default - The standard aspect ratio.
2. Landscape - A wider aspect ratio.
3. Portrait - A taller aspect ratio.
4. Square - Equal width and height.
5. Ultrawide - An extra-wide aspect ratio.
6. Widescreen - A widescreen format.

The default setting is default.

Aspect ratio - Mobile

This option allows you to define the shape of images specifically for mobile devices. The available options are the same as the desktop aspect ratio, with the default being default. This setting is useful when you need a different aspect ratio for mobile to ensure optimal display on smaller screens.

Border color

This setting allows you to choose a color for the border of images, enhancing the visual separation and style of images.

Link

You can set a URL link for images, enabling them to be clickable and redirect users to a specified page.

Open link in a new tab

This checkbox option allows you to decide whether the image link should open in a new browser tab. The default setting is false, meaning links will open in the same tab by default.

Usage examples #

1. Consistent branding: You might consider using the image style and border color settings to ensure all images align with your brand's visual identity. For instance, selecting a specific border color that matches your brand's palette can create a cohesive look.

2. Responsive design: Utilize the aspect ratio settings to ensure images display correctly on both desktop and mobile devices. This is particularly useful for maintaining a professional appearance across different screen sizes. Sometimes, you might want to use a different aspect ratio for mobile to better fit the screen.

3. Interactive elements: By setting links on images and choosing to open them in a new tab, you can create interactive elements that enhance user engagement without disrupting their browsing experience on your site.

These settings provide a robust framework for managing images across your shop, ensuring they contribute positively to the overall user experience and brand presentation.