Pages Design Customizations

updated 1 yr ago

In this guide, you can read and learn about how to customize the design of your Pages, the different tabs for editing, and for the possibility to add more inputs than the default design template.

Design Customization

There are four tabs for the Design of the Pages:

Simple
JavaScript
HTML
CSS

Simple

The Simple tab is the most simple view of the design possibilities for Pages. By default, some input fields will always be present in which you can toggle them to fit your use case.

This includes:

Enable Views
Desktop Products Per Row
Container Max Width
Filter Position
Mobile Products Per Row

Inside the Simple tab, you have three options for the design:

General
Texts
Colors

JavaScript, HTML & CSS

If needed, it is also possible to do more customizations inside the JavaScript, HTML, and CSS tabs. After modifying the content inside any of these tabs, you can test it out and see what it looks like inside the Simple tab.

In the JavaScript tab, it is possible to customize more by either adding, removing, or adjusting some of the input fields. This depends on your use case and strategy.

The modifications could be used for things like alignment where the choices could be "left", "middle" or "right".

A choice field is a dropdown that can be customized with the field label, options, and default values.

The following example in JavaScript will generate a dropdown menu for a user-friendly UI:

/* choice("Left position", "Right ", "Top ") */ var filter_position = "Left position";

The liquid syntax for HTML is:

{# choice ("Left position", "Right", "Top") position = "Left position" #}

Note The fields that can be utilized in HTML and JavaScript are very specific. This means that you can only use the fields that are supported such as text, number, color, and choice fields.