Update – 2023: Most of these things have been fixed in newer (2.0+) versions of Shopify. Including the newer theme edtior that allows creating modular sections and blocks with visually editable fields.
After developing my first theme using Shopify, I’ve found that it is not all it’s cracked up to be. There are major flaws and missing features that limit what can be done by the web developer and designer. This was a little disappointing to me, because the Shopify e-commerce platform appeared at first glance to be a beacon of current web standards and modern development, amidst other lumbering options filled with outdated code for the front-end developer.
I found myself doing many Google searches, which would turn up a Shopify thread from 2009 or so, that was labeled as closed/outdated, while the issue still persists now in 2013. It felt like there was a roadblock at every other corner. As Shopify has just migrated to version 2.0 with some major updates across the board (including a new interface), a few things have been resolved, such as setting meta descriptions.
In the end, after some head-scratching and a few workarounds, the theme got built and is now working well. There are a few features that are not easy for the client to modify because of some of the things listed below. In my case, it was a fairly small site, and I can see how larger stores may be limited or require additional plugin development.
No Custom Fields or Ability to Use Shortcodes!
This is a big one. Being used to developing with WordPress (and also the “Advanced Custom Fields” plugin), I was surprised to find no built-in way to add custom fields to pages and blogs, and the number of available fields limited. The pages and blog sections are incredibly simple and I worry about people trying to build a robust site, outside of their product section.
For example, I needed another image field for our blog section for a featured post section with a different style; luckily in our case, I was able to take over the excerpt field for this purpose. But if we were using the excerpt, I would have no where to put it. There is no “Featured Image” like WordPress has, and there are no other available fields. Update: Shopify has added a featured image to the blogs.
Shortcodes?
Being able to create shortcodes for use in the text editor is needed badly. One cannot rely on a client to know HTML in order to modify some necessary DIVs. Knowing this, I tried to create my own shortcodes using a manual find/replace, but the editor created so much junk code (empty tags and such), that there were just too many variations for it to be possible.
3rd-Party Plugins?
There is a free 3rd-party plugin available called “MetaFields Editor” that I tried out. It’s a bandaid solution if you need extra text fields. It’s not too user-friendly and doesn’t have image/files/etc. There are confusing options like “namespace, key, value, value type” for each field, and like in other Shopify apps, you are taken outside of your pages to a separate interface.
Example of Some Possible Workarounds
- For our products, we needed to be able to set a custom full-width background image. I ended up uploading images with the same slug name (or ID could be used), that are then loaded with JavaScript.
- We wanted to use a different image for the listing of products on our collection pages. This was accomplished by using the first image for that purpose, and skipping the first image in the loop on the product pages.
{% for image in product.images offset:1 %} <img alt="{{image.alt}}" src="{{ image | product_img_url: 'medium'}}" /> {% endfor %}
Missing Basic SEO Options – A Little Better in Shopify 2.0
Editing your meta descriptions used to require a 3rd-party plugin (Meta Tagger or SEO Meta Manager). Now that you can activity Shopify 2.0 (still in Beta), you can set the title tags and meta descriptions for all your pages, collections, and blogs. Here’s how you include them in your template:
{% if page_description %}<meta name="description" content="{{ page_description }}" />
{% endif %}
The title tag and meta description fields should be improved by adding a maximum character counter. Otherwise we have to write tags outside of Shopify, or copy and paste them to check manually each time. This feature can be seen in action in the SEO Meta Manager, WP Yoast Plugin, and WP SEO All in One. They also have a nice preview of what your tags will look like in Google.
Update 2015: Shopify has added a maximum character counter. Nice!
Some Other Important SEO Gotchas:
- No checkbox to exclude a page or blog from being indexed (NOINDEX), or followed (NOFOLLOW).
- Can’t edit the automatically generated robots.txt
- Blog URLs are a bit excessive, but bearable. You are stuck with the ID number at the beginning, in addition to the slug. If you have one blog, you also have an extra “directory” in the URL because you have to name your blog. For example: mydomainname.com/blogs/blogname/123456-slug-name-here
I noticed that blog posts can be indexed and accessed as multiple URLs if you changed the blog post title, though they rightly use the canonical tag to avoid duplicate content issues, so this is mostly a good thing (though I wish it redirected).
Uploaded Files Can’t be Organized into Folders
This is the strangest thing that you will first encounter. Everything that you upload is lumped into one giant Assets folder. This includes the images, JavaScript, CSS, etc. For a small site, this is manageable, but could quickly become annoying. I never thought I’d need to request the ability to create folders. I’m assuming it’s a limitation of the CDN, but I hope this can happen eventually. It gives us organization freaks a little twitch.
Files are served up via a CDN, and you can’t reference them without using liquid to generate the asset_url. For files that you need to use a static URL for, they can be uploaded separately via Settings -> Files. Since as of writing this, I can’t upload SVGs via the visual editor, I had to upload duplicate copies of the same file via this files section (I am putting in a support request to allow that).
More Stuff
Limited Visual Editor
The visual editor could use some enhancements. It also seems to leave a lot of weird stray HTML / empty tags after some editing, making your own custom parsing of the content a bit difficult. If you remove bold from an item, you’ll still have extra span tags in there with font-style:normal.
You can’t:
- Insert, view, or edit named anchors (jump-to links) – If you painstakingly put them in with HTML, someone editing in Visual view can easily remove them all without knowing, and has no way to re-link them unless they know HTML
- Outdent or indent lists
- Underline, strikethrough, super-text (sup), or sub-text (sub)
- Insert custom character or HR
Cannot Modify the Checkout Template / Customer Login Template
You only have access to modifying the CSS for the checkout sections and customer login template. If you want these sections to match your brand exactly, you’ll need to use some really creative CSS and maybe some :before/:after pseudo-elements. I wish I had more direct control.
Can’t Change the Date on Blogs – Fixed in Shopify 2.0
You previously could not change the date on blogs, and had to run an API command. There now is a nice date picker.
Can’t Use Ordinals in Post Dates.
The blog post reads “Posted on January 02, 2013” and I can’t make it read “Posted on January 2nd, 2013” without extra JavaScript. Just give us the full PHP date() options please! It seems silly to have to write custom JS to reformat a date.
Some Fields Missing from Liquid
For example, the product dimensions can be entered from the admin screen. Yet this is strangely missing from the list of liquid variables you can display, so you have to end up putting the dimensions in the descriptions anyway (confirmed through support; at first I thought this just wasn’t documented).
On the Positive Side, In Closing
While this is mostly a critical look at what’s left me shaking my head or pulling my hair out, there are a few good parts worth mentioning. The first is using the Liquid language for your JavaScript and CSS files. Shopify allows you to rename any file to have .liquid at the end, which then parses that file before it is displayed. This lets you provide theme options in an easier manner than your typical CMS. There are many possibilities such as:
- Making the millisecond speeds in your JavaScript animations available to edit, or
- Putting liquid variables in any of your CSS properties, like colors
Having the PCI compliance side taken care of (Shopify is a hosted solution) is wonderful as well. Worrying about security, SSL certificates, and payment gateway API integration is no fun.
I hope Shopify makes some updates soon which address some of the more major issues here, particularly the ability to have more available fields for pages. Without them, there are less possibilities for customization. The SEO options are also really important for every business, and the SEO companies they may be working with. If anyone from Shopify is reading this; take a look at the interface for the “Advanced Custom Fields” for WordPress; its interface could not be more accessible and painless. The Yoast SEO WP plugin is also top-notch when it comes to SEO options.
Will I use Shopify again? Probably. I assume these are growing pains that will be worked out eventually; hopefully sooner rather than later. I will definitely be looking at other e-commerce offerings, to find out what is the most developer-friendly.
![CSS Secrets [Book Cover]](/wp-content/uploads/2020/03/css_secrets_book_cover.jpg)
![Eloquent JavaScript [Book Cover]](/wp-content/uploads/2020/03/eloquent_javascript_book_cover_b.jpg)
![The Phoenix Project [Book Cover]](/wp-content/uploads/2020/03/phoenix_project_book_cover.jpg)
Hey Josh!
I’m Mark Dunkley from Shopify, I’m one of the product managers that specializes in themes. First off I’m glad to hear you got your theme working in the end! And really appreciate the time you took for writing this article up.
*Custom fields*
Great feedback. This is something I’ve been wanting personally for a long time ever since I saw ExpressionEngine do it.
If we let themes dictate custom fields then we run into issues with merchants that want to change themes. Alternatively we could add the option to add custom fields on the product page, but then we have 2 problems:
1) It’s making the product page even more complex/intimidating to use
2) Our merchants that don’t have a web designer working with them will have to add the html to show the custom field manually. 50,000 customers editing their themes for the first time will be a support nightmare.
Again, I’d love this functionality and it’s just a matter of finding a solution that doesn’t complicate the UI or rely on merchants to edit HTML of themes.
*Shortcodes*
Could you use a snippet? You can also pass in variables.
*SEO*
Some of the things like robots.txt and blog urls are a littler challenging because of the way out databases are set up to control our customers’ stores.
Those annoying article IDs make it faster for the Shopify DB to pull your blog articles instead of using their handle. We have some leg work to do here and thanks for pointing it out.
*Uploaded files*
Thanks for submitting a support request for the SVG. I’m not 100% behind the reason why we don’t have file structures allowed in images. I’ll look into that, but it will make our interfaces more complex because we have tree/root style directories and most themes don’t have more than 20-30 assets because they use the built in CDN file uploader in their store’s settings area.
*Visual Editor (RTE/WYSIWYG)*
This one is tricky to nail. It’s really difficult because the way browsers interpret HTML. Each browser is inconsistent when you tell it to generate HTML, that’s why you might get some weird edge cases. When you tell IE to generate a new line it uses , when you tell webkit to generate a new line it uses (I could be wrong on the specifics of that example, but you get the idea)
– Insert, view or edit anchor links: Hmmm….this works for me fine is OSX Chrome. Just click the link button and it will let me edit the link regardless if it was added with the visual editor or not. Let me play around and see if I can reproduce it.
– Outdent/indent: Can you get away with using CSS? I’m trying to think of a common use case where you would want both outdented lists and indented list
– Underline, strikethrough, super-text (sup), sub-text (sub), insert custom character or HR: We don’t get a lot of requests for these guys. Strikethrough I can see as being the most useful, but I’m worried about our newer merchants thinking underlining plain text is a good idea. Again we try and make Shopify as simple and straight forward as possible and these formatting features aren’t that useful for 99% of our stores.
*Cannot Modify the Checkout Template / Customer Login Template*
We don’t let you edit admin/auth/login because we need to be able to push changes to that (ex: log in with Google auth)
The reason we don’t let you edit the checkout is because of PCI compliance. If we let you inject JS or edit the HTML we run the risk of losing Shopify’s certificate of PCI compliance which payment gateways require.
Out of all the pain points you mentioned checkout is the one getting the most attention right now internally.
*Can’t Use Ordinals in Post Dates*
Yep, this is a gap in liquid. Thanks for pointing this out and sorry that you had to make a js work around to make it work.
*Some Fields Missing from Liquid*
Great find, dimensions is a newer feature and this was an oversight by us. I’d really appreciate if you could mention anymore gaps in liquid.
Thanks again for taking the time to write this up Josh! I’ll keep your feedback in mind when we’re developing the roadmap.
Hello Mark. Thanks for posting a reply addressing these issues so quickly! It’s good to know that you folks are on top of this.
Custom Fields- I can see how this would cause some major support issues on the display side for people changing themes, and if theme sellers start using them. I look forward to seeing this some day, in whatever form it might take. Even a few generic fields/textboxes would be better than none.
Shortcodes – This would be useful as a standard feature of Shopify, like adding a shortcode in WP. What do you mean about snippets and passing in variables? AFAIK I could not see any way to use variables inside of the content’s text editor? Say you have a left and right column that need to be editable, or a re-usable button style that has certain HTML.
Anchors (e.g. #whatever) – In TinyMCE for example, you can insert an anchor and an icon will be displayed. You can also link to an existing list of anchors. In the Shopify editor, there’s no easy way to insert or edit anchors without going into the HTML, and if the client edits text, they’ll usually get deleted (I’ve had to re-do our FAQ page 5 or 6 times)
Checkout – I understand the PCI compliance issue and how easily someone could accidentally mess it up; I don’t have that much of a problem with the checkout since it’s clean and simple. Having control over a limited set of elements and possibly some optional templates could be an area to explore.
On a related note; can we get a different template name for the account login page, and the first checkout page that lets you choose Guest or Login page? Both have the same body class (.customers/login) and container ID (#customer). We wanted to add a different style for one to clarify something for the user, but I can’t target them separately.
Thanks.
The lack of custom fields is my biggest headache right now.
I’m not sure why merchants would need to change their theme often or at all. But let’s say they do. So what happens when one theme supports a slideshow and the other doesn’t. If they switch themes, they lose the slideshow. All themes will never be exactly the same. If they need that feature on both, they need to either choose another theme or customize them accordingly.
Seems like products-settings.html, my-custom-template-settings.html, etc. would be the logical place to specify custom fields.
It would also be nice to have the functionality of link lists in the settings.html files. It’s really silly that I have to pre-determine the amount of images that a slideshow (for example) will contain. We need an Add Entry (in this case, Add Image) button and then options per Entry.
Yeah I have to agree with the custom fields one too. I actually am more about the custom fields on pages and posts more than products. I have clients posting infographics and videos and would just like to make it simpler for them and prevent them from breaking themes.
I’m just discovering all these issues myself. The worst one being no staging area / easy way to build templates locally or against a mock Shopify api.
With regards to shortcodes, could a bodge for the meantime be utilising `contains` and `replace` liquid filters against the ugc? Could get ugly though
Here we go…
{% capture x %}{% include 'my_shortcode' %}{% endcapture %} {{ page.content | replace: '[shortcode]', x }}just wait until you try to build out a complex navigation system for a shop with lots of merchandise, Shopify does not have the ability to refine searches due to the tree structure..
I wrote a quick JavaScript tool that can help with metafield editing. Whilst it doesn’t create custom fields it can make the process of editing metafields a little more seamless.
Shameless plug link to follow:
http://shopify.freakdesign.com.au/
Looks good; does it work for pages and blogs, or just products?
Just rediscovered this post! Things have come a long way since then. The tool can edit metafields on all resources, so Shop, Products, Collections, Customers. Pages, etc. There’s also a Custom Fields extension as well.
So today I took on the task of creating a Shopify store theme for a client. I spent half my day trying to figure out how to set up my local environment and realized it is not possible.
I absolutely can’t believe there is no way (other than the unsupported Vision env) to do this. So now I have to have an internet connection and files are automatically uploaded when I save them? I feel like I’m back in the 90s using an FTP and no version control.
This will be the first and last Shopify theme that I touch. Unfortunate.
Yeah I was surprised at that as well. You can set up a dev shop for testing, and they do have “older versions” saved when the templates are edited online, that allows you to revert changes. The online editor itself is a bit slow and temperamental. It’ll be interesting to see how the process is going to work for an upcoming redesign I’ll be developing..
We are having a major issue with the SEO end of things. For some reason none of our pages are getting indexed by google. We were informed that It is because of the robot.txt
I ve also noticed that 100s of pages, descriptions. meta tags duplicated
Shopify told us that there are few options but none of them seem to work. We have a really good link juice and quite many high PR backlinks but because of this problem we are unable to take advantage
The robots.txt is generated automatically by Shopify, and is the same one that all the other site use and get indexed. I don’t see anything it in that would stop your site from being indexed by Google (the site in your email address; I’m assuming it’s this one). When I search your site it appears to be indexed. Do a google search starting with “site:” and the name of your site, and it gives 1220 results. Also, any sort of crawl/index error would be displayed in your webmaster tools account. As for duplicate descriptions and title tags, that is up to you to write them for each page and product. Shopify now has the ability to do this, though your theme currently appears to be using the add-on SEO Meta Manager.
While they still need an option to not index a page, all pages should be indexed and can have titles and meta descriptions set. If you’re not being ranked highly, then that likely has to do with other factors such as your on-page content, quality of inbound links, etc.
can i create feature image in admin section of blog…
please give me valuable answer..
It’s not built into the admin yet, but please put in another feature request to Shopify, and maybe they’ll add it eventually. You can use the excerpt area. Or, if your design and HTML do not work for that (or you need 2 images..), one workaround I had to use was creating an image with the ID of the blog post: https://gist.github.com/jawinn/338cf1de71c99f0bd5bd
Good article. I am just getting my feet wet with shopify/liquid. On the shortcode front, there is a conversation here: [ https://ecommerce.shopify.com/c/shopify-discussion/t/shopify-shortcodes-185085%5D ) that led me here [ https://github.com/Carted/shopify-shortcodes ]. This is working for me now, though I had to modify to make page content without shortcodes appear if there were not any shortcodes in my page content. I’m new to GitHub and not sure how to contact the original authors and request they merge my changes, or whatever. Not sure I understand where the conversation here is on custom fields and featured image, but those are a big deal for me. I have a client who wants to really use blog and I’m planning to do some parsing for first or in post content so I can show the latest post with media on the homepage. if anyone has suggestions, would love to hear them! Thanks Josh and others.
Thank you for this article, very helpful – I’m learning a lot about what is possible with Shopify.
Great article throwing a light on all the pros and cons on developing a shopify theme.
Thanks
Shaily, GoWebBaby
This is a great article, when we were building out a custom Shopify theme, the lack of shortcodes was a really big issue for us, so we recently released a plugin called ProCodes which allows developers to easily create any shortcode necessary for styling/functionality (in pages, articles and products) directly in the admin, it’s currently in beta, but we’ve received really good feedback so far, here’s a youtube video to see how it works: https://www.youtube.com/watch?v=wfkfbQSHrck
We just released a custom fields app yesterday that is a direct answer to a bunch of your complaints. You can now add structured fields, product references, HTML fields, and so on. Check it out, I’d love to hear your thoughts and feedback. https://apps.shopify.com/custom-fields-2
We had been using Custom Fields (largely with Shopify FD) for about a year, when we switched over to shortcodes. We were than able to produce significantly improved content models, but our clients were confused by shortcodes, and management of the content became a limitation. We applied similar functionality to a custom private app, that allowed for drag and drop content placement on any page, post, collection, or product. Today Advanced ThemeBuilder has gone live, and is being run by a handful of stores that are producing amazing content.