The sound foundation of any developed code determines the success of the project. Any code builds adhering to strict software engineering techniques, determine how robust and portable a project is going to turn out in the future.
WebBee Global is an authorized Shopify partner for Shopify website, apps and theme development. Our vision is to build the business-specific custom Shopify apps and themes.
On the basis of our sheer exploration of the knowledge and enrich project-based experiences in practice, we would like to share profound tips for developing potent eCommerce Shopify application development and theme generation.
Tips #1 : Manage your work with version control management
WebBee stores code in an organized way providing the history of all the code base whenever required, preventing the lost work. Our developers handle changes that happened through online Shopify’s editor, managing themes, features, branches, and multiple developers. Reducing the complexity of the project and producing the business-specific work is the main agenda for the Shopify custom development.
One must practice keeping the master branch ready, only then merge the separate features after its completion. If ever you need to fix some incomplete features or bugs then timely measure can be taken. We usually work under an unpublished theme to keep the changes hidden and intact while development.
In case amendments are being made (e.g. an app developer) within the online theme editor, then ensure to make a note of the changes, incorporating them into your respective file after the alterations have been executed. It’s mandatory to check and validate every piece of code.
Not doing so will not be able to attain the purpose, as those changes will get overwritten eventually. Ensure to merge the changes in the correct order, that implies knowing what commit you need to merge into. Practically, every theme alterations are checked into the report before going off to the store. The main idea here is that your report always manages your code, not themes.
Tips #2: Building Shopify Theme Locally
As Shopify is hosted in the cloud, you just cannot work locally, creating a local instance of the software. Rather, upload theme files and observe made changes on an online Shopify store.
Monitoring files and themes are the main focus for better decision making, hence the Shopify theme gem allows vigilant monitoring where you can actively watch a directory and automatically uploaded files to the respective theme as files are saved. GUI version of the same also performs the same thing. You can find the setup instructions, explore the theme kit.
You are also allowed to use your own text editor and related development tools to work, like any other project. You can execute and perform all your development within admin theme editor, ensuring no overwritten of the previous work.
For the small level projects when you are not the main developer for the site, and changes are few, then, using the online editor is a better option. Editing online implies having no issues regarding overwriting a file which is out of sync with your local amendments.
Tips #3: Perform Sass and JavaScript compiling using Grunt
With big projects, it is important to structure CSS and JavaScript. We objectively use Sass for compiling all our CSS. Shopify equipped with the Sass parser, usually prefer to perform compiling locally with Grunt and Compass.
Down below is the theme report to get you started.
Sass can be compiled via the number of ways. Grunt allows wrapping all the Sass file in a single directory, breaking CSS file into byte size chunks.
You can compile Sass in a number of ways. Since we’re using Grunt for other tasks, wrapping the Sass compiling here makes for one less step. To accomplish this, we create a folder within the root directory of our theme called ‘sass,’ which contains an organized structure of folders and files. Note that this folder won’t get uploaded to the store’s theme.
Such approach for JavaScript when applied, it reduces the amount of JavaScript files at the page load, keeping every thing intact.
It is preferred to assign Liquid values to JavaScript and perform your logic directly in JavaScript.
Tips #4: Be aware when to use JavaScript instead of Liquid
It’s imperative to make a note that Liquid was not designed to be a programming language. Its main objective was to produce the data you are currently working with, creating markup. Though it’s generally preferred to execute logic in Liquid, it’s sometimes clear to hand the data off to the JavaScript.
In case you get stuck in the nested “for” loops, endless string appends, or want to write Liquid methods, then it’s time to consider JavaScript to perform and execute heavy lifting. Many time, you simply dump out the data you’re seeking into a JavaScript object and work with it there. For instance:
<script>
Shopify.currentProduct = {{ product | json }};
if (Shopify.currentProduct) {
console.log(Shopify.currentProduct.variants);
}
</script>
Remember, the effective code is always manageable. Hence avoid a mess of curly braces and lengthy coding. Trust on JavaScript machine and perform the execution.
Tip #5: Perform abstraction where ever and whenever possible
Whenever themes for the clients are built, ensure they must be the primary users of the store. You must abstract features of the site when ever and where ever possible. Hence, to avert the hard code settings into the theme. Also, as a rule of thumb theme shouldn’t store data.
For example, leverage the theme editor (schema), locales, meta fields, or Relatable to control content, like text or images. The outcome is your clients can manage without the need of the theme edit for simple updates.
Tip #6: Care about load times and performance
For the quick site performance of the checks, use Google Chrome Developer Tools to track the bottlenecks within the themes.
JavaScript, Images, and CSS compression tend to be the most preferred, also, the intense Liquid and JavaScript computation, avert rendering content on the page that is primarily hidden.
Tip #7: Make good use of snippets
Liquid snippets are one of the best approaches for breaking up logic into separate files. It is best to imbibe a long list of snippet files in comparison to the markup. (As this is difficult to understand.)
Snippets offer an approach to organize content logically in a structured way, such that the markup can easily be followed averting excessive repetitions. Whenever a section of markup in multiple files are reused then snippets are used. Kindly note that snippets inherit variables declared from where it was included. Our developers break the liquid file themes as follows:
<html>
<head>
{{ content_for_header }}
{% include ‘head’ %}
</head>
<body>
{% include ‘header’ %}
<main id=”main”>
{{ content_for_layout }}
</main>
{% include ‘footer’ %}
</body>
</html>
Tip #8: Building your own JSON endpoints for dynamic data
The template is usually used, whenever, you wish to do something different. Every Liquid templates are allowed to be suffixed with a unique view, used for a specific purpose. For example, in case you have set of product pages, then you can create a template like product.unique.liquid, select respective template within the Shopify admin.
You are also allowed to pass in the name of the template in the “view” parameter in the URL to direct Shopify to use a specific template.
Shown below the use of the auto complete searching as an example. You can create templates/search.json.liquid as a template, and develop the JSON response within the file.
{% layout none %}
{% paginate search.results by 50 %}
{
“results”: {{ search.results | json }}
}
{% endpaginate %}
Then in JavaScript::
$.getJSON(‘/search?q=shirt&view=json’, function(response) {
console.log(response)
});
Please note that in the given code below the search the “view” parameter has been passed, which is set to our template suffix named “JSON” such type of applicability opens the door to a lot of opportunity for developing dynamic features.
This method is used all the time alongside Relatable for using JavaScript to empower the custom logic within shops. Note, this is applicable on any template, which implies you can perform similar approach for the customer data: {% layout none %}
{
“first_name”: “{{customer.first_name}}”,
“last_name”: “{{customer.last_name}}”,
“email”: “{{customer.email}}”,
“id”: {{customer.id}},
“name”: “{{customer.name}}”,
“orders_count”: {{customer.orders_count}}
}
This produces a nicely formatted JSON document:
Conclusion
We hope these points are going to be a value added suggestion for the Shopify development, irrespective of whether they are seasoned programmer or beginners. We are sure these tips will enhance customer-centric robust flexible coding. It is vital to have clear scope analysis about the project and its requirements. As every project is unique hence its deliverable need to be clearly defined and understood before given a shape through coding.
