Promotions

Promotions Overview (click to view larger)

In your Shopify admin area, click Promotions.

You will see any discount codes you’ve already created as well as a link to create new ones. If you have previously used discount codes, you can quickly see how many times each code has been used.

Adding a new promotion

To create a new discount code, click the Add a discount code link just below the Promotions page title.

Adding a New Coupon (click to view larger)

• Give your promotion a name. This will be the code the customer uses to redeem the coupon. You can enter your own unique name (such as SummerSpecials2012) or click the Generate link to generate a random code.
• Choose the Coupon Type. You can choose between a dollar discount (using the currency set in your Preferences), a percentage discount, or free shipping.
  • To create a dollar discount, enter the amount you want to discount each order. You can further restrict this code by selecting a filter from the next drop-down menu: all orders, orders over, collection or specific product. Choosing any option other than all orders will give you additional filtering options.
  • To create a percentage discount, enter the percentage by which each order will be discounted. You can further restrict the code by selecting filters.
  • To create a free shipping discount, enter the maximum rate that qualifies for free shipping. You can further filter this by country.


Coupon details (click to view larger)

• Edit the Coupon Details. The default sets the coupon to start today, be valid until it is (manually) deactivated, and to have unlimited uses. You can click any of those links to edit the parameters of the coupon to set a start and end date and to limit uses.
• When you are happy with your coupon, click the Create discount button.

To deactivate a coupon at any time, you can always click the Disable discount button to the right of your coupon in the list of active discounts.

More Promotion options

Below the coupon list are three additional promotional tools.

• Google Product Search: To publish your products to Google Product Search, click the Publish them now button. You must be logged in to the Google account associated with your shop to complete this process.
• Google Experiments: To perform A/B testing on your shop, click the Create a New Experiment button. You can choose the element of your shop you’d like to use for multivariate testing and follow the instructions to start a new experiment.
• Shopify Marketing Apps: click the link to the Shopify App Store to add marketing apps to your site.

Navigation

Shop Navigation Overview (click to view larger)

In your Shopify admin, click Navigation.

You will see all of the link lists you have created for your site. Link lists are organized with the default link lists displayed first and any custom link lists displayed in alphabetical order by list name. Each link list has individual links to sections of your site or external web pages.

A “link list” is a block of links. Each link list has its own name and a unique handle for use in themes. Each shop includes two default link lists (Main Menu and Footer) but you can add an unlimited number of custom link lists, in addition to being able to add, change and delete the links in both of the default lists.

Adding New Links

Adding a new link (click to view larger)

• Choose the existing menu you’d like to add a link to and click the Add link button.
• Give your link a name. This will be the text that appears on your site (for example, if you’re linking to your Blog and want the link to say My Thoughts, you would enter My Thoughts here).
• Choose the section of your site you want to link to from the first drop-down menu. You may link to a blog, your shop front page, a collection, a page, an individual product, a search page, or an external URL.
• In the second drop-down menu, you can further refine your link choice. For example, if you’re linking to a product, you can choose the product from the drop-down menu.
• Click Add link to add your link to the link list.

If you’re linking to a collection, you can filter the display by tags. So if you have a collection of tee shirts and you want your navigation link to only display shirts that have been tagged “holiday,” you can do so without having to create an additional collection.

Editing Existing Links

Editing a link list (click to view larger)

• Find the link list you’d like to edit and click the Edit link list link next to the list’s title. The entire link list becomes editable.
• Find the link you’d like to change.
• Make your edits by changing the information in the Link Name or Links To fields.
• Click the Save Changes button to save your changes.

Creating a New Link List

Creating a new link list (click to view larger)

• Click Add link list below the title at the top of the Navigation page.
• Give your link list a name and click the Add Link List button.
• Follow the instructions above to add new links to your list.

Adding a Link List to Your Theme

Editing theme files requires knowledge of HTML and Liquid. Do not edit live theme files if you’re not sure what you’re doing! Always back up your theme before making changes.

• Go to Themes > Template Editor. Choose the section of your theme you’d like to add the link list to from the list of available template files on the left. The template file will open in the editor.
• Find the place in the template file where you’d like to add your link list.
• Enter the code for your link list. (In the example below, you are using a conditional tag to check to see if the link list “footer” has any links in it, and if so, creating a paragraph with the class of links and displaying each link in it.)
• Save your template file

Example:

Doing More With Link Lists

Want to get a little fancy with link lists? Here are some cool tutorials for using link lists in ways you may not expect:

• Featuring Collections Using a Link List
• Creating a Landing Page for All Your Collections
• Filtering Collections Using Link Lists (forum post)
• Collection or Page Based Smart Sub-Navigation Menus (forum post)
• Offer Gift Wrap Using Link Lists

Next Up: Blogs & Pages.

Managing Themes

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 (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 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 (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 (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 (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 (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 (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 (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: Promotions and link lists.

Getting Started with Shopify: a quick overview

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 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:

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.

Add a simple form to your site

Let’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.”

Add 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.

Click “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.”

In 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.”

Voilà! 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!

My first thought was to use regular expressions, but it occurred to me that there might be a simpler way to do it with just a couple of explodes.

Just in case this might help someone else out there, I thought I’d post it.

So, assuming you will pass something like “width:1090px;left:-340px;top:-144px;” to the function
you should get back the following:

Array
(
    [width] => 1090px
    [left] => -340px
    [top] => -144px
)

function styles2array($styles){
	$styles = rtrim($styles, "; ");
	$arr = explode(";", $styles);
	$return = array();
	for($i=0; $i<sizeof($arr); $i++)
		{
		$split = explode(":", $arr[$i]);
		$return[$split[0]] = $split[1];
		}
	return $return;
	}

Cheers!

-Matt

We’ll be blogging about all the new stuff 3.0 has to offer on the companion site for our book, The WordPress Visual QuickStart Guide site. Pop on over and take a look at the first tutorial, Custom Menus in WordPress 3.0!

Matt’s list of must-have apps: I work with both Mac and PC for different things. While I definitely prefer the Mac, I haven’t been able to do away with the PCs in my life completely yet. Note: Jessica already summed up all of the collaborative tools that we use, Highrise, Basecamp, Google Docs, etc. So I’ve left those out of my list. They rock, we both use them, let’s just leave it at that.

Mac Software and Web-Apps:

Firefox extensions

My must-have list: firebug (of course), web developer’s toolbar, fireftp, pdf download

Textmate

I’m not going to repeat everything that is on Jessica’s list, but this one is worth it. There just aren’t enough ways to say how much we think it rocks.

Adium

I use Adium instead of iChat. This is hands-down my favorite IM client. It just does everything I want.

Key Fixer

These little tools change the behavior of the home and end keys to what you might be more used to if you also use a PC or have switched from a PC. Since I write code on both platforms, keeping my keyboard working the same way on both is vital.

PC Software:

SQLyog

If you are doing much development with MySQL databases you probably already know about this, if you don’t you should really check it out. A lot of tasks are made easy while still giving you all of the power and flexibility of a command-line. By far my favorite GUI for this sort of work.

Multiple IE

If you are doing web-work, especially anything with UI Design/CSS, you need this. We keep an XP Pro machine on hand just to run this (and, um Netflix streaming movies, shush).

Pidgen

It’s like Adium for PCs. It bundles all of your IM accounts together in one application with minimal fuss. I’ve tried a bunch of them, and used Trillian for a long time, but Pidgen works better for me.

Foxit Reader

If you are old enough you may remember a time when .pdf was not a four-letter word. If you use a Mac, you have probably experienced how lovely it is to see them pop open in Preview almost instantly. Foxit’s reader has made the .pdf a viable document format for me on PC again. It’s fast and lightweight.

A round-up of things we’ve marked in Ma.gnolia today.

No such a thing as free lunch? There will be when Silicon Florist hosts Portland Lunch 2.0 ? Silicon Florist

Tags: portland, web 2.0, lunch 2.0, silicon florist, web design, community, events, business networking, networking, oregon, social, web

Balsamiq Mockups Home | Balsamiq

Tags: business, design, web design, tools

10 Tips for Being a Greener Web Designer [Work Smarter]

Tags: eco, designer, business, business advice

View all my bookmarks on Ma.gnolia

Part 1 of 2 (Matt will post his in the next few days).

Jessica’s list of must-have apps: I work exclusively on a Mac (well, two, actually) so these are all Mac-friendly.

Transmit

I was pretty meh on the subject of FTP clients until I tried Transmit. Now I don’t know what I did without it.

Fluid

See above re: FTP clients and switch for site specific browsers. I finally installed Fluid on a whim and…wow, was I ever wrong. It’s given me a whole new appreciation for my Dock.

TextMate

Can’t rave enough about my love of TextMate. Makes coding a breeze.

Google Docs

We keep the majority of our paperwork (contracts, contract templates, etc.) on Google Docs. We can share amongst ourselves and access files from anywhere – handy when you’re constantly shuttling between office and home office. Also: it’s not Word!

Google Apps

We finally switched our couldbe studios email over to Google Apps, and it’s been great.

Basecamp

For all our project management needs.

Highrise

Keeps track of our contacts.

Ma.gnolia

Social linkage.

Firefox

And, of course, what’s Firefox without extensions? I use Firebug, Foxmarks, 1Password and ColorZilla.

Campaign Monitor

Not only does Campaign Monitor make it easy to send and track email newsletters, it makes setting up managed accounts for clients a breeze.

Reinvigorate

I personally loathe Google Analytics, but none of the other free or low-cost offerings seemed much better. Enter Reinvigorate. They’re in private beta right now, but we were lucky enough to get in. And I do mean lucky: Reinvigorate is a fabulous service, and I can’t imagine switching.

DropSend

When we’ve got to email huge files to clients or printers, DropSend is invaluable.

Blinksale

Simple and easy to use. We looked at FreshBooks, but given our requirements Blinksale is a better fit.

I love twitter, and much of the time the group stream of consciousness that is displayed is great, but… there are times when following a conversation can be a little tough.

I have found myself wishing that there were a way to sort it into easier to follow pieces.

So i figured that would be a good place to start. What I ended up with is TwitterThreads.com.

TwitterThreads.com

The idea here is to connect the dots of the @replies in your twitter stream.

(click)

Above is a screenshot of a threaded conversation I was having with Josh Bancroft this morning that illustrates fairly well what that looks like.

If you’ve somehow never heard of Twitter, check it out.

Twitter rocks.

Cheers,

Matt Beck
Partner, CouldBe Studios