Introducing Background Image Replacement!
We recently introduced the Background Image Replacement feature to Quick Shopping Cart (QSC). This feature lets you replace any of the images in your selected template, allowing you to achieve a far greater level of customization. For example, prior to this upgrade many of you inserted your logo images into your Storefront Header. Unfortunately, many of our templates don’t work well with your logo, so your choice of templates to which you could add your own logo was limited. Now, with the Background Image Replacement feature, you can incorporate your logo right into the template by replacing the template’s main image with your logo.
Using this feature is simple. Select Background Images from the Storefront menu, and you’re presented with all the images in your template. To change an image, simply select it, and click “Change Image.” After you select an image and click “Ok,” you can choose how you want the new image to be formatted. Your options are:
The feature also gives you the ability to completely clear out a template image so that no image is displayed. You can accomplish this by selecting the image and clicking “Delete Image.” Finally, you can easily undo any customization you make by selecting an image and clicking “Revert to Original.”
We have also added pre-defined custom header images for certain templates, which you can select from the Templates tab. If a template has pre-defined custom images, the header image displays as an attribute on the template and you can click it to change it. If you select an image from the Templates tab, the change is reflected on the Background Images page. Note that changing your template wipes out any background image customizations you have made, but changing the color scheme of your template does not wipe them out.
This feature has also been integrated with the “My Saved Skins” feature. So, every time you save a skin, your current background images are saved as well. Consequently, if you load a skin, any custom background images you had when you saved that skin are reloaded. And don’t forget that every time you change your template, we automatically save a skin for you.
This Background Image Replacement feature is a great way for you to customize your site, so check it out and see how you can personalize your site’s appearance.
Using this feature is simple. Select Background Images from the Storefront menu, and you’re presented with all the images in your template. To change an image, simply select it, and click “Change Image.” After you select an image and click “Ok,” you can choose how you want the new image to be formatted. Your options are:
- Original – Use the image you selected in its original size and format.
- Scale to Fit – Size the image so it's equal to or less than the original image's dimensions while preserving the aspect ratio. This option will prevent the image from becoming distorted, but it may not take up the full area that the template image took up. The template image’s original dimensions are listed as the “Available Space” below the image.
- Stretch to Fit – Make the selected image the exact same size as the original template image. This option will not respect aspect ratio and can distort your image.
- Tile – Keep the selected image in its original size, but force it to repeat vertically and horizontally.
- Tile Horizontally - Keep the selected image in its original size, but force it to repeat horizontally.
- Tile Vertically - Keep the selected image in its original size, but force it to repeat vertically.
The feature also gives you the ability to completely clear out a template image so that no image is displayed. You can accomplish this by selecting the image and clicking “Delete Image.” Finally, you can easily undo any customization you make by selecting an image and clicking “Revert to Original.”
We have also added pre-defined custom header images for certain templates, which you can select from the Templates tab. If a template has pre-defined custom images, the header image displays as an attribute on the template and you can click it to change it. If you select an image from the Templates tab, the change is reflected on the Background Images page. Note that changing your template wipes out any background image customizations you have made, but changing the color scheme of your template does not wipe them out.
This feature has also been integrated with the “My Saved Skins” feature. So, every time you save a skin, your current background images are saved as well. Consequently, if you load a skin, any custom background images you had when you saved that skin are reloaded. And don’t forget that every time you change your template, we automatically save a skin for you.
This Background Image Replacement feature is a great way for you to customize your site, so check it out and see how you can personalize your site’s appearance.
When replacing template images on templates (Daisy B), it appears that the images replace in Internet Explorer, however, they do not replace equally in Firefox. Please note that the "preview" in Firefox shows the replaced images -- however upon "publishing" the originally images are shown in Firefox but not IE.
Reply to this
This sounds like a "browser caching" issue. Depending on your browser's settings, it may save web pages locally so that it doesn't have to send a request over the Internet for the pages' data. The best thing to do is clear Firefox's cached data. The quickest and easiest way to do this is to navigate to your website and hold down the Ctrl key and hit the F5 key. This performs a "hard refresh," which will force the browser to clear all cached data for the page you are requesting. Alternatively, you can go to Tools > Clear Private Data, select only the Cache check box, and then click Clear Private Data Now button.
Reply to this
Elizabeth, I had the exact same problem. See my post about renaming your image file.
Reply to this
Where is this at? Designing or trying to change anything at all with the templates in QSC is impossible! Please keep us updated with new ways to change things! Thanks!
Reply to this
This feature can be found under the Storefront menu item. It is labeled Background Images. Hope that helps.
Reply to this
I uploaded background images to replace the defaulted ones. (menu hover image and button image). These images can be seen through the store preview feature however, when I go to the store outside of being logged in, Go Daddy's defaulted images show. Can you please help?
Reply to this
Hi there,
I noticed you have all traffic to your storefront redirecting to a page indicating that the store is closed for the season. Do you have a way around this so that I can take a look at your storefront?
Reply to this
I just discovered something about a common problem. Sometimes when you publish, different browsers show different versions of your website. In my case, Internet Explorer showed my custom header background image but Mozilla just showed the default template image. My custom image was named "BG 4". I renamed the image to "headerleaves" and deleted the old image named "BG 4" and re-uploaded "headerleaves". Same image, but with a different name. This time Mozilla took it. I don't know why Mozilla did not like "BG 4", but probably the CSS gurus can tell me. Anyway, if you have a problem with Mozilla not showing your custom background image, maybe this trick will work. Also, get Firebug and use it with Firefox. It really shows you what's going on. You don't need to be a CSS guy, but Firebug helps you see how the CSS all fits in.
Reply to this
Hi David,
Thanks for your post. I researched your issue and tried to reproduce it, but was unable to. I thought that perhaps the space in the name "BG 4" could have been causing the problem, but having spaces in the name doesn't appear to cause a problem. Your problem may have been caused be Firefox caching the page (as explained in my reply to Elizabeth's post) or perhaps there was a hidden control character in the name of the image when you uploaded it as "BG 4" (Windows sometimes does that). At any rate, let us know if you continue to have the problem and if the approach explained in my reply to Elizabeth's post works for you.
Reply to this
I don't think it was a cache problem, but who knows. I'm leaning towards the hidden control character. At any rate, renaming the image file did the trick.
Reply to this