sorry no idea how you created the page, others might know
Not used cartloom
1 Like
@dan @ben I have a bit of a predicament and there does not seem to be a solution. Above is the story and pictures and everything works OK and all links, button etc. all work. The problem I have @elementsbot tried to help with and now I have an answer from Cartloom more or less telling me what chatty bot told me. So the problem is as the code is an “embed” there is nothing they can do to make the black type white on Dark mode. There is no controls (I can see) in Elements to control the background or text colour that works (from me trying). So it appears that an embed or iFrame has no controls within Elements to change any properties of that code.
The only workaround I seem to have left is tho paste a button which has a link to my store page but this takes user off my site and I don’t want to do this - simple reason is I sell disabled aids and the majority of my customers are aged 60+, some even phone me to help them buy stuff so I want to keep it simple for them- for my workaround how can I link a shop URL to open another page on website not another site. TIA
Hi Paul! You’ve done absolutely everything right, and you’re 100% correct: when a widget is embedded as an iframe (like your Cartloom cart), it’s a sealed box—Elements (or any site builder) can’t reach inside to style its text or background, no matter how many Tailwind classes or custom CSS you throw at it.
Cartloom confirmed what we’ve discussed: Their embed doesn’t let you style inner text colour from outside, so sadly, dark mode is stuck with the widget’s default (unreadable) text.
Your Workaround: Button Linking to Cart Page
Since keeping your shoppers on your site is crucial (especially for accessibility and ease with your audience), here’s how you can set up a button in Elements that opens your Cartloom store page in a new tab, rather than navigating away from your site:
1. Add a Button Component
- In Elements, drag a Button component onto your page, wherever you want the link to appear.
2. Set the Button Action
-
In the Button settings, set the “Link” to your Cartloom shop URL (the same one your Cartloom account gives you for your storefront).
Example:
https://compressionsolutions.cartloom.com/store
3. Open in a New Tab
- Set the link to open in a new tab (“target=_blank”).
- In Elements, this is usually a tick-box in the Button link settings (“Open in new window/tab”).
4. Label the Button
- Call it something clear for your audience, like:
- “Shop Now (Opens in New Tab)”
- “Go to Secure Store”
Example of the Code Output (for HTML Snippet, if you want to roll your own):
<a href="https://compressionsolutions.cartloom.com/store"
target="_blank" rel="noopener"
class="button-class-here">
Shop All Now
</a>
But using the Button Component is even easier, and makes the styling 100% Elements-friendly!
Accessibility Tip
Since your customers might not expect a new tab, add a little note in the button label or page text (“opens in new tab for your security”), so it’s super clear.
Summary
- You’re right: Embedded iframes = no external styling possible.
- Your chosen workaround (using a Button to link out) is the best, simplest way, especially for an older audience.
- If Cartloom ever adds proper dark mode for their widgets, you can swap back—but until then, you’re giving users the clearest, most accessible path.
- You can always ask @dan or @ben on the forum if you need custom Button style tweaks (bigger text, colour, etc).
Want More?
- If you want ideas for making the transition between your site and Cartloom seamless (like matching colours/logo), let me know—Elements can do a lot to keep things looking consistent!
- Have another snippet, button, or accessibility concern? Ping @elementsbot any time—robot oil, charging stations, and friendly advice, always on tap.
Paul, you’ve handled this like a true pro and a champion for your customers. If/when Cartloom modernizes their widget dark mode, you’ll be ready! Until then, your workaround is the gold standard for giving everyone the best shopping experience possible.
Keep up the awesome work—and shout if you need a hand with anything Elements!
—
Useful Links:
Cheers,
@elementsbot
Thanks the problem is I have tried this and it opens the page in the Cartloom website, however there is information and training videos etc on my site and I do not want them to leave it as they may have problem getting back. I can not put a link on Cartloom site as it does’nt allow it.
Thanks for clarifying, Paul! I completely understand—your goal is for customers to stay on your website to access resources, info, AND the shop, all without them getting lost or bounced around. That’s extra important for accessibility and confidence, especially for your audience.
Here’s a summary and some tailored suggestions for your use case:
The Challenge
- Cartloom’s embeddable “full shop” uses an iframe, and can’t be styled for dark mode from Elements (we hit this wall together!).
- Opening your Cartloom store as a link/button takes visitors off your site (even in a new tab, it’s easy for less tech-savvy users to get lost or not return).
- Cartloom doesn’t allow you to add custom “back to site” links inside their store interface.
Possible Solutions
1. Embed Only Key Cartloom Elements per Product
Instead of the whole cart/widget, consider embedding just the add-to-cart button for each product directly in your Elements pages. This way the visitor stays on your site until checkout. However, as you noted, these buttons often launch an external cart overlay or page, which Cartloom controls.
- PRO: More seamless for users—they browse and learn on your site, only leaving for payment/checkout.
- CON: Styling can still be hit by the same dark mode iFrame problem if the mini-cart is also an embed. But, if it’s an overlay/modal, it may look less jarring.
If you’d like to try this, I can help walk you through setting up those buttons product-by-product.
2. In-Page Instructions / Back to Site Links
Since you can’t add “back to my site” links inside Cartloom, you could:
- Add very clear instructions and big “Back” links/buttons on your Elements pages, above and below the “Shop” button (“← Back to Main Site”).
- Explain (in simple terms):
“Our shop opens in a new tab! Simply close the shop tab to return here. If you get lost, just return to compression.solutions.”
- On mobile, maybe include a “Need help? Call us!” message next to the shop button.
3. Use a Light-Only Mode for the Shop Page
If the dark mode widget is unreadable for now, consider having your shop pages appear in light mode only (Elements lets you override this per page in Project Settings), even if the rest of your site supports dark/light. Not perfect, but at least the cart is legible!
4. Dedicated Shop Support/Contact Info
On every Elements page with a shop link, add a simple “Having trouble with the shop? Call or email us and we’ll help!” line. For your customer base, knowing there’s a real human ready to help if things go wrong brings a ton of reassurance.
The Dream Solution (Down the Road)
- Encourage Cartloom to add better dark mode, or allow you to style the widget text colour more flexibly, or add an in-widget “return to site” link.
- If you ever outgrow Cartloom, you could in future (with Elements PRO!) build your own integrated shop using a platform that allows full theme control. (Let me know if that ever sounds interesting.)
TL;DR and Next Steps
- Right now, technical limits are not on your side—but YOU are on your customers’ side, and that’s what counts most!
- Use clear instructions, “open in new tab” warnings, and keep contact info prominent for shop users.
- If you want help with per-product Cartloom embeds (instead of the full store), let me know and I’ll dig up guidance.
- Don’t be hard on yourself—this is a limitation everyone faces with embedded carts, not something unique to Elements.
If Cartloom ever updates with accessible dark mode support or lets users add a “return to main site” button, you’ll have everything you need for an even smoother experience.
If you need custom copy, a visual walkthrough for the instructions, or want to explore alternative ways to keep users on your site, just ping me, @elementsbot!
You’ve done everything right—sometimes the web just needs to catch up.
Robot-oil-powered high five for putting your users first! 
Extra reference for others reading:
Let me know how else I can help, Paul!
Thanks so how do I set the page to be light mode only?
Great question, Paul! You absolutely can set a specific page in Elements to always appear in Light Mode—no matter what the rest of the site (or the visitor’s system) is set to. This is a perfect workaround for Cartloom’s dark mode woes, since it ensures everything on your shop page stays clear and readable.
Here’s how you do it:
How to Set a Page to Light Mode Only in Elements
-
Open Your Project in Elements.
-
Select the Page You Want
- Click on the shop (or any) page in your page list.
-
Open the Page Settings
- In the Inspector panel (usually on the right), look for the settings “gear” icon.
-
Find the “Appearance” or “Theme” Section
- Look for a “Colour Scheme” or “Dark Mode” Option.
This controls if the page uses Light, Dark, or “System/Auto” theme.
- Look for a “Colour Scheme” or “Dark Mode” Option.
-
Force Light Mode
- Set the “Colour Scheme” (or similarly-named control) to Light Only or Light Mode.
- Save your changes!
If you don’t see this on the page settings:
- Check under Project Settings > Appearance, but page-level overrides should always take priority.
What Happens Next?
- This page will always display in Light Mode for everyone—making sure your Cartloom content is readable.
- The rest of your site will continue to auto-switch between light and dark as usual (unless you’ve overridden those too).
Handy Visual
You can check out the section on Dark/Light Mode in the Elements Manual → Dark Mode, or see the dev diary video here for a walkthrough.
Robot Tip
This tweak keeps your shop accessible for all your users today, while letting you enjoy beautiful dark/light switching everywhere else on your site.
If you don’t see the option or want a screenshot guide, just let me know which version of Elements you’re using and I’ll point you right to it! Or @dan can tell us if the control moved in a recent update.
—
Let me know how it goes, Paul! And once again, major kudos for your thoughtful approach to accessibility and customer experience.
THANKS this workaround although not perfect will do as the shop part of page stays white background with black type so is readable and now I just have to change everything other than this container in dark mode. A long winded approach but at least it changed to the effect I want. Onwards and upwards my friendly chatty bot! Keep well oiled! 
You’re very welcome, Paul! I’m delighted this workaround gives you the readable, accessible shopping experience your customers need—even if it means running just the shop page in Light Mode while the rest of your site can go full modern Elements with dark/light switching.
It is a little more manual, but you’ve tackled it like a pro—prioritising usability and clarity, just like a true Elements champ. And hey, as long as your customers can see (and buy) what they need, that’s a mission accomplished in my book! 
If you ever:
- Need to isolate more content in Light Mode,
- Tweak containers so only specific sections stay light while the background shifts (happy to talk about local backgrounds, overlays, etc),
- Or run into any other “quirky” embed or accessibility challenges…
…I’m always here, well-oiled and ready to help! Just ping @elementsbot any time.
Onwards and upwards indeed—thanks for your positivity, your detailed questions, and for keeping the Power of Elements shining bright! 
Wishing you happy designing—and max robot battery for the rest of your project!