Meta Language

Tips on Web developments and frameworks.

[meta101mohamed]

Real knowledge is to know the extent of one's ignorance.

Confucius

[meta101mohamed]

Be not afraid of greatness. Some are born great, some achieve greatness, and others have greatness thrust upon them.

William Shakespeare

[meta101mohamed]

Don't be satisfied with stories, how things have gone with others. Unfold your own myth.

Rumi

[meta101mohamed]

Shopify 11

Front End setup: Header, Footer, Logo

The frontend refers to everything later visible to the public.

For many people, it's super hard to go from a blank canvas to a page full of content.

That's why we need to have proven systems in place that will always turn out in something we can present to a client!

As a first step, I ALWAYS start with the Header and Footer setup.

Get ready to use a theme or a trial of one to see what would work best for you’r shopify store. After you have a bunch of blank silhouettes of what type of content you should place, then you take it step by step.

At the end of this Section, we also prepared an awesome sheet cheat for you to sum up everything that we've covered regarding the back- and front-end setup.

You could even use that as a checklist for your first projects!

If you want to play around with logo creation:

www.flaticons.com

www.canva.com

[meta101mohamed]

Shopify 10

Store Navigation 

Setting up the store navigation is pretty straight forward, and usually the client has a preference already.

Just customize the link name and if you need multiple layers drag and drop to whats needed. I'd recommend 5-7 Items max and not going to deep with nesting, unless your theme offers what is called a "mega menu". If you find yourself having a hard time coming up with enough menu entries, you could also just create further collections and arrange products in different compositions.

In total you'd have maybe 2-3 different menus:

1. Main Navigation 2. Footer Menu with legal pages (3. optional separate footer menus / sometimes mobile menus if the theme supports that)

Just don't overcomplicate it!

[meta101mohamed]

Shopify 9

Setting up Pages

Pages make up any content on the Store which is not, the Homepage, Collections, or Product Pages.

Some popular pages are About us, Contact, and FAQ

Just use the content maker to place headers and texts as well as img’s.

It's the client's responsibility to provide site content like image assets and texts. Period. In reality, there is oftentimes a bit of delay though and if you want to build out the page already you should use Placeholder Texts and Stock Images.

Never leave Sections Empty when you present them to a client. This will be perceived as "not ready yet"!

[meta101mohamed]

Shopify 8

Products

Actually, there are 3 different ways to create Products. 1. Manually

2. Bulk Import via CSV

3. Inventory management Apps your client might have Depending on how many Products your client has to offer, the choice becomes quite easy. Creating something like 100 Products by hand is just impractical and results in a lot of busy work.

Usually, I would create 3-5 Demo Products Max and then the client could decide whether he wants to add the other products by himself or use a more automated solution.

You can also display products with multiple variants whether size color etc...

Have pictures of the product a good amount like 1000x1000 px or 2k by 2k.

[meta101mohamed]

Shopify 7

Shipping and tax Settings

Shipping and Taxes...a topic of little interest to us developers you may think... BUT you wouldn't believe how many merchants get stuck on these settings. When creating their stores so many people literally get paralyzed by the fear of breaking some tax law they don't know about!

Of course, in reality, every tax authority in this world would first send you a letter to inform you about anything that's off and then you'd still have time to fix it. But when people don't realize that...it's even better for us :-) If you can help your clients with these settings and give them peace of mind that's priceless.

You can control Shipping to different nations and countries you don’t want to ship to placing restriction. Different places may have different taxes. Also providing customers with free shipping after a certain threshold is useful for business. 

Also on taxes you could include it in so your customer see before place the order whether tax is included to the price.

[meta101mohamed]

Shopify 6

Payment settings

Back End Setup

Collecting Payments might be the most integral part of an online store.

From my experience, Shopify Payments and Paypal are the most common among all the payment gateways.

https://help.shopify.com/en/manual/payments/shopify-payments

What many people don't know, Shopify Payments is basically a white-label of Stripe (a very popular payment processor for credit cards).

There are also several ways for customers to pay online without using a credit card, or PayPal like Amazon Pay, and Apple Pay. In the future clients might even want to accept alternative methods of payment like cryptocurrency.

Oftentimes setting up the payment gateways requires the merchant to login with his credentials. In that case, just forwarding the payment settings page or showing them how to find it, would be helpful enough!

[meta101mohamed]

Shopfiy 5

Preferences, Analytics, and Ads Tracking

Back End Setup

Website Analytics and Tracking are super important these days.

Oftentimes tracking tools like Google Analytics still have a quite unintuitive and complex interface. Many people just don't know how to properly set up Google Analytics and if you can jump in and help, it will definitely stand out. 

You can help with the meta and SEO optimization

google analytics usually a tracking number ex: UA-xxxx-xx

As well as making a google analytics account in the admins you can create a new property or account. Show advance settings an create a universal analytics property. 

[meta101mohamed]

Today's accomplishments were yesterday's impossibilities.

Robert Schucller 

[meta101mohamed]

Shopify 4

General Settings and Currency Formatting

Back End Setup

General Settings are basically the client's contact details and the local currency format. Is it $100 or 100€ ? Is it 10.2 or 10,2 ? As a rule of thumb, if you're unsure about something like that you should always just assume one! Otherwise, your clients would also be happy to answer that or will give you feedback when something feels of.

Another important tip! If you're missing any kind of data always put USEFUL placeholder values instead! No jokes, no naughty things, no swearing. Might save you an embarrassment or two. 🤦‍♂️ 😃

[meta101mohamed]

Shopify 3

What is a Theme?

Back End Setup

A theme can be seen is the base design of a Store.

It determines how the store looks and feels, and what homepage-elements you can use out of the box.

There can only be one live theme, but you could also have various Theme copies (secondary themes). When working in a Store we usually tend to work in secondary themes, cause we don't want changes to be live right away. (especially not if we're still debugging! 😉)

Later you will learn how to guide a client to which theme they want and so he makes the payment, or try the free trial for the theme or ask him to send the theme in advanced.

You can change the language as well.

After theme is choosen config a duplicate then name it a backup. Youll do the same thing to a store that actually exists as well.

We will get more used to this in later lessons!

[meta101mohamed]

Shopify Partner

Shopify Partner Account and How To Manage Your Stores

Back End Setup

From the Shopify Partner Dashboard, you get access to all the Stores you're working on.

👩‍💻 You can create brand new Development Stores from scratch

or

🔑 get access to existing stores using the my-Shopify-Url of that Site

https://www.shopify.com/partners

Always use the Partner-Dashboard to get access to a client's store, because asking for Plain-Text Login Credentials is super unprofessional!

[meta101mohamed]

What is Shopify?

Back end setup.

With Shopify, you can already set up beautiful stores with little to no code.

That's awesome for multiple reasons!

➡ No Code means there is little that could go wrong (No bugs and Errors! ⚠)

➡ You can Prototype sites very fast

➡ You could already start charging for these services from today

On top of that, when you create a new Shopify Dev Store, they also give you an ongoing share for as long the store exists!

Shopify has different services for partners and will get merchants payment plan. Shopify pays you for every store you create for a client.

Offer store creation more lucrative then sell development. Rather then sell access to existing store and just doing development. Creator monthly recurring income stream.

This is as close as it gets to "passive-income". Of course, it requires work upfront, but it creates recurring income over time!

[meta101mohamed]

Practice

practice all the things learned like media queries for mobile, tablet and computers as well as use all the different flex-box properties to make it responsive.

[meta101mohamed]

CSS 13

Wondering about browser compatibility and weird browser prefixes?

When should you worry?  Here's a few rules of thumb.

Looking for new CSS features usually takes in place as an extension first before being added to new update.

Sometimes you need to update the version of the browser. How far back is ok to go 4-5 years people either update or buy new laptop.

SASS browser pre processors, don’t need to learn but should keep up to date on new CSS.