Creating my website from Photoshop: How?

New Member
26 0 0

I am good at creating pages in Photoshop, but HORRIBLE with code. And I am tired of paying developers for small changes. I am ready to learn. Where is the best place to start? I want to slice those images and get them working on my website. Currently it is custom, but I want to make changes. I am a little disappointed with Shopify themes and their restrictions, I will give it another year and move on if I can't get my site the way I want it. 

0 Likes
Shopify Partner
1841 171 492

Hello Hayden,

No need to answer these questions here - perfectly fine if you answer them for yourself.

  1. Is an hour of your time worth less to you or your business than having a developer do what you need?
  2. Is investing 100's though more likely 1000's of hours of learning worth the effort and opportunity cost to you or your business?
  3. Will that new skill provide the greatest return on investment to your current job or business as opposed to other skills?

If you answered mostly NO then stop here.

Next ask yourself whether you would enjoy

  1. Keeping abreast of the latest changes in web standards, the backlog of standards supported and not supported across a myriad of clients?
  2. Tweaking and nudging pixels for a week until perfect just to find out it's all messed up on version so and so of browser this and that on device XYZ?
  3. Finding out that writing HTML could also mean learning templating languages such as Liquid or that CSS has 3 dozen superset pre processors with another 3 dozen post processors. Even with all that remaining quite easy to learn, just about any website these days makes use of Javascript... and that's when you open pandora's box and a stream intense insanity highlights the vast universe of possibilities created by developers driven by perpetual motion machines of invention but mostly re-invention and utter clutter. But you might love clutter?
  4. Oh there are many more... you'd essentially need to be madly in love with the web in order to bare its unfkwithability. Do you feel them butterflies when you think about web technologies?
  5. Even if you created the Sistene Chapel of web sites, Google & Co might still not like it so you better buckle up and spend another few hundred hours learning what they do like. Does that tickle your interest?

Don't mean to discourage you. By no means, I've been in software engineering for around 20 years and love it above all else (and my wife too should she read this) so I am only happy to share this passion with others. But I didn't get in to it because I was annoyed with some supplier or some product. That to me is an important distinction.

Still here?

Great, here is a list of resources where you will find free and paid courses. Of course, YT is full of random tutorials too as are many web sites dedicated to web technologies.

I have used or still use Pluralsight, Egghead, and Udemy and can personally vouch for the quality of Pluralsight and Egghead with Udemy being a hit and miss on occasion.

Best wishes!

I turn coffee in to code - since 1998
0 Likes
New Member
26 0 0

Karl I like designing and just want to be able to tweak things that a developer has already done. Not trying to master web design, I can't stand it. Please, look at our site and tell me what you think.  It looks pretty crappy on phone, thats one of my issues. 

0 Likes
Shopify Partner
1841 171 492

I think the mobile version looks pretty cosistent in look & feel to the desktop version. Which is good to begin with.

However, there are a few minor hiccups here and there

Home

  1. The triangular ribbon for e-book download hides the cart and covers the menu making it unusable or very difficult to click - needs to be hidden in mobile viewports
  2. The sections for products, videos etc. could benefit from a smaller font size to make the entire experience more compact. Having those fonts slightly smaller shouldn't be an issue on phones which are typically held quite close
  3. You may also want to consider hiding some sections for mobile view or showing an alternative layout that's more minimal i.e. "A short video about us" on mobile wouldn't be absolutely necessary (the heading above yes, but not the video intro), the "ready to learn" could be a hyperlink list to top 5 learning videos instead of a "banner" type section

Blog

  1. I'd not show tags on the blog posts listing - you have quite a few and they push the content down. Remember, on mobile I want my content, the message, the action, the whatever I am there for as visible and as soon as possible. Clutter and extras can be below the fold i.e. hidden below the visible viewing area

Products

  1. When viewing a product detail, the hamburger navigation is broken. Just doesn't do anything. That's a major one obviously
  2. Personally, I'd have the spec sheets and video moved below the variant drop down (where the buy button will be if you're logged in I assume) and below the shipping info chart
  3. The product image could be a centre aligned and doesn't need all that padding / margins
  4. What am I looking at? No product title, no description - bad for the user, even worse for Google & friends

Invisible Issues

  1. Whatever you have going on with Firebase, it's broken. Not to mention, I wouldn't be loading ES6 modules in browsers just yet - or differently put - not on a storefront website
  2. Service worker starts throwing errors
  3. Whatever is causing above errors (probably some app you are using) needs to be sorted regardless of mobile or not version

I am sure that none of the issues I mention above are related to Shopify platform or Shopify theme - rather some work has been done to add some apps, make some changes here and there and now it's slightly off in some places. Nothing that cannot be fixed and I am sure in time you could do this yourself, or alternatively you could look out for a reputable Shopify Expert with good references to have these sorted quickly and reliably.

Best wishes and best of luck whichever way you decide to go!

I turn coffee in to code - since 1998
0 Likes
Highlighted
New Member
26 0 0

Really appreciate this. It is always good to have an exta set of eyes to check things out.  SO...

 

 I fixed the download. You are right.. Made mobile pretty bad. 

I made the font size smaller on the sections, it does look better, but I need to figure out how to make the headings looks better for mobile ( assuming that most people look at the web vertically)

At first I did not know what you meant by tags, but soon realized there are similar tags on the blogs. So yes, I get it. Thanks again.

I did have some help with a developer, so I had NO idea what firebase or service worker errors were, BUT I think it was Google Shopping.  I erased Google Shopping and it appears this is the error.  Again.... Thanks. 

Still working away, I really appreciate your help. Your feedback is valuble. 

0 Likes
New Member
26 0 0

Oh by the way, I am not sure what hamburger nav is. I THINK you are referring to mobile? Researching until I get too tired. thx

0 Likes
New Member
26 0 0

Sorry for the multiples, need some advice here. 

I totally agree. I want to make these product pages shine, but I don't know how! I need custome HTML on the product descriptions? I don't know how! OUCH! Not having the site look good on mobile, or consitent, does bother me. 

 

By the way, I love your picture. It's hilarious. 

0 Likes
Navigator
488 37 94

The only way to really learn is to get down and dirty with HTML, CSS, Javascript, and Liquid code. The biggest thing that you'll need is time, because it takes a lot of it to learn everything. Probably the best thing for you is to learn HTML and CSS first, and when I say learn, it's not like I mean inside and out. You should run through w3schools HTML and CSS to learn the basics, then go to the "How To" section and start learning how to do some of their practical examples. After you've done it over and over and over and over, it's a whole lot less daunting. You'll think, wow why did I think this was so hard before? Well, because it kind of is. It's just the repetition that makes it a whole lot easier. So I'd suggest doing that first, then start out with a completely blank theme on your developer store to start testing out what you can do. I recommend this for people who are really just starting with Shopify, it helped me a lot:

 

https://www.skillshare.com/classes/Shopify-Essentials-for-Web-Developers-From-Store-Setup-to-Custom-...

 

Here is a link to a mostly blank shopify theme with minimal functionality:

 

https://github.com/thisiscapra/shopify-naked

 

Also, one good thing about learning Javascript or any other programming language is that when you understand the concepts of one, it makes it easier to understand another. Best of luck.

1 Like
Shopify Partner
1841 171 492

Hi Hayden,

 

Hamburger menu is just a regular menu, usually a drop down or slide out menu style, so called because of the icon often associated with it: the 3 horizontally stacked lines reminiscent of a hamburger. Developer jokes ;-)

 

As for mobile and consistency - I'd really not worry that much. Put it this way, what do your stats say? How many visitors are on mobile and how many desktop? How many desktop visitors convert and how many mobile users convert? Who is your target audience? Does your target audience buy from their phone while traveling on the tube? What I am trying get at is that having a decent mobile presentation that isn't broken and loads fast is important, mobile is hyped. Seriously, it's hyped! And I really couldn't care less what all those technology vendors and app pedlars starting with Google and ending annually recycling phone manufacturers say. In the end it's simply so: do you buy a car from your phone? Do you buy professional cleaning detergents from your phone? I know I don't so I am okay with checking it out, but I'll buy when I am back at my desk, thank you very much.

 

So don't worry to much and beat yourself up about it. Like Ninthony wrote, learn the stuff you need and makes sense to tackle first.

 

Take the product descriptions where you have side by side columns of image, video and description. Try to improve that by using the CSS that's already in your theme and offers media queries with breakpoints for medium-up, small etc. You'll be amazed once you see the flexibility in that and how you can have 3 columns next to each other on wide screens, 2 on smaller ones and tablets, 1 and stacked on mobile. It's super useful to understand CSS grid systems.

 

Then try small improvements such as the home page hero sections where you have 3 titles on one slide and the slide links away from your store on to Youtube. Try sliding those 3 heading to add some movement. With restraint, don't want wiggly shaky bits and bobs flying all over the place. Most importantly, try and change that external link to be a video element on your slide - you DO NOT want visitors leaving your store by kicking them off to Youtube intentionally. You know how Youtube is... start here and an hour later end up watching mating habits of west African termites or cats on coffee.

 

Further, you got your green colour scheme going but there still remain some subtle differences in hues. Try to keep those consistent from logo, to links, buttons etc. Define some brand, primary, secondary colours or similar.

 

So there really are plenty of small, easy tasks do improve upon that have a great visual and bottom line impact while helping you ramp up on the tech side and skills. Mobile can and will follow, but can wait for later unless your sales figures dictate different priorities.

 

Best wishes and sorry for replying with some delay - I was down for a while to focus and then the forums were down too to rise from the ashes in a brand new amazing look & feel.

 

Hope all is well and best wishes!

I turn coffee in to code - since 1998
0 Likes