Customize Vision Database

From Shopify Wiki

Jump to: navigation, search

Vision is a very handy tool when creating a Shopify site. It comes with a database of products and collections, menus and pages that provide a backdrop for designers to provide the 'look' for their store. Since no two stores are identical (or at least should not be), and since some stores will try and push the boundaries of design and functionality, it can be useful to provide a database for Vision that more accurately reflects the designers vision.

It is probable that there exists a small percentage of Shopify designers who work on their stores using the store admin template editing faculties, due either to their inablity to grasp how Vision can help them, or quite possibly due to the fact that they cannot work with the existing inventory. Therefore, providing a custom inventory can perhaps make Vision a more attractive option for this community. For those who are comfortable with Vision, this can also be of benefit since they can also tweak the underlying options more to their needs.

Vision Database Basics

Like any Ruby on Rails application, Vision contains a db/ directory where the database can be found. In this case the file of interest is *database.yml*. Open up this file in a text editor with YAML syntax highlighting if you have one, or any decent text editor and examine the file. At this point if you have no idea what YAML is, perhaps a little explanation is in order for that. YAML syntax and files are used with the dynamic scripting language Ruby for storing serialized objects. In plain english, YAML files like database.yml contain data that can be used by a Ruby program to read/write objects or things, like a *Product* for example. Vision reads database.yml and turns the data in the file into menu options, products, variants, and collections. So, if we make changes to this file, we change how Vision looks when we design a site and change the liquid templates.

It is important to note that *yml* files like database.yml are formatted in a very strict and fussy way. You cannot insert spaces and tab characters willy nilly and expect great things to happen. In fact, that is a surefire recipe for disaster, which is why we will make it clear that you should *ALWAYS* make a back up of your file somewhere where you cannot lose a correctly formatted version of your file. If you have not yet used Subversion or another versioning system, it is probably a good idea to spend a few minutes learning how to use one. A few clicks of the mouse and you'll never lose edits on a file. Typically, yml files use two (2) spaces to indent options. The # character signifies a comment.

It turns out that to really make the most of customizing Vision for your site development needs, it will also be necessary to modify the Vision Ruby code itself. This is because there are some hard-coded links that go along with the current database. If for example you know that you have your own special Blog that needs to be tested, and you want some liquid code that accesses your blog... you will have to not only insert your blog into the database file, but, also change the hard coded links in the Ruby code. It is not too hard to do.

If for example you change the blog in the yml file to be foobar instead of cheeseburger, you'll find that when you select the blog page from the Vision page selection drop-down, it still jumps to the blog cheeseburger. This is not really too big of a deal, but it would be nice if that hard-coded selection were more configurable, from say another yml file.

In customizing vision products, it is also necessary to create your own images, and then load them into the public/images directory, and ensure you have prepared all the sizes that Shopify uses... like 50x50, 100x100 etc.. so that you can see your own product images, and play with sizes. Again, a minor irritant but there really is no easy way around this step as there is no back end support. It would be pretty easy to make an extension that handles simple image uploads with resizing into the Vision image directory.

My advice is to use Vision to learn as much as you can about Shopify, and then just move on to testing using your own live test site. Once you have mastered basic Shopify skills and progress beyond a very basic site... Vision is not going to help you much without really extending it, something most folks will be unable to do without some programming experience.

External links

Personal tools