How to edit the AbanteCart page layout

While the design of your AbanteCart store’s pages is managed via general layout settings, you can create a custom layout for individual products, categories, manufacturers and content pages. In this article, we’ll show you how to edit the AbanteCart page layout.

How to create a custom product page

Using the admin sidebar, click Catalog > Products to view a list of your products.

Products page

Before editing a product’s page layout, it may be a good idea to work on a copy of the product record (called a clone in AbanteCart) instead of the original. To clone a product, simply select the Clone icon.

clone button

To edit the product page layout, select the Edit icon, then choose Page Layout.

The toolbar near the top of the page provides shortcuts to various customization tasks.

Toolbar

As we haven’t created any custom product page templates, all products are displayed with a default layout. Once a custom template has been saved, it will be available from the Template dropdown menu for easy application to existing and new products.

Template dropdown

Next to the Template menu, the Save and Reset buttons allow you to save changes to the template layout or revert to the original if desired.

You can use the Select to copy layout from dropdown menu to apply the layout from an alternative page quickly.

Select to copy layout from menu

You can apply changes to your layout immediately using the Apply button.

Apply button

How to manage the page layout

Page layout elements are configured in sections and blocks. You’ll see that the blocks are clustered under fixed sections. They are Header (the top of the page), Header Bottom (the lower section of the header, often used for lower-level navigation), Column Left, Column Right, Content Area, Content Top and Content Bottom (the main body of the page), then Footer Top and Footer Bottom (the lower section of the page).

Sections and blocks layout

How to enable and disable blocks and sections

Visible page sections and blocks are highlighted in blue, while disabled sections and blocks (not visible to the customer) are greyed out. Sections and blocks can be enabled or disabled using the power icon in the section header or block footer.

Power icon

How to add a block to a section

Add a new block to a section by clicking the Plus icon in the section header.

Plus icon

You’ll be presented with a list of blocks that can be inserted into the section.

Adding block to section

Click the checkbox next to the block you wish to add, and it will be inserted into the section.

Block added to page

Be sure to click Save to lock in the new layout. The page layout may have to be saved before the new block can be enabled.

How to move layout blocks

Blocks can be dragged and dropped within and between sections to change the layout. Simply left-click and hold a block, drag it to a new position, and release it to place it on the page.

Dragging blocks

Note: Sections are locked and cannot be moved around the page.

How to edit layout blocks

You can edit the HTML code of some layout blocks, but not all. Editable blocks have a Gear icon in their footer.

Gear icon

Click the Gear icon to open the block editing page, where you can change the name, title, and appearance of the block and its content. Some knowledge of basic HTML will be helpful if you wish to change the block content.

Edit block code

How to view information about a block

If you’d like to know more about a block, click the information icon in its footer.

Info icon

A range of detail is displayed, including the ID number, creation date, and a list of layouts where the block is used.

Block information

How to preview layout changes

Once you’ve changed the page layout, use the View button underneath the product image to preview your new design.

View button

How to save and reset custom layouts

When you change the page layout, you’ll notice that the page background turns orange, which means it must be saved.

Edited layout

Use the Save buttons near the top or at the bottom of the page to save the customized layout. You’ll see the page background revert to its standard colour.

If you decide you would like to revert to the default layout for your page, you’ll find a Reset button next to the save button.

Reset button

How to create a custom category page

Using the admin sidebar, click Catalog > Categories to view a list of your product categories.

Categories page

Before editing a category page layout, it’s a good idea to work on a copy of the record rather than the original. To clone a category, simply select the Clone icon.

clone button

To edit the category page layout, select the Edit icon and then choose Layout.

How to manage the category page layout

As we saw with product pages, category page layout elements are configured in sections and blocks. You’ll see that the blocks are clustered under fixed sections. They are Header (the top of the page), Header Bottom (the lower section of the header, often used for lower-level navigation), Column Left, Column Right, Content Area, Content Top, and Content Bottom (the main body of the page), then Footer Top and Footer Bottom (the lower section of the page).

Category page layout

Adding, enabling/disabling, editing, and moving blocks in category pages works the same as product page blocks. Refer to the instructions above to create your new layout.

How to create a custom manufacturers page

Using the admin sidebar, click Catalog > Manufacturers to view a list of your manufacturers.

Manufacturers page

Before editing a manufacturer page layout, it may be a good idea to work on a copy of the record rather than the original. To clone a manufacturer, simply select the Clone icon.

clone button

To edit the manufacturer page layout, select the Edit icon and then choose Layout.

How to manage the manufacturer page layout

Page layout elements are configured in sections and blocks. Blocks are clustered under fixed sections. They are Header (the top of the page), Header Bottom (the lower section of the header, often used for lower-level navigation), Column Left, Column Right, Content Area, Content Top and Content Bottom (the main body of the page), then Footer Top and Footer Bottom (the lower section of the page).

Manufacturer page layout

Adding, enabling/disabling, editing, and moving blocks in manufacturer pages works the same as working with product and category page blocks. Refer to the instructions above to create your new layout.

How to create a custom content page

Using the admin sidebar, click Design > Content to view a list of your content pages.

Content manager

To edit the content page layout, select the Edit icon.

Once the content page opens, select the Layout tab to continue.

Layout tab

How to manage the content page layout

Page layout elements are configured in sections and blocks. Blocks are clustered under fixed sections. They are Header (the top of the page), Header Bottom (the lower section of the header, often used for lower-level navigation), Column Left, Column Right, Content Area, Content Top and Content Bottom (the main body of the page), then Footer Top and Footer Bottom (the lower section of the page).

Content page layout

Adding, enabling/disabling, editing, and moving blocks in content pages works the same as working with product, category and manufacturer page blocks. Refer to the instructions above to create your new layout.

More information

For more information about AbanteCart, please visit their website or HostPapa’s Knowledge Base.

If you need help with your HostPapa account, please open a support ticket from your dashboard.

Related Articles