Shopify Themes and Apps

This entry is part 2 in the series Shopify for Beginners

Themes and apps are the easiest way to customize your Shopify storefront without touching the code. Your theme dictates the look and feel of your storefront, while apps can add all sorts of functionality, from mobile access to inventory management and more. We’ll walk you through the basics of the Theme and Apps sections here.

Managing Themes

The Shopify Theme Drop-Down Menu

The Shopify Theme Drop-Down Menu (click to view larger)

In your Shopify admin screen, click the Theme link in the green bar to view the Theme drop-down menu. You will see the options available for your existing theme, as well as a link to the Shopify Theme Store, where you can choose a new free or paid theme.

If your theme has configurable Theme Settings, you will see a link to those in the drop-down menu. If not, you will see a link to the Template Editor, where you can edit your theme’s core files. NOTE: Editing a live theme’s template files is NOT recommended for beginners!

Making Changes to Your Theme’s Settings

Shopify Theme Settings

Shopify Theme Settings (click to view larger)

  • In the Theme drop-down menu, choose Theme Settings
  • You will see a page with all the configurable settings for your theme. This varies from theme to theme, so look carefully to see what is available to you. Click a gray header to expand each settings sub-section.
  • To update settings, choose from the available options. Once you are happy with your selection, click Apply Changes
  • Refresh your storefront in your browser to see the changes you’ve made

If you want to save your settings as a preset, be sure to select the checkbox next to Save current settings as a preset. Doing this will allow you to revert back to these settings at any time.

Making Changes to Your Theme’s Template Files

Editing a live theme’s template files is NOT recommended for beginners!

The Shopify Template Editor

The Shopify Theme Editor (click to view larger)

  • In the Theme drop-down menu, select Template Editor
  • You will see a list of all your theme’s core files on the left. Select one to open it in the Editor.
  • If you’re familiar with HTML, Liquid and CSS, you can make changes to your theme’s core files here. (Not sure what Liquid is? Check out Shopify’s Resources for more information.) Even if you’re not familiar with code, simple text changes will probably be easy to make here. For example, to change the message that appears when a customer searches for a page that isn’t on your site, click the 404.liquid template file and make changes to the text. Don’t make any changes to the tags if you’re not sure what they are.
  • Click Save to save your changes. NOTE: Any changes you make here will affect your live site!

To revert to a previously-saved version of your template file, click See older version at the top of your edit screen.

Exporting Your Theme

  • In the Template Editor, find the section at the top that says Export
  • Click Download your theme to start the process of compressing your theme for download
  • You will receive an email from Shopify when your theme is ready to download. Click the link in the email to download the theme to your computer.

Choosing a New Theme

Applying a new theme overwrites any theme currently on your site. ALWAYS export your current theme before applying a new one.

The Shopify Theme Store

The Shopify Theme Store (click to view larger)

  • In the Theme drop-down menu, click Find more themes to visit the Theme Store
  • Use the filters at the top of the screen to help you find exactly the theme you’re looking for. You can choose free or paid themes and search by color.
  • Click a theme’s thumbnail to learn more about it. If the theme has a preview, you will see a link to the preview next to the theme’s description.
  • Choose a New Theme

    Choose a New Theme (click to view larger)

  • To choose a theme, click the Get Theme button.
  • If the theme you have chosen is a Free theme, you can follow the onscreen instructions to apply it to your site right away. NOTE: You will lose ANY changes you have made to your current theme when you apply a new theme! Follow the instructions above to export your current theme if you have made any customizations to it.
  • If the theme you have chosen is a Paid theme, you must follow the onscreen instructions to pay for it before you can apply it to your site

Adding and Managing Shopify Apps

The Shopify Apps Menu

The Shopify Apps Menu (click to view larger)

Click Apps in the green bar to view the Apps drop-down menu. You will see a list of any apps you have installed as well as links to Manage your apps and to access the App Store.

Apps are small applications that can add functionality to your shop. The Shopify App Store contains both free and paid apps.

Adding an App from the Shopify App Store

The Shopify App Store

The Shopify App Store (click to view larger)

  • In the Apps drop-down menu, click Get more apps to access the App Store
  • Use the drop-downs at the top of the screen to help you find a specific app, or browse through all of them to see what’s available. You can search by category or integration, and you can also choose to only see free apps by clicking free.
  • The Shopify Mobile App in the Shopify App Store

    The Shopify Mobile App in the Shopify App Store (click to view larger)

  • To see more information about an app, click its thumbnail. You will see a description of the app, the cost (if any), and additional information like video walk-throughs or demos.
  • Once you’ve chosen an app, click Install App to add it to your shop. Each app’s installation process is different; follow the onscreen instructions to complete installation.

Managing your Apps

Manage Applications

Manage Applications (click to view larger)

  • Click Manage Apps in the Apps drop-down
  • You will see a page which lists all of the apps you have installed, along with links marked Login and Remove.
  • To edit an app’s settings or other information, click Login. To remove the app from your account, click Remove.

Next up: Adding products and creating your first collection.

Shopify Tutorial for Newbies

This entry is part 1 in the series Shopify for Beginners

One of our most popular posts is the Handy Dandy Shopify Tutorial for Newbies – from way back in 2007! While we still love Shopify just as much (or maybe more), LOTS has changed on the Shopify front since then. It’s high time for an update! Note: This article series will touch on all the major sections of the Shopify admin, but it’s not meant to be an in-depth guide. Use it to help you familiarlize yourself with the Shopify back-end rather than as a step-by-step shop setup tutorial. (Although if you want one of those, give us a shout in the comments!)

Getting Started with Shopify: a quick overview

Shopify Admin home screen

The Shopify Admin Home Screen (click to see larger)

Log in to your Shopify admin account (yoursite.myshopify.com/admin) The first thing you’ll see is the Home screen, which (depending on your account level) shows you at a glance some basic stats, how many orders you’ve received, the last login of your staff members and your out of stock items (if any). It also shows you what’s recently happened on your site: products that have been added or deleted, pages that have been published, etc. This news feed also contains recent Shopify announcements. The green navigation strip at the very top of the screen gives you access to all the areas in your shop. The black bar above it gives you a quick link to the shop itself (your URL is there on the left, next to the Shopify logo) as well as a search box and links to Support, your Account (where billing, staff and account level preferences can be set) and a Logout link.

Shopify Nav Bars

Shopify Navigation Bars (click to see larger)

We’re going to start on the far right side of the green bar for this overview. This article will deal with the Preferences section.

The Preferences section:

This is a good place to start, since you’ll need to set up the basic workings of your shop before you start selling anything. The Preferences drop-down has seven sections:

Shopify Admin Preferences Drop-down

The Shopify Preferences Drop-Down (click to see larger)

  • General Settings: Your shop’s name, your contact email, your physical address (this is required for accepting payments, but it doesn’t display anywhere on your site), time zone and currency setup. You can also enter a Google Analytics account or other javascript snippets here, and you have the option to password-protect your storefront (to keep visitors out until you’re ready to launch, for example).
  • Regions & Taxes: You can set your tax rates here.
  • Checkout & Payment: Choose your payment method(s) and decide how to handle checkout-based rules such as automatically closing a paid & shipped order or automatically adding customers to an email marketing database. This is also where you can enter your Refund, Privacy Policy and Terms of Service.
  • Shipping: Set your shipping rules and rates here. You can also (optionally) enable carrier-based calculated shipping from UPS and USPS.
  • Fulfillment Services: Do you use a fulfillment service like Amazon.com or Shipwire? Enter it here.
  • Email & Notifications: The content of your order & shipping confirmation emails can be set and edited here, and you can add Web Hooks to subscribe to “events” for your products and orders (most often these are used to connect with third-party services).
  • DNS & Domains: If you have a custom domain you want to use for your shop, enter it here. You can also opt to buy a domain through Shopify for a yearly fee; if you go that route, all the setup is automatically taken care of.

Next up: the Theme drop-down and how to connect with the Shopify App Store.

Shopify + Wufoo: Add a form to your site

Shopify is a fantastic e-commerce solution for small businesses. One thing it doesn’t have? An integrated contact form. But it’s easy to add one to your site using a third-party service like Wufoo (which offers a free account level as well as several paid tiers with ever-increasing levels of fabulosity).

Add a simple form to your site

new form buttonLet’s take a look at adding a contact form to our ‘About Us’ page in Shopify. First, we need to create the form in Wufoo. Log in (or create a new account) and click “New Form.”

building a form in WufooAdd some fields (for a contact form, it’s a good idea to at least ask for an email address and a message, but you can add any fields you think you may need – name, phone number, whatever). Keep in mind, the shorter your form, the more likely it is people will fill it out!

Once you’re happy with the fields in your form, click the “Form Settings” tab and give your form a name and (optionally) a description. In this section you can also decide on your confirmation options: you can have your users redirected to a page on your site once they’ve successfully submitted the form, or replace the form with a message (“Success!” or something similar). You can also opt to send your users a confirmation email.

Wufoo embed codesClick “Save Form” when you’re all done. A pop-up will ask you what you want to do next. Choose the option that returns you to the Form Manager.

In the Form Manager (otherwise known as your Wufoo dashboard), choose the “Code” button and click the tab for “Embed Form Code.” Select the code under “JavaScript Version” and copy it to your clipboard.

Now, log in to your Shopify admin area and click “Blogs & Pages.” Choose your Contact Us page and click “Edit.”

insert script in ShopifyIn the Edit screen, click the “Insert” button and choose “Script.” You will see a box open up with an example of a JavaScript code snippet. Delete the sample snippet and paste the entire JavaScript code you selected from the Code section in Wufoo (it will be two separate JavaScript snippets). Insert the code into your page and click “Save.”

a Wufoo form on a Shopify pageVoilà! You now have a Wufoo contact form on your Contact Us page. User submissions will be saved to your Wufoo account. You can tweak the settings in Wufoo to dictate where submissions are sent (for example, you can opt to have each submission emailed to you or texted to your phone) and whether you want to integrate your form with a third-party add-on like Highrise or Campaign Monitor. Keep in mind, any changes you make to the form in Wufoo will be reflected on your Shopify site!

Site Launch: The Clink Room Shop

The Clink Room - ShopWhen we announced the launch of the Clink Room last month we said the redesigned Shop was right around the corner – and we meant it! Check out the custom Shopify theme we put together for Casey & Jason. Of course it looks cool, thanks to their amazing graphics, but the really neat thing about it is how it functions behind the scenes. We made it as easy as possible to switch out the background graphics and the sidebar links so that the site will always look fresh. (One of the things we love about designing for Shopify: custom theme settings!)

Baktuli

BaktuliWe love doing Shopify sites, and this one was a blast!

Henry needed a site to showcase his fabulous new collection of luxury yoga towels. His design preference was upscale minimalism, and the site reflects that with a clean white background and dark gray typography. The only splash of color comes from the towels, which take center stage on the home page slideshow.

Henry’s fabulous photography definitely took this site to the next level. Visit Baktuli.com to check it out yourself!

client site (re)launch: munchkin designs

Check out the shiny new theme update at Munchkin Designs! Not only is the site all spiffed up, but now, in addition to all the Munchkin Design products, you can get all sorts of cool items from other creative moms! Click the “Designers” link at the bottom to see the new stuff.

Munchkin Designs redesign

Tees.com featured on Shopify Blog

shopify-blog-e28094-teescom

CouldBe Studios client Tees.com was featured on the Shopify blog. Thanks JP!

They have a great selection of t-shirts, and a fun shop. You should check them out.