6 min read
Create custom pages
Standards pages
When you start your shop, these six standard pages are created. These pages cannot be removed, but some can be hidden if desired.
The following are Abicart's standard pages:
Extra prices - A page that automatically displays all products that have an extra price.
News - A page that automatically displays all products that are marked as news.
Terms & Info - A page where you specify the store's terms of use.Note! Some payment methods require this page to be active for the payment methods to work. It must not be hidden.
Page not found (also called 404 page) - A page that you get to if you have browsed to an old page that no longer exists. There is a standard text with information on the page that can be adapted to your needs.
Search page - If the customer uses the store's search function, they will be taken to this page.
Contact form - A page containing a contact form where customers can easily contact the store. There are five predefined fields, "Your name", "Your email address", "Your phone number (optional)", "Case" and "Message".
How do I create my own page?
Go to Own pages -> New page. At the top you will see a field with two properties, Page Name and Hide.
Page Name - Here you enter the name of the page. In our example, we call the page "About the shop".
Hide Page - Here you select whether the page should be hidden or not. Check to hide the page.
Insert content on the page
Under the field there is a new heading called "Add here" and to the right of it there are five buttons:
Product Group Table - A showcase that displays product groups (categories).
Product List - A display window that shows products in a list.
Product Table - A display window that shows products in a table.
Full Width Product - A display window showing a product.
Optional text/image - A shop window where you can insert texts, images, embed videos (YouTube) etc.
Please note that if you create a table and/or insert an image in "Optional text/image", you need to be careful about how the width of these items is specified. If you specify fixed pixel dimensions, the page may be too wide and will not be responsive. Visitors may need to scroll sideways on smaller screens. Further down in the article there are instructions on how to make images and tables responsive.
F.A.Q. - Frequently asked questions and answers
Q: I created my own page, but it doesn't show up in the store?
S: Own pages do not automatically appear in the menu, you have to add a link to the page in the theme. See the "Linking to a custom page" section in the manual.
Q: I have created a custom page but it is too wide on mobiles, visitors have to scroll sideways to see the whole page. Why?
S: Probably there is an image or a script where there are fixed specified pixel measurements as width. In images, you should remove the HTML code completely for width and height. In tables and scripts, you need to change the width to 100% instead to specify a fixed dimension.
Examples
Images
Above the large text box found in "Optional text/image" is a toolbar containing two rows of icons. Click on the icon on the far right of the top row, which looks like this:<>
You will then see the HTML code and it should look something like this:
It's the "width" and "height" code that you need to remove to make the page responsive again.
When the code is correctly corrected, it looks something like this:
Save.
Tables / script
A table and script look a bit different but there is usually always a width and height included in the code. Here is an example of a table that has four columns and three rows:
If we take a look at the code (click on the icon in the toolbar, on the far right of the top line which looks like this: <>):
We then see that on the top row, the entire width of the table is set to 1500 px. Then each column also has a fixed value of 250 px. We need to change this to percentage values so that the table is responsive.
In this example, it's pretty simple. We change the width to 100% and then it will cover the entire center bar of the store. Then we have to do some math in our heads and figure out what 100 / 4 is. The answer is 25 and then we need to set 25% as the width of all four columns.
We adjust the code and, then it will look something like this when we're done:
Don't forget to save. Now this table is responsive and will fit on all screens, even the small ones.
Search engine optimisation of your own content
Search engine optimisation is about improving a website to increase its visibility in search engine results. This means making the site easy to navigate, load quickly and contain relevant and unique content. By following good search engine optimisation practices, a website can become more visible to search engines and thus increase its chances of being found by users.
Using semantically correct HTML is an important part of search engine optimisation because it helps search engines understand the content of a website and its relevance to different keywords. Here are some tips for using HTML tags such as title, h1, h2 and other semantically correct tags to improve your website:
Use the title tag to give your website a unique and descriptive title. This title will appear in the search results and should be short and relevant to the content of your website.
Use the h1 tag to highlight your site's main heading. This heading should be clear and relevant to the content of your website and is often used by search engines as an indication of what the website is about.
Use h2 tags to highlight smaller headings on your site, such as subheadings or subheadings. These headings should also be clear and relevant to the content of your site.
Use other semantically correct HTML tags such as p, ul, ol, li and strong to mark different types of content on your site. These tags help search engines understand the structure and meaning of the content on your site.
By using these HTML tags in a semantically correct way, you can help search engines better understand and index the content of your website, which can increase your visibility in search results.