Table of Contents
By default, Template 4 displays store listings in a three-column layout on large screens using the following classes:
<li class="pol-lg-4 pol-md-6 pol-sm-12 sl-item" data-id="{{:id}}" tabindex="0" accesskey="{{:id}}">
If you’d like to customize the number of columns, you can easily do this by modifying the Bootstrap column classes.
Steps to Customize: #
- Go to ASL Settings > Customizer.
- Select Template 4 from the dropdown.
- Click the “Load Template” button to load the template HTML.
- In the List Section, locate the
<li>element that looks like:
<li class="pol-lg-4 pol-md-6 pol-sm-12 sl-item" ...>
Replace the pol-lg-4 class to adjust the number of columns:
- Use
pol-lg-3for 4 columns - Use
pol-lg-6for 2 columns - Use
pol-lg-12for 1 column
Example (4-column layout):
<li class="pol-lg-3 pol-md-6 pol-sm-12 sl-item" ...>
- Click Save Template after making changes.
This allows you to tailor the grid layout to better fit your design preferences or available screen space.
