Pages Design Customizations

Pages Design Customizations

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". 

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" #}

Also, please note that 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.

Like Follow
  • 2 mths agoLast active
  • 36Views
  • 1 Following