Using Custom Images on an Ecommerce Website

Good morning, Ganoksin friends. I hope I’m not wearing out my welcome, I have asked you all so many questions! This forum has become my go-to for surfacing problems as I set up my online shop.

My platform is Shopify. I have recently come to understand that I cannot upload my own images and fonts that I had planned to use on my website. I can only upload my jewelry photos. This is very disappointing, because I had my own branding idea that I was so excited about! Is there an ecommerce platform that would give me the flexibility to customize a website by uploading my own images and fonts? If so, I would be very tempted to switch.

Take a look at my website. www.robmeixner.com. It is a WIX website built on one of their templates. All the font and picture decisions are made by me. They have a lot of fonts available, but I don’t know if you can upload your own. As far as I know, as long as the picture is a .jpg, it can be uploaded to your gallery. Other than having to pay to have my url be used rather than one that says WIX, I have been very happy with them. Other WIX users please chime in…Rob

Rob, from your description, WIX is similar to Shopify. I was just hoping for a way to personalize my website beyond what Shopify will allow. I don’t think it’s going to be possible. But I’m sure I can still set up an attractive website with what they have available, and I should probably move forward and set up the website according to their parameters. As the song says, “You-can’t-always-get-what you wa-ant.” :sob:

Kroma,

I use WIX as well for a band site as well as my jewelry site. I will agree with Rob that it is pretty simple to use and by and large the results are acceptable.

https://dmeixner.wixsite.com/olderiecrafters

I don’t use my url because of the cost involved. Also I don’t use it as a “Shop Here Site”. I use it mainly as an on-line catalog and portfolio. It was set up most recently because the shows I do had all been cancelled due to Covid 19 and I need a presence somewhere. I know my site needs more work but then every site does need on-going work. I think with the WIX tools available you can build an excellent on-line presence with the WIX platform.

I would strongly recommend you stick to simple fonts. Also be aware of font colors and backgrounds. I find sites with more complicated fonts are hard to use. And I will back away from them. That said except when I am looking for tools and jewelry supplies I tend not to look at other sites.

Don

Thank you, Don, for the wise tips. Maybe I’m over-emphasizing the originality aspect when it comes to the website. My jewelry will do the talking for me more so than the bells and whistles of the website design. Sometimes simple is better.

What do you mean by custom images, exactly? Every website builder certainly allows for your own image uploads throughout. Perhaps you just need to try (or purchase) a different Shopify template to get your images where you want them?

Fonts are a separate issue though- there are certain fonts that common browsers all recognize to display from the code. Then sites such as Squarespace, Wix, Shopify etc all have their proprietary (and basic) fonts. Those can be completely limited by the theme, or you can have a lot of options only limited by the overall website builder.

Now if you can get into your website code on Shopify (which it seems you can), you may be able to change the font to something special that you have purchased. Here are instructions. Like Don said though, it’s widely recommended to stick with a basic font for both legibility and functionality purposes. Keep specialty fonts to the headers and titles.

Also be aware this will likely impact the functionality for any users of accessibility features, such as larger text. The ADA means Shopify templates should all come ready to be used by any one with vision impairment or other disabilities, and you may limit these customers’ ability to use your site by messing with the designs too much.

2 Likes

You are welcome. I believe that simple is better 90% of the time. But maybe that other 10% could be just a little style and style is important as well. Put your brand on what you do but don’t hide your art with some other kind of art.

IN REPLY TO

| DonMeixner
August 24 |

  • | - |

Thank you, Don. Great advice, as always.

I also have Shopify and have customized some features. I consult a web developer friend who advises me on changes I want to make. He always recommends the basic non-serif fonts as they are easier to read which influences how long someone will stay reading. Similarly with photos the more customized they are the slower they will load. A slow speed can affect your ranking on Google search etc. So the lesson I have learned is keep it small and simple, which is consistent with the other advice you have received.

Great wisdom in a nutshell! Thank you, Kenna. I’ll save my custom images for my business card and logo.

How fast graphics download has nothing to do with whether they are customized or not, only with the file size. When preparing images for web pages you have to balance file size with clarity.
The JPEG file format allows for a range of compression of images to achieve an appropriate file size. By file size we mean not the size of the image in pixels across and down, but the size of the file in storage or on disc.
A more highly compressed image will tend to look fuzzy or blocky, but the size of the file will be small. A minimally compressed image will be clearer, have clear detail, but will have a larger file size. Deciding on how much compression to apply when converting the image from the hi-res original to a web appropriate jpg is a balancing act.
Many people new to starting a web site get confused by the difference between image size and file size. Also, web browsers will shrink or expand an image to fit the size noted in the page’s code. So someone may upload a high resolution image appropriate for printing to the server and when they view the web page it may look small, if the code has a particular width and height noted. But the full-size image must be downloaded and then the client browser adjusts it to fit the space allotted. So large image files take a long time to download, even if they look small on the web page.
To make sure your custom images download quickly you must prepare them for the web, not merely upload a hi-res image and hope for the best.
Here is a detail from a 1933 woodblock print “Cat and Goldfish” by Ohara Koson with increasing compression applied to the file. You can see how as compression increases there are more and more compression artifacts, what many would call pixelation. If you look at the fine details you can see how high compression means loss of detail.

Ohara Koson - Cat and Goldfish detail - quality 100% - file size 295kB
Ohara Koson - Cat 100%

Ohara Koson - Cat and Goldfish detail - quality 75% - file size 65kB
Ohara Koson - Cat 75%

Ohara Koson - Cat and Goldfish detail - quality 50% - file size 47kB
Ohara Koson - Cat 50%

Ohara Koson - Cat and Goldfish detail - quality 25% - file size 35kB
Ohara Koson - Cat 25%

Ohara Koson - Cat and Goldfish detail -quality 5% - file size 22kB
Ohara Koson - Cat 5%

Here’s the full print.
Ohara Koson - Cat and Goldfish 85% 165kB

I hope this brief explanation will be of some help.

4 Likes

I have experience as a graphic designer, mostly for print, so take this advice at face value.

If you are handy with Adobe Illustrator or Photoshop, you can design a display font, such as your business name or masthead, and save it as an image file. Be sure to choose Save for Web and Devices; you will have a choice of web formats. Shopify will have a list of its preferred image sizes, file formats, and image resolution.

You won’t be able to edit the text of the file using the website builder software, so take your time to get it right.

This won’t give you total control of the process, but it may allow you to customize your site more than software will allow.

1 Like

Very valuable info. Certainly, I would not have known about any of these ramifications if I had tried to upload my desired image onto a website. Thank you!

For logotypes and other kinds of drawn typefaces you can save the vector file in SVG (scalable vector graphic) format. SVG was designed to allow vector files to be displayed on web pages, and modern browsers can all render them correctly. Vector files are much crisper than similarly screen-sized raster files, often have a much smaller file size, and scale perfectly. So that’s something to consider.

One should also mention the PNG format. PNG (portable network graphics) was designed to take the place of JPEG. The biggest advantage of PNG files is that they allow transparency in the image. So you don’t need to match the background of the picture to the background of your page. You can just make the background transparent. PNG files do not compress as much as JPEGs. so the file sizes tend to be larger, but the image is crisper at high compression.
Again, a balancing act.

For the kind of image manipulation one needs for most websites there are excellent FOSS (Free Open Source Software) programs that will do all you need.

2 Likes

Wow! Thank you! You sound like a person who could create his own website with ease. I will keep your information for future reference.

Elliot…Thanks for pointing out the differences between raster and vector files and when to use them. I used to know this stuff, but forgot it when I retired. You peeked my interest to find out more. Following is a link to an article that helps.

Regarding the design of a website, as pointed out by others, keep it clean, plain and simple and use the smallest picture files that will represent your work the way that you want it to be shown on your website. Look at a lot of other websites and note what you like and don’t like. Use this knowledge as you begin to build yours. Mine has a lot of text because I have a story to tell and am less interested in marketing. I have toyed with building a separate website that is strictly focused on selling my jewelry, but I have yet to do it. I guess that I am happy selling what I sell. Thanks…Rob

I built my first website in grad school. That was in '93, when the only way to code HTML was by hand in a text editor.

1 Like

Those were the days. I have forgotten, or never knew, what was needed to build a website then. Luckily, I was the boss and had people working with me who knew how to do it…Rob