Globo Docs
GLO Color Swatch
GLO Color Swatch
  • Getting started
  • Product variants swatch
    • Variant swatch style
    • Display on product page
      • Show only images related to the selected variant
      • Required select swatch options before add to cart
      • Inventory variations on product page
  • Display on collection page, home page, other pages
    • Show add to cart button on slider, grid, list products
    • Clean up variant option in collection page
    • Display real-time product data as variations change
  • Choose type variant swatch
    • Set color for variant option value
    • Upload custom image for variant option value
    • Setup automate image variant product
  • Advanced setting variants swatch
    • Show/hide variant name
    • Show/hide tooltip
    • Out of stock style
  • Image swatch ratio
  • Bulk export & import variant options
  • Group products as variants
    • Group product style
  • Bundles
    • Setting up product bundles
    • Setting up quantity breaks
  • App integrations
    • PageFly Landing Page Builder
    • Gempage
    • Smart Product Filter & Search
  • FAQs
    • Why can’t I see the swatches for my new product?
    • My theme doesn’t support app blocks — how can I show or move the swatches?
    • Why does the app work on collection pages but not on the homepage or other pages?
    • Why don’t the images change when I pick a different swatch?
    • Why doesn’t the main product image update when I click a color swatch?
    • Why is the wrong product variant added to the cart?
    • Why do swatches disappear when I switch to another language?
Powered by GitBook
On this page

Image swatch ratio

Adjust the file sizes of the image swatches to maintain system performance and decide how it displays on the swatch frame

PreviousOut of stock styleNextBulk export & import variant options

Last updated 1 month ago

This function is to optimize the image displayed in the swatch, if you do not use image swatch, please ignore this setting

Set up

1

Navigate to the settings page.

In admin GLOBO Color Swatch, navigate to setting page -> Image swatch

2

Setting file size image reducer

  • The smaller the width and height, the faster the image loads.

  • On the contrary, the larger the width and height of the image, the slower its display speed.

  • By default, we set it to 150px, you can adjust it to suit your needs.

💡 Tips: You can use the size in appearance -> setup swatch -> width and height as the size for the image swatch.

Example 1:

  • The image size in the interface is 35px by 35px.

  • You can set the image swatch size to 35px by 35px. If the image appears unclear, try increasing the size to around 50-60px.

  • By adjusting the image size this way, the loading speed will improve significantly, reducing the load time by more than half compared to the default size of 150px.

Example 2:

  • The image size in the interface is 300px by 300px.

  • You should set the image swatch size to 300px by 300px. If you keep it at 150px, when the image is enlarged from 150px to 300px, it will become blurry and not look good.

3

Setting image background-size

  • We support you to change the image display style according to cover or contain, to optimize the image display.

  • You can adjust in setting page -> background size

Example image background-size:

4

Save setting

Setting width, height image size