Foxify is a Shopify page builder focused on maximizing conversions. It comes with loads of templates that serve as landing pages, product pages and funnels that nudge customers to checkout. This is especially helpful for stores running paid ads. However, Foxify transforms the product pages into a custom DOM which is a problem for most combined listings Shopify Foxify setups.
Rubik Combined Listings has native support for Foxify. It detects out the product sections, finds the right place to insert the code, and then renders the swappers in an isolated Shadow DOM node so the Foxify CSS doesn’t leak in. No custom code inserted or modifications to the theme’s template files.
In this post
- What is Foxify
- Why combined listings matter for Foxify stores
- How Rubik handles Foxify
- Setup steps
- Collection page swatches
- Common issues and fixes
- Performance
- FAQ
- Related reading
What is Foxify
Foxify is a conversion rate optimisation focused Shopify page builder for dropshipping and DTC merchants who want high-converting product templates. Foxify includes tons of high-converting templates and comes with easy to use features such as drag and drop page builder with custom sections, sticky add to cart options, and Foxify urgency widgets. Once installed, your Shopify store will output a section which can replace the default product template with whatever Foxify template you want.
Why combined listings matter for Foxify stores
Conversion-focused stores display ads to specific styles or colors. A conversion-focused store might run an ad to black hoodies, with the first page the customer lands on being the black one-color product page. Without knowing the store carries the five other colors, the customer either leaves or buys the black hoodie. Combined listings show all colors as swatches on the product page to the customer who landed on that page.
By keeping each colour as separate Shopify products, the individual product URLs will be retained in Google for colour searches like “black oversized hoodie” or “red running shorts”. Having all of your products as one product with variants will stifle your combined product rankings, but can help your overall rankings. This approach offers the best of both worlds in terms of SEO and website usability for increased sales.
How Rubik handles Foxify
Rubik Combined Listings plugin has inbuilt detection code for Foxify and automatically switches to Foxify injection mode on individual product pages.
- Detection. Rubik scans the DOM for Foxify-specific containers and data attributes.
- Anchor lookup. It finds the product title, price, or add-to-cart form inside the Foxify layout.
- Injection. Swatches are placed at the configured position relative to the anchor.
- Shadow DOM. The swatch component renders inside an isolated Shadow DOM container so Foxify CSS resets and font stacks cannot break it.
Why: Most conversion focused page builders have very global styling and Shadow DOM helps to keep Swatch Components from looking ridiculously different from the Swatches themselves.
Setup steps
- Install the app. Install Rubik Combined Listings from the Shopify App Store.
- Enable the embed. Open your theme editor and toggle the Rubik app embed on. Single click.
- Create a group. In the Rubik dashboard, click New Group and add the products you want to link.
- Run Magic Fill. Auto-grouping and AI visual assistant detect option values, swatch colors, and image previews from product data.
- Save and preview. Open your Foxify product page. Swatches appear in the right place.
Use bulk grouping from titles, tags or metafields to organize dozens of products at once.
Collection page swatches
Even though you are using Foxify for product pages and landing pages, you will still want to make sure your collection pages are properly laid out. This means that customers viewing a collection should have access to all of the available colors on every card, whether the collection is created within the Foxify app or is being rendered for you by your current active theme by Rubik.
View swatches for all types, update a Swatch component with an image thumbnail, and update a Swatch component with text and a dropdown. Each group of Swatch components can have its own unique appearance. Learn about 70+ customizable CSS variables.
Common issues and fixes
- Swatches missing on a Foxify page. Verify the app embed is on. Confirm the product belongs to a saved group in the Rubik dashboard. Hard refresh.
- Swatch position is off. Open the group in Rubik and change the inject position (before title, after title, before form, after form).
- Foxify sticky add-to-cart hides swatches. Adjust the swatch container z-index in per-group settings, or move the swatch above the sticky bar.
- Wrong swatch colors. Edit the group manually. The live admin preview reflects changes instantly.
Performance
Rubik is metafield based with no external API calls on page load. The swatch colours are stored in Shopify metaobject references that sync real time when you edit a group of products. Because of this, the page load impact is minimal as there are no external server calls required while a customer is on your store.
For Foxify stores with paid traffic, every kilobyte, and millisecond counts. The swatch app speed comparison on CraftShift.
Theme compatibility inside Foxify
Foxify is a layer on top of your existing shopify theme. So even with custom product templates, you will still have control of the cart, checkout, and any pages you didn’t rebuild out. Rubik supports over 350 verified Shopify Themes (including eCom Solid, Shippable, and more) and all 7 page builders (Content, sections, Pages, Foxify, Theme, Pagefly, and Growave). This means you can seamlessly switch to a stock theme or Pagefly and have all groups preserved – thanks to the magic of metaobject references that store all your group data and not in the theme file.
Pricing
| Plan | Price | Groups | AI credits |
|---|---|---|---|
| Free | $0/mo | 5 | 100 |
| Starter | $10/mo | 100 | 1,000 |
| Advanced | $30/mo | 500 | 5,000 |
| Premium | $50/mo | 5,000 | 50,000 |
17% off on annual billing. Free plan is permanent.
See the live demo store, watch the tutorial video, or read the getting started guide.
Frequently asked questions
Does Rubik Combined Listings work with Foxify?
Yes. Rubik has Foxify support built into it. It will automatically detect the Foxify product sections and then it will automatically insert the swatches into the correct position. No manual code changes required.
Will Foxify CSS break the swatch styles?
No. swatches are rendered within a Shadow DOM. Foxify global styles, font stacks and CSS resets do not apply to the swatch component. The swatches render exactly as you see them rendered in the Rubik demo dashboard.
Do swatches work with the Foxify sticky add-to-cart?
Yes. This feature is a separate component of Foxify. The Rubik Swatches insert into the main product section where the regular product images reside, above or below the add to cart form. The sticky add to cart bar is a separate component that can or may not sticky (depending on your layering). The z-index for the swatch container can be controlled in the per group settings in case the layering causes any overlap.
Does Rubik Combined Listings filter product images per variant?
This is what Rubik Variant Images does. Combined Listings is for combined products and swatches. Both this app and Rubik can be Foxified at the same time.
Do I need Shopify Plus?
No. Rubik Combined Listings is available on every Shopify plan. The free plan includes 5 product groups and 100 AI credits. This means you can test the full feature set of Rubik Combined Listings on your Foxify pages.
What if I switch from Foxify to another builder?
Groups carry over. The Rubik Page Optimizer plugin supports 7 page builders including Beae page builder, EComposer page builder, Foxify page builder, GemPages page builder, Instant page builder, PageFly page builder and Replo page builder. With 350 standard themes and automatic detection that happens as soon as you load the next page.
