Shopify & Ecommerce Ramblings

A blog about building and extending awesome Shopify stores

Turbo Theme

Premium Plus (or Premium+) is how we refer to the Turbo theme by Out of the Sandbox.

Not because of Shopify's Plus plan for merchants —although that is who the theme was originally created for— but because if a paid-for theme in the Shopify theme store is referred to as a 'premium' theme, then Turbo needs to have a classification that accurately portrays the tier in which it resides. Currently it is the only theme in this top tier category that we're aware of.

Things have become significantly easier for us these days in choosing a Shopify theme for a store build. Essentially it boils down to the following two options:

  1. Turbo by Out of the Sandbox — for most merchants
  2. Custom designed and built theme — for merchants with very specific requirements

Almost all of our store builds over the last year or so have been one of the two options above.

That's not to say that you can't have a successful store operating on another Shopify theme —even a free one— but when it comes down to it, if you're looking for a theme that is versatile, customizable out of the box and contains features that other themes rely on apps or significant customization for, then Turbo is... well... a no brainer.

Turbo Theme Seoul

By the same token, some merchants who think they need a custom designed theme can actually achieve what they need with Turbo too. Not all of them of course, but a lot of them can have a completely unique looking store with Turbo at the base and tap into all the benefits of this richly featured premium+ theme.

Those for whom Turbo is not a good match would include:

  1. Specific workflow(s) that require a unique layout that Turbo does not lend itself to well.
  2. Very specific branding requirements that Turbo does not cater well for.
  3. Very small budgets where a free theme would make more economic sense and still cater for the merchant's requirements.

Currently a vast majority of merchants opt for Turbo and to explain why and also illustrate why this is not a bad thing (you don't want your store to look like everyone else's) I thought to put together a list of primary reasons why you should consider it as the frontend system for your next Shopify store (re)build.

Speed

As the name suggests, Turbo is a theme built for performance. If serving your products to your customers quickly is important to you (it should be) then Turbo has you covered with it's exceptionally quick browser loading and effective caching.

Header Customization

Very few (if any) other Shopify themes give as many options to customize the header of your store. The placement of the logo, the ability to have navigation left, right, top and bottom and with all the extra bits and pieces it caters for, you won't need to go scouring the app store to add a simple promo bar to your shop.

Mega-Dropdown Navigation

With most themes you'll need to make use of an often buggy or restrictive 3rd party app for a mega-dropdown. With Turbo you get a bunch of versatile, robust and feature rich mega-dropdown options. This has been of massive benefit to us as experts and our merchant clients where we no longer need to diagnose bugs, waste time with slow support nor have to uncomfortably explain styling or functional limitations where an app runs outside of the theme.

Home Page

If you're familiar with Shopify's concept of "sections" you'll know that most themes come with a bunch of pre-sets that you can use on your home page. Turbo comes with almost 20 customizable options including recently viewed products and Google Maps. There are photo galleries, featured promos and logo lists. You'd be hard pressed to need something that the theme doesn't already have as an existing available section.

Product Pages

As the part of your site where the magic happens (purchases) you want to be able to give your customers what they need to make that buying decision. From full width banners to tabbed content and a myriad of other options not found in any other premium theme, the product page in Turbo is unmatched by it's competitors.

Collections

As with the rest of the theme, there are elements to Turbo that you simply won't find in other themes. It comes with fully functional sidebar filters which is normally achieved via an app or significant custom work, product sorting, and even color swatches below the product thumbnails. Full width banners on your collection pages are also a reality with Turbo.

General & Global Features

Areas like the footer which is significantly more versatile than what other themes offer, the ability to integrate your social channels effectively, Mailchimp, image galleries and more, there is really very little reason to purchase another theme.

Summary

As I've attempted to articulate in this article, at the time of writing, chances are very good that you'd be doing yourself and your ecommerce business a disservice if you go with another Shopify theme (other than a custom one if you need it).

I'd even go so far as to say that it stands head and shoulders above the rest of the themes in the Out of the Sandbox stable which are all exceptional themes and we know them all inside and out. In short the reason for this is that while they're (Retina, Parallax, Responsive & Mobilia) awesome themes, they follow Shopify's mandate of simplicity which is fine for beginner merchants except that when your needs become more demanding, redesigning your store will be a must.

Turbo allows any merchant from Basic to Plus to set up a performance oriented storefront with significant room to grow.

If you're interested in having us help you set up or customize your Shopify store whether on Turbo or something else, feel free to check out our services here.

If you're interested in purchasing Turbo, we can give you a 20% discount on the purchase price if you email hello@shopcreatify.com and request the discount code.

Turbo Theme

Premium Plus (or Premium+) is how we refer to the Turbo theme by Out of the Sandbox.

Not because of Shopify's Plus plan for merchants —although that is who the theme was originally created for— but because if a paid-for theme in the Shopify theme store is referred to as a 'premium' theme, then...

read time.

Read More

Learn how to avoid the strong possibility of building a house of cards and instead lay a solid foundation for your store. 

Shopify house of cards

The ability to move rapidly on a platform like Shopify is one of its greatest strengths. Being able to literally (we've done it before) build and launch and get your first sale in a single day is an amazing state for the industry to be in for aspiring merchants. 

Shopify can get you started stupidly quickly. It will allow you to test ideas without hundreds of hours of design & dev time, nor wheelbarrows full of cash. But —and it's a big but— it can also set quite a skewed precedent and can create fairly unrealistic expectations going forward.

The store I mention in the first paragraph was in fact, without any deceit, built and launched in a single day. It included a single digital product and had a single payment method (Paypal). It got a single sale on the day of launch (not by the owner's proud mother) and thankfully following that string of singles, it has actually done fairly well. It allowed the merchant to test the idea and luckily for them the experiment worked and many, many more hours of design, development and marketing and refinement followed.

If they hadn't, it would have likely remained a string of singles.

Bootstrapped Ecommerce

Bootstrap (verb)
Start up (an Internet-based business or other enterprise) with minimal financial resources.

We're big advocates of bootstrapping in business (and we don't mean the framework that makes every site look like this). Especially so when the idea is in it's infancy or the brand is just dipping their toes into this exciting digital sales channel.

Market research can only take you so far. Getting your wares in front of your potential customers and allowing them to vote with their money is —I believe— the only true litmus test to prove your concept.

Unless you're an existing brand with a strong, unique visual identity or there are some very specific requirements around how things need to work or be presented on the store for the venture to be given a fair trial; making use of Shopify's best practice based pre-mades is likely the wisest choice. The way Shopify works in terms of products, collections, cart and checkout; they're tried and tested.

At the time of writing this, over 400,000 merchants are using the Shopify platform every day. Since Shopify's success is directly tied to their merchant's success, with that sort of data you can be fairly safe in the assumption that Shopify are doing things how they need to be done to promote conversion.

Is your business bootstrappable?

Is that even a word? Regardless, deciding whether or not your business concept is one you can go about without bringing in investors or pumping all your hard earned savings into is an extremely worthwhile thing to do.

If you do need to invest in a unique design or some special functionality to your store, then bootstrapping may not be the right approach. If you're selling —how you probably should be— in a manner that is recognizable to your buyers both in presentation and workflow then it is most certainly an option. 

With the assumption that you don't have an experienced internal designer/developer capable of manhandling Shopify to do your bidding, some considerations:

  1. Do you have an existing brand to which the look and feel of the store absolutely has to match? If yes, bootstrapping may not be for you as you'll need to either highly customize a ready made theme or create one from scratch. Argentum Apothecary are a perfect example of this.
    Argentum Apothecary
  2. Do you have very specific and non-standard ways in which your customers need to view and or buy your product? If yes, then bootstrapping may not be for you since you'll be embarking on a software design and development project that will require specialized skill, time and of course budget. This product page we created for CanvasIt is a perfect example of this.
    CanvasIt Custom Product Page
  3. Are you competing on aspects other than uniqueness? Something like superior customer service, better price, or similar? If so, you could consider bootstrapping as an approach and put together a lean mean transacting machine.
  4. Are you able to conduct a proof-of-concept storefront to begin with? One that you can expand upon or develop on top of it at a later stage once the revenue is there? Then yes, bootstrapping is very likely a viable approach for you.

So, to summarize, bootstrapping an ecommerce business with Shopify is certainly possible and may very well be the wisest approach for your store. On the flipside, should your needs dictate it, Shopify is still capable, but you may need to dig a little deeper into your pockets to achieve what you require. Possibly to the same degree or maybe a bit less so than with other ecommerce platforms, but should things need to be custom, there will very likely be unavoidable cost and time implications to consider and cater for.

So, what about these cards then?

Bringing this post back on-topic, I'll explain what I mean by the title of this article. Are you building a house of cards, or are you laying a solid foundation for your ecommerce business?

So often we see merchants that have built their stores based on either bad advice or misconceptions about what is important. I believe that going into something like an ecommerce business, you need to do so with your eyes wide open.

Whether you're selecting a theme or deciding on a theming approach for your store (free, premium or custom), deciding on certain apps or additional functionality or even at a more fine grained level; how the navigation and collections are built, it's good to have at least a high level understanding of what you're dealing with.

Theming your store the right way

Theming —for the uninitiated— is the process of applying the frontend (not just the look) to the store. This includes the entire UX (user experience) of the storefront which means that it covers both how it looks and the logic behind how each user interaction works and reacts to their input.

Some things to watch out for when choosing and building out your store from a theming perspective:

  1. What does your business' storefront need in terms of functionality? Does the default functionality of the theme(s) you're looking at cover your needs or will you have to bring a developer into the mix? Think things like workflows or any specific requirements perhaps relating to tax, how or how many items need to be added to the cart in a single click etc.
  2. What does your business' storefront need in terms of visual uniqueness? Are you able to choose the theme that best presents your product and roll with it or do you need to make some customizations to the theme to make it fit? Perhaps your requirements are so unique that you actually need a custom theme designed and developed.

Always remember that a custom built theme will —if built properly— almost always be leaner and faster than a premium bought one. This is simply due to the fact that fewer things need to be catered for since the theme is being built for a single use case requiring fewer settings and options than one catering for as many merchants as possible. One caveat being that often seasoned ecommerce merchants will opt for the premium theme approach since there simply are more options, settings and toggles in a premium theme and making use of them is far quicker and cheaper than having them designed and developed from scratch.

Premium theme developers are building their themes for the masses... a custom theme will be built only for your store so things like menus with 20+ fonts to choose from would be redundant and likely put you in negative ROI if you were to task your developer with going to this level of detail.

Whichever type of theming approach you decide on, make sure you follow best practice, specifically in the following three areas from lowest level to highest level:

  1. Theming best practice - Build it properly from the start. If it's a premium bought theme, follow the advice of the developers that made it. Consume their documentation and try not to customize it into oblivion. If it's a custom theme, plan it properly, make sure you have a competent (experienced) team designing and building the theme and realize that it is actually a custom software project in itself so treat it as such (version control, impeccable communication with the team etc.) and you should be ok. As much as some people seem to wish it into reality, I'm yet to see an inexperienced team or individual build a solid, futureproof, stable, reliable, responsive and ultimately performing custom solution. They don't need to be Shopify veterans, but without at least solid HTML, CSS and JavaScript skills, you're lining up a world of hurt and a house of cards that'll topple at a single gust of wind.
  2. Shopify best practice - As mentioned before, Shopify kinda know what they're doing. Their business model rests heavily on the success of their merchant clients and there is no reason for them to implement or change something that jeopardizes their bottom line. Being publicly traded now too, they are further pressed to perform and you can rest assured that things like optimization of the checkout process is paramount to their performance and therefore the way it is for very good reasons. Often in the web and especially in ecommerce it is very possible to give a man enough rope to hang himself. Sometimes restraints are good and we're all better off for it. Hacking the platform to make it do something it's not intended for is not in anyone's best interest. Do your homework and establish that what you need is condusive to the platform, the way it works, and proceed knowing that not only are you on the right platform, but the solution will be one you can grow with and into.
  3. Ecommerce best practice - Lastly and most importantly, if you want to succeed in this medium, make use of the knowledge that has been acquired and shared by your predecessors. Learn all you can about what makes online stores convert better, provide seamless, easy online shopping and ultimately succeed. A great book on the topic is Steve Krug's Don't Make Me Think which should drive the point home if I haven't.

“Don't make me think” 
—Steve Krug

If you follow best practice in these areas, you'll be laying a solid foundation for your online business. You can focus on other things like driving traffic, making enhancements to improve conversion, increase average spend, and implementing other measures that drive the business forward.

Don't trip over them apps

As you probably already know, Shopify apps are an incredible thing. They extend the functionality of your store with almost limitless potential and ability. They're also —probably because of this— extremely tempting to just install without too much deliberation.  Therein lies the problem.

With the enormous range of things an app can do on your store and the sheer number of developers out there building these things, even with Shopify's careful curation of the apps submitted and available to you, they do come with some risk. The risks are not nearly as severe (in my experience to date) as an open source project where the developer's motives are not clear, but going into an app frenzy will quickly result in a messy codebase and potentially result in a costly cleanup, lost sales or credibility from buggy, inconsistent or outright broken user experiences.

Often we're faced with a storefront that needs to be cleaned up or a merchant's long shopping list of apps they want to install prior to launch. The former is about to pay for the cleanup, the latter —if we were to just blindly proceed— about to make the mess that will need fixing and cleanup down the line (a house of cards).

Presuming you're the latter merchant in the example above and about to embark on this exciting new adventure, to prevent this situation of code soup and shaky foundations, it's best to do the following:

  1. Identify the absolute essentials in terms of additional functionality for your store to go live with. 
  2. Figure out whether an app is actually the best solution for the requirement or if it can be done as efficiently or possibly even better via some other means.
  3. Should the app be a custom one built only for your store, ensure you're working with a team or individual experienced in this area. An ecommerce store is possibly the lifeblood of your business so it's not like hiring someone to wash your car. Be sure that they know what they're doing and that they have a clear understanding of your requirements before proceeding.

A good point to also remember is that even if two apps are made by the same vendor, they may not be able to both be installed on a single store as they may need to both leverage the same resources of the platform. Ask questions, reach out to the vendors. Most of them are more than happy to help you and a lot of them will even give you extended trials, discounts and even offer the service of installing the apps for you.

Even some apps made by the same development house may not be able to co-exist in one store.

This brings me to the final point and piece of advice on apps; vet them. To do this, follow these steps or similar:

  1. Make sure they're right for your needs.
  2. Make sure they're made by a reputable vendor and that all aspects that you need to proceed with them (support levels, reviews etc.) are to your liking. Remember, they are not Shopify. They're usually small to medium sized software design and development businesses anywhere in the world. Choose wisely.
  3. Make sure the app(s) are compatible with any others you're using or intend to use.
  4. Trial them outside of your live environment. Consider setting up a development store (we can assist with this as can any partner / expert) and run the app in a sandbox version of your store to ensure that it works without breaking things on the live storefront.

If you do your due diligence in this area, you should be able to approach apps without building an ever bloating store and your future prospects in terms of upgrading your theme, adding and improving things down the line with ease will be significantly better.

Should we really Customize this?

Ask "but why"? Do you really need to customize something or would it be just as efficient to make use of available options in your store? Often that answer will be no and you'll be just as successful using some form of tried and tested solution, but equally so, frequently there is a true need to customize.

"I can't believe that any individual merchant, developer, or even agency, would be able to out-CRO the Shopify team who are responsible for the global checkout UI/X. They have data from how many 000's of stores to aggregate and test against?"
—Rick Davies from Taylor Stitch

In the cases where viable options are available that do not require customization and achieve the same or similar results, it's usually wise to follow that approach. In the cases where customization is absolutely and unquestionably required, just make sure you do it properly.

Some things in Shopify shouldn't or even can't be customized in the way that you want... even on the highest tier of the platform, but a lot, in fact more than most people know can actually be changed quite considerably.

If you've established that you need to customize things, as mentioned a couple of times above, make sure you're working with a team or individual with experience in this skill. Even small customizations should strictly be done the right way and ideally tracked with some form of version control (we use Git on Bitbucket). If you don't you're likely going to paint yourself into a corner with a store that cannot be upgraded, gets into a state of no return or even worse, having a broken store that will require significant fixing or a complete do-over when it becomes too far gone.

To summarize, this should be the ideal sequence of considerations when a customization seems necessary:

  1. Establish conclusively that it is a real need and not simply a desire. Potentially ask around or do some research to be sure that it isn't something others have tried and seen little or no return on, or perhaps not enough of a return to justify doing it.
  2. Establish conclusively that the need is not achievable via some other means that is less intrusive on your store. Perhaps an app or something built into Shopify or the theme.
  3. If you've reached the conclusion that a customization is needed and not achievable via other means, you'll need to embrace the implications of customizing your store. There will be cost implications, timeline implications and the potential sacrifice of future enhancements made to your theme by creating a fork of it.

So, yes, you can customize your storefront. The potential and abilities inherent in the Shopify platform are vast and if you go in with your eyes open, are aware of the risks and implications and proceed with the right people with the relevant skills, you can do great things.

To summarize

Summing up this article, I've briefly covered themes, apps and customizations as three points of consideration when embarking on a new ecommerce venture or redesign. It should now be clearly apparent that while things on this platform can be achieved quickly, affordably and with a high level of quality, it also allows for more intricate, unique and brand / business specific things to be design and developed on top of it if you're that way inclined.

Just be sure that you're doing things that are necessary, do them the right way and your business should benefit from better profitability, less superfluous features and visuals and fewer issues and subsequent costs down the line.

As may be obvious by the content of this article, we're certified Shopify Experts and if you're in need of assistance we'd be more than happy to help. We have a solutions page that can guide you in choosing what you need from us or if that leaves you feeling bewildered, feel free to simply ping us using hello@shopcreatify.com.

Shopify house of cards

Learn how to avoid the strong possibility of building a house of cards and instead lay a solid foundation for your store. The ability to move rapidly on a platform like Shopify is one of its greatest strengths.

read time.

Read More

A lot of what we do on a daily basis at ShopCreatify is spotting and fixing things on storefronts that are causing the merchant's business "pain".  A frequent pain experienced by them —especially once their traffic starts to increase— is the amount of time expended on responding to emails and sitting in phone calls.

Reduce the Ecommerce Noise

It will of course depend on the type of product you're selling and the nature of your business, but it's fairly safe to assume that the more automated things can be, the better for you and your team to grow the business.

An overabundance of customer support calls and support requests can result in an overwhelmed support or sales crew. It can also result in your customers not being attended to as quickly as they'd like and could even cost you sales.

Thankfully, having more requests than one can handle is something we consider "a good problem to have" and it's one you'd rather experience at some point in your store's growth than not. The reason it's good is that there is definite interest in your product and it's a direct opportunity for you to improve your storefront and increase sales.

    Step 1 — Ask Why

    As is best practice in this industry, it's always good to start by asking why. Why are you receiving so many support requests and questions?

    If there are a lot of questions before the customer has made a purchase, it's probably safe to assume that your store is not providing the customer with enough information to buy.

    If there are a lot coming in after purchase, then you'll need to take census of why this is. It's possible that the information presented to the customer after they've ordered is insufficient or just not clear.

    Take note of these points in the process where the customer is reaching out to you as they will dictate the content you need to produce and measures you can put in place to prevent this unwanted noise.

    Step 2 — Assess your Options

    There are usually a few ways of resolving the situation and the methods mentioned below are not just either/or options and perhaps your store could benefit from implementing them all.

    Product Information

    This one should be fairly obvious, but it's surprising how many merchants attempt to trade on extremely lean product information. Your product description is not only for SEO and often your customer will still be in the researching phase of buying. Make sure your product information is as detailed as it needs to be so that it leaves no questions unanswered.

    Depending on the amount of and type of content you have for your product, there are always ways and means of presenting it to your customers better. Some themes come with novel and simple methods of showing more information without creating cluttered looking product pages. A good example of this would be the Out of the Sandbox themes (Yes, that is unashamedly a referral link. Their themes rock!) where a simple HTML tag in your description's source code will split your content and allow you to add a wealth of additional information below the integral images and add-to-cart area. You can learn more about his here.

    Description Split in Shopify

    A lot of merchants also implement additional lifestyle imagery, tabs for additional product information, videos and really any other content that will help explain and sell the product to their customers. A great example of this is Fuego Living's product page where they've significantly expanded upon their product so that the customers know all they need to know before placing their order.

     Good Product Information

    This is an area where the theme you're using could offer you all you need to plump out your description, but if you need help, feel free get in touch with us.

    FAQ Page / Knowledge Base

    Putting together a good FAQ page and or knowledge base is worth the effort. You can and probably should even go the extra mile of implementing a solution that is better than just a simple list of questions & answers.

    Before diving in blind though, make sure that the content going into your knowledge base is a direct reflection of what your customers and prospects are actually asking. Prioritizing the most frequently asked questions and making them most prominent is wise and increases the chances of them being found.

    There are even apps like Help Center where you can offer a far greater customer experience, include a search function and it also makes it a lot easier for you to build and manage your FAQ. At the time of this writing, this app is also free.

    Here's a great example of how Watchers Store makes use of the Help Center app:

    Watchers Store Using Help Center

    Taking things to the next level you could also make use of the ZenDesk Guide offering that comes with their support package. The Zendesk family of products may actually solve a number of issues mentioned in this article.

    Contextual Guidance

    In the process of shopping, sometimes you need to ask the customer questions. Whether it's a measurement that allows you to send the right product and reduce the possibility of returns or just an aspect of your product that is not widely known, it's wise to implement measures that make the reasons completely clear to the customer.

    A good example of this and a relevant solution for this kind of issue is including an inline help feature. In the example below, you can see that the customer has immediate access to additional information around why certain things are being asked for prior to being able to add to cart.

    Below is an excellent example of inline help where the customer can quickly and easily click on "View our Size Guide" to ensure they order the right fit.
    In context help in Shopify

    Whether it's a tooltip, a modal popup that is launched or even a link to a page with more information (ill advised as it takes the customer away from the product page), this form of contextual guidance will prevent your prospect from picking up the phone to ask you why and in so doing, distracting you or your team from growing your business.

    Relevant Information Pages

    Depending on the product you're selling and the types of customers you're trying to attract, it would be wise to build pages that speak directly to them. An obvious example would be where your customers are likely to be in a demographic where tech savviness is possibly quite low. In these instances, a page documenting the process of adding a product to cart and checking out would go a long way to reduce telephonic walk-throughs or manual orders.

    There are obvious pages that you should be sure to include on your store like shipping information and returns policies but if there is something very specific about your product that justifies it's own page, be sure to include it and make it easy to find.

    Videos

    Being that customers seem to often not read the words you carefully crafted, often a video is a preferred medium for getting the message across. 

    Videos can be implemented at almost any point on a Shopify store using a Youtube embed code and producing them has never been easier. There are a number of tools for both Mac and Windows for you to use and there are plenty of articles online explaining how to do it well.

    Live Chat

    This feature has been left close to last specifically. Of course if you have not implemented as many measures currently within your means to prevent questions about your product or service, this feature is simply going to cause you more noise.

    Also, live chat is going to require someone to monitor it at least some of the time if it's to provide value. If you've done a good job of putting together a comprehensive knowledge base and your store's content has all of their questions already answered, your live chat interactions should be quite brief and the person handling the task can treat it more as a personal "visitor's guide" role than a sales role. Your virtual information desk.

    Hide Your Contact Number

    This is certainly a controversial piece of advice if I did not disclaim that you should probably not do this if you do drive sales through received calls. If however you —as a lot of ecommerce merchants do intend to reduce human contact and increase sales then having your telephone number made available only once all other means have been exhausted could be a wise approach.

    Removing your number entirely is almost certainly bad advice for your store since it can reduce the perceived credibility of the company if no number is available, but doesn't mean you need to make it easy to come across. A lot of sites not just ecommerce ones implement an "ask your question first" methodology where only if the knowledge base gives them no joy do they get a number to call, email address to send to or even a form to fill out.

    Only you can make the decision on whether or not this will cost you sales or allow you to focus on growing your business while having no negative impact on sales. For example, perhaps a lot of the calls you receive do not convert into sales making them a waste of time and cutting them out altogether is only a good thing.

    Conclusion

    As can be seen, there are a number of solutions to the client noise debacle. There are undoubtedly others, but with the measures above implemented you'll have laid a good foundation not only in noise reduction but possibly also see an increase in conversions.

    If you have any questions about what is mentioned in this article or need some help in setting up any of these measures, please feel free to reach out to us. We don't mind the noise.

      Reduce the Ecommerce Noise

      A lot of what we do on a daily basis at ShopCreatify is spotting and fixing things on storefronts that are causing the merchant's business "pain".  A frequent pain experienced by them especially once their traffic starts to increase is the amount of time expended on responding to emails and sitting in phone calls.

      read time.

      Read More

      One of the more frequently asked questions when we're setting up ecommerce stores using the hugely successful Parallax theme by Out of the Sandbox, is how to size the banner images.

      Being that the parallax effect itself requires some overlap for it to actually function, it becomes hard to decide on the correct size of your banner images and where to place your important content.

      This can make it difficult to brief your photographer or graphic designer, so we set out to simplify the matter intelligently.

      The most important things to realize are that:

      1. The image will be horizontally center aligned.
      2. It will very likely be cropped on the sides to accommodate the specified height of the area.
      3. There will very likely be under lap at the top and bottom (for the parallax effect).
      4. We honored Out of the Sandbox's recommended banner size of 1600 x 805px so we're always working with the optimal image size.

      In an effort to illustrate the display of your banner image on various devices, we made screenshots of three of the most common devices.

      Screenshots of the super imposed banner images on the Parallax theme by Out of the Sandbox for Shopify.

      1. For desktop sizes we chose the current most popular size of 1366 x 769px and then for the big screen users, we chose 1680 x 1080.
      2. For tablets we chose the iPad screen size at portrait and landscape.
      3. For mobile phones we chose the iPhone 6 screen size at portrait and landscape.

      We then super imposed the actual banner image over the screenshots in Photoshop and faded them a bit to see how they're placed. You can see below how the banners are positioned by the theme in each device's screen size.

      Note: the parallax effect does not take effect on a mobile device, hence most mobile views (portrait specifically) are full height.

      To make things even easier, we then extrapolated this information visually into a Photoshop template that we can now use to prepare our client store's banner images quickly and easily. There is also significantly improved predictability over where their content will be displayed.

      Parallax Banner Positions in the Out of the Sandbox theme.
      The image above shows all of the view-ports on at once. It's unlikely you'd ever want to see them like this though. We therefore made each device view-port a separate layer set that can be toggled to see how your banner will sit on that device and orientation as seen below.

      Toggling Layer Sets in Photoshop for the Parallax Shopify Theme by Out of the Sandbox

      To make things easier for other Shopify Experts and merchants alike, we've also decided to make this PSD banner template available for purchase.

      Buy this PSD template now for only $10

      Note: If you're an existing ShopCreatify client, please contact us for a free copy of this PSD.

      We'd love to hear what you think.

      Out of the Sandbox' Parallax Theme banner template in Photoshop PSD

      Since we do so many store setups and customization work on the amazing Parallax theme by Out of the Sandbox, we thought it wise to address one of our most frequently misunderstood aspects of the theme. How to make your banner images fit and work well.

      read time.

      Read More