How To Set Up Easily Customizable Landing Page On Shopify

How To Set Up Easily Customizable Landing Page On Shopify

28 Feb 2019 4 min read

Shopify is not only a good ecommerce platform but also a very convenient system that allows easily create custom settings in admin panel and create there any type of landing page and design you need and wherein easily customizable for a non-technical user.

It is a very good and easy platform to work at. There are a number of options in the Shopify that allow you to develop cool landing pages with very convenient customization.

So, all the action takes place in the Online Store where we create it all. Here we already have a theme, but to not to interrupt the main theme styles, it better to create a separate landing page template.


First, we press copy new layer, it copied the main theme where we actually included our landing page. Then we create a separate page where we connect the CSS styles (CSS are in assets -> landing CSS) connect the theme that we used and, accordingly, all the blocks of the landing page, which are located in the “Section”.


Let’s take a look at one of the blocks, for example, Product-Section. All sections have the same structure, that is, if you need to see what styles of settings for the current block, they always go at the very beginning, then goes the block itself with the output settings and so on for each block. At the bottom of each block, there is a schema, it records the settings that will be adjusted in the visual editor for the client.

It’s pretty easy, all you need is just to know how to set them up. And this is very clearly written by the Shopify help center – where the fields are set, which fields are set, which attributes can be set, which fields there are, etc.


And in the end, you do not need to invent anything, the main thing is to fill in everything correctly and we will have an elegant panel for editing.

You can create a lot of different settings, but also you can create rules for them.

For example, such a rule was set for one of the blocks, that if a picture is not specified, then nothing will appear. Or in the case when there are sections where we do not need a lot of elements, it will be convenient to limit the number of elements in the block, because the whole design will be shifted. In this case, you can create a convenient customization logic for the client, using which he cannot break or accidentally damage the design.


What is the beauty of such a development, the fact that there is an editor here that validates all actions and does not save if an error was made. The beauty of Shopify is that it limits the user but at the same time makes limits for a hardcode since there is an error handler that does not allow to save nonsense.

This article showed the most common layout with a slice of settings that Shopify provides for development. This is a standard feature in the development at Shopify. It is convenient to use and does not require any additional plug-ins and add-ons.

More From Blog

Mobile-First Design Principles

As web developers, we’ve been ready for the move to mobile-first design. Over the past years, we have shifted our design methodologies and development strategies to take the needs of mobile users into account.
20 May 2021 22 min read

Mobile-First Indexing in 2021: A Complete Guide

Mobile-first indexing refers to Google’s new approach to indexing and ranking content on mobile sites.
22 Mar 2021 18 min read

How to speed up your WP website

There are surely tonnes of other tips. But we concentrated on the key points that will definitely help to speed up your WordPress site.
20 Dec 2017 9 min read