Skip to main content

Basic customization

Personalize your galleries with hover effects, buttons, text styles, and display options.

Control what visitors see when they interact with your images.

Design types​

In the Design tab, choose what appears when visitors hover over images:

  • Simple title: Just show image titles
  • Title & description: Display both title and description
  • Title & button: Show title with a custom button
  • Button: Display only a custom button
  • Image: Show a different image on hover
  • Disable: No hover layer at all
  • Custom HTML: Add your own custom content

Hover effects​

Add visual flair when visitors hover over images.

Global hover effects​

Set the same effect for all images in your gallery from the Settings tab.

Individual hover effects​

Override the global setting for specific images in Image settings.

Popular effects:

  • Zoom in/out
  • Fade effects
  • Slide animations
  • Color overlays
  • Blur effects

View all available effects at https://xo-gallery.myshopify.com/pages/effects-library

Hoverdir effect

If you use the Hoverdir effect, you cannot set different effects for individual images.

Loading animations​

Customize how your galleries appear while loading.

Built-in loading icons​

Choose from 9 pre-designed loading animations and customize their colors.

Custom loading​

Add your own HTML/CSS for completely custom loading animations.

Appear effects​

Control how images appear when visitors scroll to your gallery.

Available effects:

  • Fade in
  • Slide up
  • Zoom in
  • Bounce in
  • And many more

Set appear effects globally in Gallery settings or individually per image.

General app settings​

Fine-tune your gallery behavior from Settings > General.

Behavior settings​

  • Prevent hover effect when title is blank: No hover if image has no title
  • Use filename as image title: Automatically use file names as titles
  • Add image tag for SEO: Include HTML image tags for better search engine visibility

Performance settings​

Enable XO Gallery for specific pages: Load gallery code only where needed

Custom CSS​

Add your own CSS code to further customize gallery appearance.

  1. Go to Settings and scroll to Custom CSS code (Global)
  2. Add your CSS/SCSS code
  3. Click Save
Custom CSS code

Example CSS:

.imagebox__title {
   font-size: 25px;
   font-family: "Work Sans", sans-serif;
}

Quick customization tips​

  • For e-commerce: Use button styles for "View Product" actions
  • For branding: Create consistent text styles across all galleries
  • For performance: Enable gallery loading only on specific pages
  • For SEO: Always add alt text and enable HTML image tags

Ready to explore advanced features?