Chapter 12 of Shopify Instruction Series - Final Touches To Your Theme

branding your online store can I learn shopify can I sell online can I try shopify for free Creating a Shopify store Creating pages in Shopify free website how do I set up a shopify store How do I start a shopify store how should I start with shopify how to create a website

Begin your Shopify 14 day free trial here: https://goo.gl/yoVxdf

The Dropshipping Database your competitors wish they had access to - Worldwide Brands has been researching dropshippers from all over the world for over 17 years. Click here to see a test drive

Hello everyone! 

Today, we're going to finish learning how to make changes to your theme. 

By now you've probably decided on a theme. 

In these lessons, we're using the theme Supply because it's a free theme and is designed for a site with a lot of products. 

The next portion of this theme you'll learn how to personalize is called "General Settings." 

Step 1) Click Online Store in the Admin Dashboard.

Click on Themes. 

Click on the Customize button for your theme. 

Tip: Themes are all going to have some different settings here. We'll cover the ones in the Supply theme, and you can figure out the rest from there if you choose a different theme. This will give you the general knowledge you'll need to work with pretty much any theme. 

Step 2) Click on Colors, the first selection in your menu on the left. 

Click on Colors to set all your global color settings

These colors will occur pretty much all over your site universally, once you set them. 

Tip: A white background behind your products is easier on the eyes than a darker color. The footer and header could be darker for accent. The main store and shopping cart backgrounds will be much easier to look at in white or very neutral colors so the products are easier to look at. 

Go down this list, testing each color. Learn what each color setting means. Preview in the screen on the right to see how they'll look. 

Tip: Use a color wheel if you aren't sure how to coordinate colors that are pleasing to the eye. This is the kind of color wheel I own because I used to be terrible at figuring out what colors are complimentary. I got this one on Amazon for almost nothing. Any color that is directly across from another is complimentary to the other. Colors that are right next to one another are not and can conflict with each other. So, in this diagram, orange and blue are complimentary colors. (and other variations of orange and blue)

A color wheel will tell you what colors are complimentary to each other

In this screen, you can see the popup color box that comes up when you're looking at the Header background. You will not only be presented with a color map to move your cursor around, but you'll also have the chance to enter the Hex equivalent of colors you're interested in using. For this example, you can see the Hex equivalent is: #2a6d9b

A Hex number, preceded by a # pound symbol, is how the computer interprets color. You can find a great article about this on htmlgoodies.com here: 

A Quick Color Explanation: 

http://www.htmlgoodies.com/tutorials/colors/article.php/3478951

This will take a little to get it all how you like it. Patience helps here. Take your time to make it exactly how you like it, and if you hate the colors someday it's very easy to adjust them. 

 When you're finished, click the back arrow next to the word "Color" to get back to the main General Settings menu. 

Step 3)

Click on Typography, and you'll see all your font settings for the store. Choose a font that best reflects your store's brand. In most themes, you'll have many to choose from. 

You have several sections of fonts to choose from here. You can choose different ones for buttons, for example, than you do for your Heading style. 

Tip: All of this should be tested on a smartphone, in addition to a desktop computer. It can look really different on devices like tablets or cellphones. It's especially important to make sure you don't set the font sizes too large for a cellphone. 

Choose a font that is a happy medium between a computer screen and cellphone/tablet devices. 

 Click on the back arrow next to the word "Typography" to get back to the General Settings menu when you're finished setting your fonts. 

Step 4)

Click on Favicon. What is a favicon? It's that little image you see in your browser tab that represents what website the tab has open. You've probably become so used to favicons like Facebook and Twitter, you don't even think about it. It makes your website easy to find when a visitor has several browser tabs open. (which most of us do a lot) 

 <--- This is the Facebook favicon you've probably become accustomed to. 

 <--This is the Twitter favicon you've probably become very used to seeing. 

Once you click on Favicon, you'll see a place where you can upload yours. You'll want to use a simple image in the size of something like 114 X 114. It's best for it to have either a transparent background or a white background. The reason is because your browser tabs are white, and it will show up much easier. 

You'll want your visitors to remember your favicon so that when they have several tabs open, they can find you quickly. 

It also helps them identify you easily in their list of bookmarks. 

You can see the globe icon I chose for mine in the image above. 

Step 5) Click back to the General Settings menu. 

Click on Cart

You will most likely see different cart settings in whatever theme you choose. This lets you change the style of your shopping cart. In this screen, you can also enable order notes so you can allow buyers to send you a note during checkout. 

Step 6) Click on the back arrow to get back to General Settings. Click on Social Media so you can enter all your main social media account URLs. You'll have to go to each one and copy and paste the links in here. 

Step 7) Click on the back arrow and go to Price format. This allows you to decide how prices appear on your store. (I leave it at default)

Step 8) Click on the back arrow again and now click on Checkout. This allows you to change your checkout settings. 

 

 You can put a background image in your shopping cart if you like. 

Tip: I always recommend a plain, white page here as well. It could look too busy and frustrate a buyer, unless it's a very low opacity image. (such as about 25%)

I do put a logo or banner at the top of the checkout page so they remember the brand. 

 

 

That completes all the settings in this theme. You're now ready to choose your own theme and personalize it. 

In the next lesson, we'll set up your payment options so customers can pay you. See you then! 

Lynne

Begin your Shopify 14 day free trial here: https://goo.gl/yoVxdf

The Dropshipping Database your competitors wish they had access to - Worldwide Brands has been researching dropshippers from all over the world for over 17 years. Click here to see a test drive

If you'd like to watch this lesson in the video, you can see it here: 

 


Older Post Newer Post


Leave a comment

Please note, comments must be approved before they are published