GP Product OptionsGP Product Options
Login
← Back to Blog
Design•5 min read

Setting Up High-Resolution Texture Swatches Using GP Product Options

Alex Mercer2026-07-03

When customers shop for customized products online, they cannot physically touch the materials. If you sell leather wallets, custom wooden tables, upholstered sofas, or metal jewelry, the ability to display tactile textures is essential. A flat color block (like a light brown circle) does not represent the grain of oak or the texture of saffiano leather.

To bridge this online-to-offline gap, e-commerce stores use high-resolution texture swatches. GP Product Options allows merchants to upload custom images for individual swatch options. Using this feature, you can display realistic patterns and grains that represent your materials accurately. Here is how to prepare and configure high-resolution texture swatches for your store.

Preparing Texture Swatch Assets for the Web

Before uploading image assets to the app dashboard, you must prepare them. High-resolution does not mean massive file sizes; in e-commerce, assets must be optimized to ensure fast page loads.

1. Shoot Samples Under Neutral Lighting

When taking macro photographs of your materials, use diffused, neutral lighting. Avoid harsh shadows or warm yellow light, as they distort the true color of the product. Use a macro lens to capture the fine details of wood grains, canvas weaves, or leather textures.

2. Crop to a Perfect 1:1 Square

Your texture images must be cropped to a square ratio (e.g., 500px by 500px). If you upload rectangular images, the app will scale them to fit the swatch bounds, which can stretch or compress your texture pattern.

3. Compress for Web Performance

Save your files in WebP or highly compressed PNG formats. GP Product Options serves these files efficiently, but uploading 5MB raw images will slow down your product page. Aim for file sizes under 50KB per swatch image. A resolution of 150px by 150px is the sweet spot for visual clarity and speed.

Technical Comparison: Texture Swatches vs. Solid Colors

Specification Solid Color Swatches Texture Image Swatches
Ideal File Format None (Hex Code) WebP or JPG
Recommended Dimensions N/A (CSS Generated) 150px x 150px (1:1 Ratio)
Max Target File Size 0 KB Under 50 KB
Recommended Swatch Size 24px - 32px 48px - 60px
Display Shape Circular or Rounded Square or Rounded Square
Key Use Cases Basic plastics, t-shirt colors, paint Leather, wood grains, marble, woven fabrics

How to Set Up Texture Swatches in GP Product Options

Follow this guide to upload and configure your texture assets within the app:

Step 1: Create an Image Swatch Option

  1. Open GP Product Options in your Shopify admin.
  2. Select or create an Option Set that targets your customizable products.
  3. Click Add Option and choose Image Swatch as your option type.
  4. Input your option title (e.g., "Choose Table Wood Finish").

Step 2: Upload Texture Files

  1. Click Add Value to create your first texture option.
  2. Enter the option label (e.g., "Natural White Oak").
  3. Click the Upload Image thumbnail.
  4. Select your cropped WebP texture file from your computer and upload it.
  5. Repeat this process for all available texture finishes.

Step 3: Adjust Size and Border Radius for Visibility

  1. Open the Design Settings dropdown inside the option configuration panel.
  2. Change the swatch dimensions to at least 48px width and 48px height. Anything smaller makes it difficult to see texture patterns.
  3. Set the Border Radius to 4px or 0px (Square). Avoid circles, as they crop out the corner details of the texture.
  4. Set the Border Hover Style to high-contrast to make it clear which texture is selected.
  5. Save your settings and run a live preview of the product page.