Getting Started Rubik Variant Images & Swatch

1 Install the app

Visit the Rubik Variant Images & Swatch listing on the Shopify App Store and click Install. Approve the permissions when prompted.

After installation, the app appears in your Shopify admin under Apps. Open it to access the dashboard.

2 Enable the app embed

The app embed is what makes variant images and swatches appear on your storefront. There are two ways to enable it:

• From the dashboard: Click the Activate button. This opens the theme editor with the app embed ready to enable.
• Manually: Go to Online Store → Themes → Customize → App embeds and toggle on Rubik Variant Images. Click Save.

If you use multiple themes, enable the app embed on each theme where you want variant images and swatches to appear.

3 Configure your first product

From the app dashboard, open a product. You'll see a list of variants on the left and the product's images on the right.

• Drag and drop images from the image pool onto a variant to assign them.
• Assign multiple images to each variant. The first image becomes the variant's main image.
• Unassigned images are shown for all variants by default, or hidden if you enable "Hide unassigned images."

Tip: Use the AI auto-assign button to let AI analyze your images and match them to variants automatically. This is especially useful for products with many variants.

After saving, visit your product page on the storefront. Select a variant to see only its assigned images in the gallery.

4 Enable variant swatches (optional)

Go to the Swatch page in the app to replace the default variant dropdown with visual swatches.

• Image swatches:display thumbnails of each variant's assigned image.
• Color swatches:display a solid color fill you assign to each option value.
• Pill buttons:display the option value name as a clickable text button.

You can mix swatch types across options. For example, use image swatches for Color and pill buttons for Size.

Custom swatches: Upload custom images (textures, patterns) or assign specific hex colors as swatch images. Watch the custom swatch tutorial for details.

5 Customize swatch appearance

Open the Swatch Style page to customize the look of your swatches. The visual editor lets you adjust:

• Shape: square, rounded, or circle
• Size: width and height in pixels
• Borders: thickness, color, and selected state
• Tooltips: show variant name on hover
• Text labels: display variant name below the swatch
• Sold-out style: diagonal line color for unavailable variants
• Spacing & alignment: gap between swatches, left/center/right alignment

All changes preview in real time. For advanced customization, see the Visual settings guide or the Custom CSS reference with 100+ CSS variables.