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.

ERP development final cta

Get a Custom Solution with Web Design Sun

At Web Design Sun, we specialize in building web applications for clients in every business and industry.  If you’re interested in custom applications for your business, contact us today.

Contact us today to get started

More From Blog

How To Develop Widgets For Gutenberg Using ACF

Gutenberg is a new WordPress editor for posts and pages, built on the principles of builders, allows you to write custom page builder elements. Using the ACF plugin, you can very simply make a widget of any type. And here we'll show how.
1 May 2020 6 min read

How To Create And Manage Git Branches – Tutorial

A complete tutorial of Git Branches creation and parallel usage for a simultaneous and effective workflow at one project.
21 Nov 2017 9 min read

18 Ways Web Design Can Screw Up Your Business

When web design is not your friend, you may notice that your site has a higher bounce rate, doesn't convert well, or has low return traffic.
15 Jun 2018 14 min read