Our hosting partner Rocket Ivy has discovered the cause of an error that may cause the MyStyle Customizer to not operate correctly on some sites (never loads), that came from a DIVI theme update in their new “Performance” tab.
Here is a link to the blog post describing the error and the fix to turn off the deferring of jQuery Migrate:
https://rocketivy.com/fix-for-sites-with-divi-and-jquery-migrate-errors-in-console/
Rocket Ivy is our #1 trusted partner for hosting and website maintenance.
We are proud to announce that we now have 3D capability available on the MyStyle Customizer V5.1 or higher. This feature allows our users to fully view their custom products in a fully functional three dimensional model. Directly in our customizer software. Your users will be able to upload, design, and then preview their creations in fully functional 3D!
For this example we will be using makecanvasprints.com
The first step is finding the product you want to customize and the selecting our customize option.
After selecting customize you will move to our Customizer software where you, or your users, can choose to create a custom background within our software. Users can also upload their own images from the web or personal libraries.
Once the image or background has been uploaded and edited simply select the preview button and view your product in fully functional 3D!
While inside the 3D preview the user will have the added functionality of zooming in to have a closer inspection or rotating in any direction desired. The 3D preview feature adds a layer of immersion for the user and gives a better sense of what the final product will look like before it arrives. This feature will be available for our Premium Members here at Mystyle Platform!
To have the new software available, Standard and Managed licenses should contact us to have this enabled for their mystyle sites or customizers.
For some reason WooCommerce has decided the default styles for the cart thumbnails should be very tiny or completely gone all together. This leaves you with just text in the cart, which isn’t always what you want. To show the images, you can add some CSS to your WP settings or theme CSS file to always show the product images in cart.
example image source:
https://MPFusa.org/custom-face-masks/
While I’m sure (re: hope) they have great data to back up the removal of images in the cart, some products need to be seen the full way through for a customer to feel good about what they have in their cart being the right stuff. If you agree, then this code snippet is for you. (copy/paste)
/** MyStyle: Show thumbnail in cart larger than default 32px **/
.woocommerce-cart table.cart img {
width: auto;
min-width: 32px;
max-width: 100px;
}
@media(max-width:768px) {
/** Show thumbnail row in cart on mobile **/
.woocommerce-page table.cart .product-thumbnail {
display: inline-block !important;
}
/** hide colon above thumbnail for mobile **/
.woocommerce-page table.cart .product-thumbnail:before {
display: none;
}
}
This is especially true with custom products, where you may have a few custom designs in your cart with the same product title, and the only recognizable difference is what each design looks like. For this reason, almost every MyStyle enabled site should override the default WooCommerce or theme CSS to show the thumbnail of the user’s creations in the shopping cart. You can do this very easily with a quick CSS tweak.
The backgrounds browser is Step 1 in almost all MyStyle apps for good reason. It’s an easy step that anyone can do and doesn’t require any content from the user, only choices. It’s fun and shows what you can do quickly and provides instant gratification to users by giving them great colors and stock backgrounds to choose from to get them on their way to creating an awesome design that they love.
The only problem is, sometimes digging through that backgrounds library seemed daunting and unorganized, and naturally the images at the very end of the list didn’t get very much action (very few people press previous page first to go through the list in reverse order, almost everyone just goes page 1, 2, 3 etc). So this UX needed to be updated to make it easier to find the content you love in the BG library. Well, that’s where the Category browser comes in.
We’ve launched a new and improved component recently that is already proving to give users more control to get design they love.
Now in step 1 when you browse backgrounds, you’re greeted with a scrolling single page list of thumbnails that represent each category, and are labeled as such to make it easy to understand what each category tile is a collection of. Now, a customer can see “Fine Art” for example without ever having to click to a next page, and they can click that to see our collection of great fine art images without having to dig through a whole list to find them. This is way easier and more fun, and immediately makes it so much faster to create a design you already start to like in the first step.
This feature automatically updates in your app so you should already have it live on your own MyStyle enabled sites if you have a Step 1 for backgrounds (it’s the default, so you probably do).
We’ve already seen an increase in the amount of designs and purchases that make use of background assets that we do not normally see many sales on. This is the proof that the new feature is getting used on designs that make it all the way through to sale, and that customers are happier than ever using MyStyle to personalize their designs with our collections of free graphics.
That’s great news for everyone using MyStyle!
We’ve corrected some issues view and mobile usability in the MyStyle Custom Product Designer plugin for WordPress/WooCommerce. This was an issue that some devices have had with the app not fitting the page well, sticking off the page to the right on small screens. We’ve also added a few more tweaks and tunes to make usability a little more natural for mobile. If you update to the most recent version of our core plugin (any version 3.9.0 or above), you will get the new updates that fix these issues for smart, responsive page auto-adjustments.
Responsive was always supported with the app, and the viewport zooming too to some extent, but it was limited and had some problems with some screen sizes. In many cases, the theme often can leave the page unfitted for the app. The viewport now automatically adjusts much better so that the design app can fit in portrait mode to the screen without any pinching or zooming. Essentially, we’re doing the perfect pinch-zoom for the user, so that they don’t have to, and locking it in there. We update this on page resize events so that if the user turns the phone or tablet sideways, it re-calibrates the zoom, in addition to switching modes from Portrait (buttons on bottom) vs Landscape (buttons on top/left). This should help most sites automatically leave enough room for dragging on the handlebars on the sides as well.
You can disable the viewport zooming in the MyStyle settings, if your theme or your custom code already takes care of this. Just be sure to allow a minimum app width of 550px to allow for the application plus draggable side handle space.
Full screen, the app really works best. The full screen button, however, was beneath the app where it might go unnoticed. So, we’ve moved the button to the top of the page to make it quicker to see right away before getting down into the app on page by scrolling. This should encourage a lot more users to go full screen, where scrolling is eliminated entirely.
We’ve added some subtle handlebars to the left and right of the app for users to be able to scroll easier if they’re on a smaller size screen, since the main design area touch-and-drag will move the design elements rather than the page.
DIVI is a popular theme for wordpress that uses an 80% page width. We’ve overridden this now to allow the app to use more of page size by reducing their default margins and page size just on the Customizer page itself.
If you utilize the MyStyle Print File Renderer with your production process, then at least one person on that team will appreciate this! We’ve released a new Dark Theme that can be chosen from the new minimized menu (three dots …). Once you choose this theme, it will fade the screen to dark greys instead of light greys.
Choose the Dark Theme from the menu and it will save your preference in your browser. Any time you use that browser it will automatically reload the theme. Click the same option again to turn it off and go back to the standard light theme. Now that I’ve been using it for about a month in beta I can’t even go back to the light theme at all! It’s soothing to use the theme.
I can also see why Adobe adopted a similar look in Photoshop as the dark neutral look allows for the print images themselves to really breathe and pop even in the darker ranges.
So, this can be a great eye saver (and battery saver) especially at night when darker UIs help reduce eye strain. And, it looks pretty cool, too. Have a look:
If you or your staff use the Print Renderer then enjoy the Dark Theme, your eyes will thank you!
If you don’t see it yet, clear your cache and refresh :)
Last week we rolled out some major improvements to the MyStyle Custom Product Designer WordPress Pluin in ways that help the app the page of more WordPress themes without needing to edit or override your theme.
Previously, many themes margins and paddings and own approaches to handling the page responsively for all device sizes was having some issues with our iframe. This meant that on some phones, especially smaller and older ones, the page would not “collapse” down elegantly to allow for the app to fit, and would not adjust viewport correctly to accommodate a PWA like the MyStyle HTML5 Customizer.
We’re happy to say that now, if you update your plugin to version 3.2.0 or higher, you will get a new option in your settings that should be ON by default, to override your theme’s viewport tag, and fit the page to the device better to accommodate the customizer app’s iframe on page. This allows the page to fit to the app more naturally in both portrait (upright) and landscape (sideways) hand-held orientations. As always, just press “update” in your plugin list for the MyStyle plugin and it will self-update. Then, visit your settings to ensure the setting for overriding viewport is enabled, which it should be by default.
In portrait mode, you’ll notice the app buttons dock to the bottom of the window, much like popular apps do, such as Instagram, making it very familiar to the user and also much more in-reach of the thumb.
UI Zoom Fix for Retina Displays and HD Displays
This now works especially well for some devices when using Full Screen Mode, as we’ve corrected a zoom-level issue for both regular and retina displays that will compensate accordingly to make finger sized buttons where before tiny buttons would sometimes show on high-resolution devices.
There is also a full screen mode button now on the page beneath the app window, that will snap the app to the top, left, right, and bottom edges of the screen automatically, for an even better experience. In this mode, the full-screen can be canceled by pressing the “x” that appears in the top right corner, as with most software.
This should help many WordPress / WooCommerce plugin users to integrate with their theme without having to do any custom CSS coding or adjustments, and make it much easier for a user to use the app on handheld devices without the theme causing it to go off-page, or not fit the screen well in general. All-in-all this should have a positive effect on sales ratios for any site that has a majority of users on mobile devices, which has by 2018, really become the norm.
If your particular theme still has any responsive issues, please let us know ASAP so we can push an update to accommodate your theme’s non-standard layouts or viewport scripts.
Happy Customizing!
We’ve recently released version 2.1.0 of the MyStyle Custom Product Designer plugin for WordPress / WooCommerce. This is a non-critical update that addresses the following features or points:
Update by pressing “update” on the main MyStyle Custom Product Desginer plugin in your WordPress plugins list.
