Image Element

About the Image Element

The Image element in GemPages allows you to display single images on your page, which is ideal for showcasing products, banners, brand visuals, promotions, or trust badges.

Whether you want to emphasize a product highlight, illustrate your brand’s aesthetic, or create visual separation between sections, the Image element gives you full control over how images appear across devices.

You can easily upload new images, reuse existing ones from your Shopify files, and customize size, position, borders, and animations without coding.

How to add an Image Element to your page?

Step 1: Access GemPages Dashboard > Pages.

Step 2: Locate the target page to open the Editor. Also, you can hit Create new page to start building your page from scratch.

Step 3: From the left sidebar, enter Image in the search bar, then drag and drop the image element to the position you prefer.

Configure the Settings Tab

Locate the element to open its Settings tab, including:

Style

Choose how your image is visually styled:

• Rectangle: Default rectangular shape
• Circle: Automatically crops the image into a perfect circle

Source

Upload or select the image file, you can:

• Click Upload Image, paste the image URL, or hit Browse gallery to choose from your media.
• Once uploaded, the image URL will appear below for reference or editing

Size

Control how the image is displayed in terms of layout and responsiveness:

• Frame: Choose a predefined aspect ratio or use a custom one:
  • Square
  • Vertical
  • Horizontal
  • Original (keeps the image’s native dimensions)
  • Custom (manually set width & height)
• Width / Height:
  • Set in pixels (px) or percentage (%)
  • Toggle the lock icon to maintain or break the aspect ratio

Shape

Style the image container with visual enhancements to better match your design:

• Border: Add a border around the image. Customize:
  • Color: Choose any HEX color
  • Thickness: Set pixel value
    Stroke style: Solid, dashed, or dotted
• Corner: Round the image’s corners by adjusting the border radius. You can:
  • Apply the same radius to all corners
  • Unlock the values to style each corner individually
• Shadow: Add a shadow effect to give depth or separation from the background. Configure:
  • Type: Outer, inner, or centered
  • Direction: Control the shadow angle
  • Color
  • Distance, Blur, and Size

Link

Make the image clickable by toggling ON, then select the action you want to add after clicking the image, including:

SEO

Improve image accessibility and search engine performance:

• Alt text: Describe the image (used by screen readers and search engines)
• Image title: Optional title that may show as tooltip text

Optimize LCP

Helps optimize loading for better performance scores:

• Quality: Choose compression level:
  • Finest (highest quality)
  • High (default, balanced)
  • Medium (for performance-heavy pages)
  • Custom (advanced compression settings)
• Preload: Enable if the image is above-the-fold and contributes to Largest Contentful Paint (LCP)

Align

Align the image within its container: Left, Center, or Right.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

How to put text over an image?

If you’re interested in creating a banner with text overlay on an image, we’ve got a video tutorial just for you. Watch the video below for step-by-step guidance.