Image

Author: Sarah Pham 2494 views

The Image is the one of element from the Basic elements and plays an important role in your sales page. It is used to display the single image. Let’s go through all the settings you can control for this element.

1. Add image

From Basic tab, you can drag and drop the Image element to anywhere that you are wanting to add content to.

2. Configure image

2.1. Content

  • Choose image: You can upload your image or use an image from the library. You can set different images for each device (desktop, tablet, and mobile).
    • Edit: You can see an Edit option on the Image. It allows you to preview and change the alt text for the image. Also, you can choose the focal point of the image here to focus on the selected point.
      Note: The focal point feature can only work when you set the Image fit option to Cover. It will not work when you set the crop size for the image.
  • Crop size: The image size setting, to control the size of the images. There are 5 types of sizes for you to select them.
  • Link: Choose to link the image to None, Media File, or Custom URL.
  • Enable Overlay: Allows you to add an overlay and a text from alt, or a custom text.

If Media File is chosen, you have the option to choose to use the Lightbox or not.
If Custom URL is chosen, you can either input a URL, or more appropriately, select the icon to choose a dynamic URL such as the Post URL.

  • Use image caption: Enter text to be included as a caption under every image.

You can follow the video below to understand the details.

2.2. Design

Image:

There are two ways to resize the image: the first is to use the adjustment slider , and the second is to use the resize icon on the image .

  • Alignment: Align the image to the left, center, or right. It allowed setting different positions for each device.
  • Width: Set the width of the image. It allows to setting of different widths for each device.
  • Max Width: Set the maximum width of the image as a percentage. It allows to set different max-width for each device.
  • Height: Set the height of the image. It allows to set different heights for each device.
  • Image Fit: Resize the image to fit its container. There are five selections.

You can use different below styles between normal and hover state.

  • Opacity: Control the opacity of the image.
  • CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.
  • Box Shadow: Adjust box shadow options.
  • Border: Select the type of border.
  • Border Radius: Set the border radius to control corner roundness. It allows to set different border radius for each device.

Hover Tab: The settings under this tab are used to select elements when you mouse over them.

  • Animation: When a customer hovers over an animated image, it can change grow, shrink, and rotate. This is enjoyable for the customer and shows that your site is working.
  • Transition Durations: Specifies how many milliseconds a transition effect takes to complete. It allows you to change property values smoothly (from one value to another) when hovering.

Caption

This tab is only visible to you if the Caption option in Content tab is enable Use image caption.

  • Alignment: Set the caption alignment.
  • Typography: Set the typography options for the caption’s text.
  • Text Color: Select the color of the caption’s text.
  • Text Shadow: Add a shadow and blur to the caption’s text.
  • Spacing: Select the space between the image and the caption.

Overlay

This tab is only visible to you if the Enable Overlay option is enabled in the Content tab.

  • Typography: Set the typography options for the caption’s text.

You can use different below styles between normal and hover state.

  • Opacity: Control the opacity of the image.
  • Text Shadow: Add a shadow and blur to the caption’s text.
  • Text Color: Select the color of the caption’s text.
  • Background: Select the overlay’s background color.
  • CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.

2 Comments

  • Fay

    February 25, 2023

    Is there css or html i can add under attributes on this component to allow a touch on mobile to replicate hover on a desktop

    Reply
    • Henry Pham

      February 26, 2023

      Hi, could you please contact our team in live chat? our support agent will check it for you
      Thank you

      Reply

Leave a Comment

On this page
Start a free trial and enjoy 3 months of Shopify for $1/month on select plans.