Q: Swatches Not Appearing on the Storefront

Problem: Swatches are not visible on the product page or collection page. Solutions: <ol> <li>Check if the app embed is activated. Go to the Dashboard and look at the "App embed status" section. If it says "Inactive", click "Activate" and enable the app on your active theme.</li> <li>Check if the app is enabled. Go to Settings and make sure "Toggle app status" is turned on. The status badge should say "Active". If the app is disabled, no swatches will render anywhere on the storefront.</li> <li>Verify swatch visibility settings. In Settings, confirm that "Product page swatches" and/or "Product card swatches" are enabled depending on where you expect them to appear.</li> <li>Check if the product group is active. Open the relevant product group and make sure its status is set to "Active", not "Disabled".</li> <li>Ensure products are properly configured. The product group must contain products with valid option values. If option values are empty, the swatches will not render.</li> </ol>

Question 1

Categories / Subgroups

Accepted Answer

Categories let you organize swatches inside a single product group. For example, under a Color option, you can separate swatches into subgroups such as Warm Colors and Cool Colors.

Categories are managed through the same Shopify metaobject editor used for custom images and become available after the group is saved. Each product in the group can be assigned to a specific category.

When the Show category headers option is enabled in visual settings, swatches are displayed under their respective category labels on the storefront. You can also control the vertical spacing between categories to keep the layout clean and structured.

For a visual walkthrough of setting up categories and organizing swatches, you can watch the tutorial here:

https://www.loom.com/share/5824892fa19847f6b479dbb1aa071233

Question 2

What is Rubik Combined Listings?

Accepted Answer

Rubik Combined Listings is a Shopify app that allows merchants to group separate products and display them as variants of a single listing. Instead of creating traditional Shopify variants, you can visually connect individual products using image, color, button, or dropdown swatches on the storefront.

For example, if the same t-shirt is sold in five different colors but each color exists as a separate product in Shopify, the app links them together and displays them as color swatches on the product page and product cards. When a customer clicks a swatch, they are seamlessly redirected to the corresponding product, creating a true variant-like shopping experience without restructuring your catalog.

Question 3

Customize Swatches Modal

Accepted Answer

General Section

Defines the fundamental behavior and layout of swatches.

| Label | Options | | ---- | | Swatch type | Image, Button, Dropdown | | Image source | See section 3.3 | | Layout | Grid, Carousel (not available for Dropdown) |

Size & Style (Image Swatch)

Controls the visual dimensions and layout of image-style swatches.

| Label | Range / Options | | ---- | | Width | 20–200 px | | Corner radius | 0–100 px | | Spacing | 0–50 px (Grid only) | | Vertical padding | 0–20 px (Grid only) | | Horizontal padding | 0–20 px (Grid only) | | Grid alignment | Left, Center, Right | | Height ratio | 0.5–2.0 (step 0.1) | | Image fit | Fill (may crop), Fit (show all) | | Image background | Alpha supported |

Visibility (Image & Button)

Controls how many swatches are shown and how they are grouped.

| Label | Notes | | ---- | | Show category headers | Groups swatches visually | | Limit to one row | Grid only | | Max visible | 0–50, 0 = show all |

When swatches are hidden due to limits, a +N more indicator appears automatically.

Swatch Info (Image Swatch)

Controls name and price styling below the swatch image.

Name options:

Show name
Name font size: 6–18 px
Name font weight: 400–700
Name max rows: 1–3
Name color (alpha supported)

Price options:

Show price
Price font size: 6–18 px
Price font weight: 400–700
Price color (alpha supported)
Gap between name and price: 0–16 px

Additional:

Info background color
Text alignment: Left, Cen

Question 4

Translations

Accepted Answer

Rubik Combined Listings supports multilingual stores by allowing you to translate option names, swatch labels, and categories into additional languages configured in Shopify.

On the Translations page, you can select a language from a dropdown populated with your store’s active languages. If no extra languages are configured, the app will display a message prompting you to add one from Shopify Settings. If no product groups exist yet, the page will inform you that there is no translatable content available.

Translations are organized into clear sections such as Option names, Option values, and Categories. Each section displays the original text alongside an editable field for the selected language. Helpful tooltips show the related product group context so you know exactly what you are translating.

You can also translate content at the individual group level by clicking Translate from the edit page. This opens a dedicated translation screen for that specific group, allowing you to manage its option name and option values independently.

Question 5

App Embed Activation

Accepted Answer

The app embed is responsible for loading the swatch component on your storefront. If it is not enabled, no swatches will be displayed on product pages or collection pages. On the dashboard, you will see an App embed status section with a badge that indicates the current state: Active (green), Inactive, or Action needed (yellow). Depending on the situation, you may see messages such as:

“The app embed is not enabled on any of your themes.”
“Please select your theme type.”
“The app is enabled on your main theme.”
“The app is enabled on a draft theme.”

From this section, you can click Activate or Manage app embed.

When you open Manage app embed, a modal displays all installed themes in a table format. The table includes columns for Theme, Theme type (optional), Updated, Status, and Action. Themes may be labeled with badges such as Demo or Main theme, and their status appears as Enabled, Disabled, or Unknown. You can activate or manage the embed individually for each theme.

There is also a Show theme types toggle with a tooltip that explains how theme types work and when they should be selected.

Question 6

Swatches Not Appearing on the Storefront

Accepted Answer

Problem: Swatches are not visible on the product page or collection page.

Solutions:

Check if the app embed is activated. Go to the Dashboard and look at the "App embed status" section. If it says "Inactive", click "Activate" and enable the app on your active theme.
Check if the app is enabled. Go to Settings and make sure "Toggle app status" is turned on. The status badge should say "Active". If the app is disabled, no swatches will render anywhere on the storefront.
Verify swatch visibility settings. In Settings, confirm that "Product page swatches" and/or "Product card swatches" are enabled depending on where you expect them to appear.
Check if the product group is active. Open the relevant product group and make sure its status is set to "Active", not "Disabled".
Ensure products are properly configured. The product group must contain products with valid option values. If option values are empty, the swatches will not render.

Featured Articles

Browse All Categories