Uploading and referencing custom images in BigCommerce/Stencil

0
votes

Recently started work on a BigCommerce project and on the homepage I want to have a theme area where normal site admin users can upload their own images based on holidays (Xmas, halloween etc) in the theme editor.

I know how to add in some custom elements in the theme editor using the Schema and Config files (headings, text, font colours etc), and how to reference them in the homepage. I'm also fine with referencing set images in the assets folder which aren't going to change, and manually coding references to them.

However I can't quite seem to work out how to add a custom image upload to the theme editor, or how to reference it in a page. Can't seem to find any answers in the Stencil documentation or usual Google searches etc either.

2
themesbigcommerce
You want admin users to upload and use images is that correct? If so then there is not a way to upload to the storefront with a Stencil theme. This would be done in the admin area of the control panel. forum.bigcommerce.com/s/article/Using-the-Image-Manager#viewing. May I know the use case or workflow you imagine for the end users? That might help make things a bit clearer for me. - T.J.
Thanks for the reply TJ. Basically the place I'm working for sells fancy dress stuff through various platforms, one of which is BigCommerce (also their main site). The main page is going to show new/upcoming items etc, but I also want a theme area at the top, with some circular images they can click on. The idea is customers coming to the page for say Halloween fancy dress, can immediately see the Halloween image in the theme area, and go to that specific fancy dress. I want normal people who know how to use the admin area to be able to swap new images in and out themselves - Ty_

2 Answers

1
votes

The Stencil Theme Editor currently only supports the file upload data type in the Optimized One-Page Checkout customization settings, but there are a couple of possible workarounds to allow the user to upload their custom background image and then reference it in Theme Editor settings:

  • One option would be to have the user upload their image to WebDAV, making sure that their image followed a naming convention that you specified. For example, the Halloween image could be required to have the file name halloween.png. You could map that value to a Theme Editor dropdown setting for Holiday Background>Halloween.
  • Another solution might be to have the user upload their image to WebDAV as mentioned above, but instead of a dropdown menu, you could have the user type their file's name into a text input setting in the Theme Editor. Keep in mind though that there's a 64 character limit for input values.

Hope this helps!

0
votes

There are 4 ways to get images into the BigCommerce store.

You can:

  • Upload into the content folder through webdav. Then the images would be referenced like url.com/content/image.jpg. This does require a webdav connection and while everything does point you to using file managers like cyberduck, you can actually map a drive to a network resource to make this super easy. This mean you can create a z drive that is actually your bigcommerce content upload through webdav. It's pretty easy to set up and for customers to use. The drawback is that these files do not get put on a CDN so there's a little loss of performance.
  • Upload into the theme's images folders. This is complex and would require your client to figure out the stencil local dev connection and push versions up to their store. This would allow the images to be CDN'd but is super complex and your clients won't figure it out... It could also expose you to some long-term version control issues as they may be overwriting you or vice versa.
  • You can use the media manager to upload images. If you're referring to them in code, an easy trick is when your clients want to replace an image, to delete it and upload a new one with the exact same name... then the reference doesn't break. This is the easiest way to deal with site-wide issues from the client-side. Images are CDN'd this way as well.
  • You can consider using the marketing banner function for semi-temporary marketing messages. This is what it is made for, the images will be CDN'd and it's full GUI with no techy connections for your clients to figure out. This is perfect for banners that span a single page, but I don't think there is currently a side-wide setting for locations.