How to Design Your Shopify Website

Today I am going to discuss two different approaches to designing a website using Shopify.  The first approach is using the “clicks not code” approach for people that are more comfortable working in Shopify’s user interface.  The second and more programmatic approach is using the “code not clicks” method of developing a site using Shopify.

Once you’ve finished signing up for the free trial of Shopify and you are logged into your Shopify website you are going to want to see how you can design your Shopify website.  The first approach to develop a Shopify website is to take the “clicks not code” method of website development.  This approach should help those of you looking to for an easy way to setup a Shopify website by clicking and selecting options in the Shopify back-end.  No additional coding required.  The first thing that you need to do after logging into your Shopify website is go to Themes | Theme Settings which will give you open access to make changes to your Shopify website.

There are a number of settings that you can setup for your Shopify Theme by default including General site options, colours, fonts, buttons, and styling for a number of areas including…

  • Page Background
  • Header
  • Homepage and Homepage Carousel
  • Right Column
  • Product Grids
  • Product Page
  • Cart Page
  • Blog
  • Footer
  • Additional Layouts
Depending on what you want to modify on your Shopify website you are going to find that the user interface highly useable as shown in the following screenshot.
As you can see there are a lot of ways in which you can customize your site without any coding at all.  The next option for getting your Shopify site customized is to use the “Code Not Clicks” option to really dig into the code behind Shopify to begin to understand how you can extend Shopify for your own needs.  This is not for the “faint of heart” because it requires coding knowledge but if you are comfortable you can definitely being to customize your Shopify site in virtually no time at all.  In order to get to the Shopify templates that run your website go to Themes | Template Editor.

The Template Editor in Shopify allows you to do a number of things including editing and developing Layouts and Templates to run your Shopify site, access the variable reference guide that allows you to understand how to code your Shopify site.  Shopify uses a language called “liquid” which is a mark-up language that the Shopify team developed to customize and code Shopify pages and templates quickly and easily.

Leave a Reply

Your email address will not be published. Required fields are marked *

This blog is kept spam free by WP-SpamFree.