There are a few ways to change your Shopify layout. You can either use the drag-and-drop editor in the Theme customization area of your Shopify admin, or you can edit your theme’s code directly.
If you want to make changes to your theme’s code, you’ll need to create a new file called .liquid in your theme. This file controls the overall layout of your shop’s pages. To learn more about editing code, check out our guide on working with themes.
Once you’ve created your .liquid file, you can start making changes to your shop’s layout. For example, let’s say you want to add a sidebar to your shop’s home page. You would add the following code to your .liquid file:
{% include ‘sidebar’ %}
PRO TIP: If you are considering changing your Shopify layout, be aware that this could negatively impact your store’s performance. In particular, your conversion rate could drop if you make significant changes to your store’s design. Before making any changes, we recommend that you consult with a Shopify Expert to get their professional opinion on whether or not changing your layout is a good idea for your business.
{{ content_for_layout }}
In the code above, we’ve added a sidebar to the home page by including the sidebar.liquid file in our .liquid file. We’ve also added a CSS file that contains styles for our sidebar.
Now let’s say you want to change the order of the elements on your home page. You can do this by changing the order of the HTML elements in your .liquid file:
{{ content_for_layout }}
{% include ‘sidebar’ %}
Dale Leydon
Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.
