Palo Alto Theme Variant Images and Swatches

May 25, 2026
Variant Images
13 min read
a Palo Alto themed product page showing a leather bag with color swatches below and variant-filtered gallery thumbnails

Palo Alto theme variant images on Shopify have a problem that most store owners discover about two weeks after launch. You upload six photos per color, pick a variant, and the gallery still shows every single image from every color. Presidio Creative built a gorgeous theme, but variant image filtering is not part of the package. It never was.

We have tested Palo Alto across dozens of product types, from apparel to home goods to accessories, and the behavior is always the same. Shopify only lets you assign one image per variant natively. One. The rest of your carefully shot product photos just sit in the gallery, unfiltered, confusing customers who clicked “Navy” and are now scrolling through “Coral” lifestyle shots.

This post covers what Palo Alto actually does out of the box, how to fix it with proper variant image filtering, and how to replace those clunky dropdown selectors with color swatches, image swatches, or pill buttons. If you are running Palo Alto and your product pages feel messy, this is the fix.

On this page

What Palo Alto does by default with variant images

Palo Alto by Presidio Creative is a premium Shopify theme built for visually rich stores. It looks polished. The typography is clean, the product page layout is spacious, and the gallery supports multiple media types. None of that helps with variant image filtering.

Here is what happens natively. You create a t-shirt with 5 colors. You upload 4 photos per color (front, back, detail, lifestyle). That is 20 images. A customer clicks “Olive.” Shopify scrolls to the one image you assigned to the Olive variant. The other 19 images? Still visible. Still in the gallery. Still confusing.

Why does Shopify still limit native variant images to one per variant? It makes no sense for any store selling products with visual differences across options. Palo Alto inherits this limitation because it is a Shopify platform constraint, not a theme design choice. Every single Shopify theme has this same gap, whether it costs $0 or $400.

The variant selector in Palo Alto defaults to dropdown menus. Functional, sure. But dropdowns hide your color options behind a click. Customers have to open the dropdown, scan text labels like “Dusty Rose” and “Slate Blue,” and guess what they look like. Compare that to a row of color swatches where the customer can see every option at a glance. Dropdowns are the wrong default for visual products. Period.

Setting up Rubik Variant Images on Palo Alto

Rubik Variant Images works with Palo Alto out of the box. We built theme detection for 350+ Shopify themes (including Palo Alto by Presidio Creative), so the app automatically identifies your theme and applies the correct selectors. No code editing. No Liquid file changes. No worrying about theme updates breaking your setup.

The setup takes about five minutes for a single product. Here is the process:

  1. Install Rubik Variant Images from the Shopify App Store. The free plan covers 1 product.
  2. Open a product in the app dashboard. You will see all your product images on one side and your variants on the other.
  3. Drag and drop images onto each variant. Assign as many images, videos, or 3D models as you want per variant.
  4. Save. The app stores your assignments in Shopify metafields.
  5. Visit your product page. Select a variant. Only the images assigned to that variant appear in the gallery. Everything else is filtered out.

That is it. Really. No theme code involved.

For stores with large catalogs, the manual drag-and-drop approach does not scale to hundreds of products. That is why we built two additional assignment methods. Bulk assign uses image gallery order to group images by variant automatically (it processes hundreds of products in the background). AI auto-assign analyzes product titles, variant names, image filenames, and alt text to match images to the right variant using AI. One product at a time, but it saves serious time on complex products with many options. You can read more about variant image setup methods in the full guide.

We built the bulk assign feature specifically because manual image sorting takes forever on large catalogs. Stores with 200+ products cannot afford to drag and drop images one by one. The bulk method looks at your Shopify gallery order, uses the first image of each group as a boundary marker, and assigns everything between boundaries to the corresponding variant. Fast, no AI credits needed, runs in the background.

Rubik Variant Images theme compatibility with all popular Shopify themes

Adding color and image swatches to replace Palo Alto dropdowns

Palo Alto’s default dropdown selectors work, but they are not great for products where color matters. Would you buy a couch without seeing the fabric color? Would you pick a phone case based on a text label that says “Midnight”? Swatches solve this by making every option visible at once.

Rubik Variant Images offers three swatch types that replace Palo Alto’s dropdowns:

  • Color swatches: Small circles (or squares, or rounded squares) filled with the variant’s color. Best for solid colors like Red, Navy, or Forest Green.
  • Image swatches: Tiny thumbnail images showing the actual fabric, pattern, or material. Best for patterns like plaid, floral, or wood grain where a flat color circle would not tell the whole story.
  • Pill buttons: Text-based buttons with rounded edges. Good for non-visual options like Size, Material, or Weight where showing a color makes no sense.

And here is the part most people miss: you can mix swatch types across different options on the same product. Color option gets color swatches. Size option gets pill buttons. Material option gets image swatches showing wood textures. All on the same product page, all rendered inside Palo Alto without touching theme code.

This is one of the most common support questions we get. Merchants assume they need to pick one swatch type for the whole store. You do not. Each option can have its own swatch type, which means your product page communicates the right information for each choice. Check out the complete swatches guide for a deeper breakdown of when to use each type, and the swatches vs dropdowns comparison for conversion data.

Multi-option products on Palo Alto (color, size, material)

Single-option products are easy. The tricky part is products with two or three options: Color + Size, Color + Material, Color + Size + Style. Palo Alto renders these as stacked dropdowns by default. With Rubik Variant Images, each option gets its own swatch row, and the image filtering responds to the combination.

Think about a furniture store selling a sofa in 4 fabrics and 3 sizes. That is 12 variants. Each fabric has its own set of photos (different texture, different color in the room shots). When a customer selects “Linen” as the fabric, the gallery should show only linen photos. When they switch to “Velvet,” the gallery updates. The size option does not need to affect images at all, because a Medium and Large sofa look the same in photos.

Rubik handles this by letting you assign images per option value, not just per variant. So all “Linen” variants (Small Linen, Medium Linen, Large Linen) share the same image set. You assign once, and the filtering works across all size combinations. We tested this across 350+ themes, and Palo Alto handles the multi-option rendering well because its product page layout has enough vertical space for multiple swatch rows without cramping the design.

If your catalog has products that exceed Shopify’s 100-variant limit (3 options, 100 combinations max), you might need to split them into separate products and link them with Rubik Combined Listings instead. That app handles collection page swatches and product linking, while Rubik Variant Images handles the per-product gallery filtering. They solve different problems, and some stores use both. You can read more about the variant image workflow and how these two apps work together.

Swatch customization: shapes, sizes, borders, and more

Palo Alto has a specific visual identity. Clean lines, generous whitespace, modern sans-serif typography. Your swatches need to match that aesthetic, not fight against it. Generic swatches that look like they were designed for a different theme will stick out immediately.

Rubik Variant Images gives you full control over swatch appearance through a visual settings editor (no CSS required for most changes) and 100+ CSS variables if you want to go deeper. Here is what you can customize:

  • Shape: Circle, square, rounded square, pill, or button. Palo Alto’s rounded design language works well with rounded squares or circles.
  • Size: Adjust swatch dimensions to match Palo Alto’s spacing. Too small and they are hard to tap on mobile. Too large and they overpower the product title.
  • Border: Color, width, and radius on selected/unselected states. Match Palo Alto’s accent color for consistency.
  • Spacing: Gap between swatches and gap between the swatch row and other product page elements.
  • Sold-out display: Cross out, dim, or completely hide variants that are out of stock. This matters for stores with high variant counts where half the options might be sold out at any time.

The rendering uses Shadow DOM. That is a technical detail, but it matters on Palo Alto specifically. Palo Alto has some opinionated CSS for its variant selectors and gallery areas. Older swatch apps that inject global CSS often clash with Palo Alto’s styling, creating weird overlaps, broken borders, or misaligned elements. Shadow DOM isolates the swatch CSS entirely, so there are zero conflicts with Palo Alto’s theme styles. We learned this the hard way (too many support tickets from themes with aggressive CSS) and rebuilt the rendering engine around isolation.

Use the image audit tool to check if your product images are properly organized before setting up swatches, and the variant calculator to plan your option combinations if you are approaching Shopify’s variant limits.

Speed and performance on Palo Alto

Palo Alto is already a heavy theme. Presidio Creative packed a lot of features into it, and some sections (especially animated hero banners and video backgrounds) add weight. The last thing you want is a variant image app that makes it slower.

Rubik Variant Images uses metafield-based loading. The variant-to-image assignments are stored in Shopify metafields and load with the page itself. There are no external API calls, no third-party servers fetching data after page load, no JavaScript waiting on a remote endpoint before the swatches render. The data is already on the page when it arrives in the browser.

This is a design decision we made early on and refuse to change. Some apps fetch assignment data from their own servers after the page loads, which means the swatches sort of flicker into place a second or two later. On Palo Alto, where the product page is image-forward and the gallery is prominent, that flicker is especially noticeable. Metafield-based loading avoids it entirely.

But. The real question store owners should ask is not “how fast is the app” but “does the app add measurable weight to my Lighthouse score?” We have heard from merchants running other variant image apps that their Time to Interactive jumped after installing. With metafield-based architecture, the rendering footprint stays minimal. Your Palo Alto performance should stay where it was before you installed the app, give or take a negligible amount.

Video walkthrough: Palo Alto variant images

This video shows the full process of setting up variant image filtering on Palo Alto, from installing the app to assigning images and seeing the result on the storefront. Watch it if you prefer a visual walkthrough over reading.

“This is by far the best variant app I have tried, I deleted maybe 7 others after a slew of issues. Wonderful support as well!”

Anonymous merchant, 5.0 rating, Rubik Variant Images on the Shopify App Store

See the live demo store, watch the tutorial video, or read the getting started guide.

Rubik Variant Images is free for 1 product ($0/month). Paid plans start at $25/month for 100 products, $50/month for 1,000 products, and $75/month for unlimited. All plans are flat-rate, meaning the price does not change based on your Shopify plan. Every plan includes monthly AI credits for AI auto-assign. The app has a 5.0 rating with 343+ reviews on the Shopify App Store.

Try Rubik Variant Images free
Try Rubik Combined Listings free

Frequently asked questions

Does Rubik Variant Images work with the Palo Alto theme?

Yes. Palo Alto by Presidio Creative is one of the 350+ Shopify themes supported by Rubik Variant Images. The app detects your theme automatically, applies the correct selectors, and works without any theme code changes.

Can I show only the images for the selected variant on Palo Alto?

Shopify natively allows only one image per variant. Rubik Variant Images lets you assign multiple images, videos, and 3D models to each variant. When a customer selects a variant, the gallery filters to show only the assigned media. All other images are hidden.

How do I replace Palo Alto dropdowns with color swatches?

Install Rubik Variant Images, open a product, and choose “Color swatch” as the swatch type for your color option. The app replaces Palo Alto’s dropdown with clickable color circles (or squares, or pills). You can set custom colors or images for each swatch. No code editing required.

Will this slow down my Palo Alto theme?

Rubik Variant Images uses metafield-based loading. The image assignments load with the page, with no external API calls after page load. This means no flicker, no delay, and no measurable impact on your page speed. The rendering uses Shadow DOM, which also prevents CSS conflicts with Palo Alto’s theme styles.

Does it work with Palo Alto and page builders like GemPages or PageFly?

Rubik Variant Images supports 7 page builders: Beae, EComposer, Foxify, GemPages, Instant, PageFly, and Replo. If you use one of these page builders with Palo Alto, the variant image filtering and swatches work on builder-generated product pages too.

How much does Rubik Variant Images cost?

The free plan covers 1 product at $0/month. Starter is $25/month for 100 products, Advanced is $50/month for 1,000 products, and Premium is $75/month for unlimited products. All pricing is flat-rate and does not change based on your Shopify plan. Every plan includes AI credits for automatic image assignment.

We also have theme-specific guides for other popular themes like Horizon. If you are comparing themes or thinking about switching, the filtering and swatch setup process is nearly identical across all 350+ supported themes.

Co-Founder at Craftshift

You may also like