Page category articles

Introduction

This component allows you display all pages linked or that belong to a Page category of your store.

To understand how this component is connected to the pages, you must be aware of the following:

• By going to your store’s admin panel within Customization > Pages > All Pages, you will notice a section at the left side called Categories.
• Here you can create as many categories as you want, but upon creation, all Jumpseller stores comes already with one created by default: Blog.
• Blog will group any page that you assign this category to.
• You will also find a pre-created page called Blog post, which is already linked to the this category.
• At the right side you will find the list of pages, where all pages you create will be displayed.

Next, we explain how you can link a page to a category, in this case, for the Blog:

• Go to the list of pages and either create a new page or access to one that you already have.
• Inside the page settings add its respective content, such as Title and body.
• Then, scroll down the page until you find the Properties section, in which you will need to focus on two options:
  1. Categories: Here you need to choose the one called Blog.
  2. Template: Here choose the template that will display the information and content of your article, called Post.
• Save your changes and can click on the “View” link at the top right corner to see how it looks.
• Additionally, if you haven’t changed the permalink of the Blog category page, you can view it either by going to its settings and clicking on the “View” link or by openening a new browser tab and write the page URL, like for example store-name.jumpseller.com/blog or your-domain.com/blog.
• Once there you will be able to see all Articles that are linked to your Blog.

Note: You can perform these actions and follow the same steps to achieve something similar to any other category page you want to create, like for example a “News” or *Tips page.

---

---

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave.

The available options for this component are the following:

Page category

Here you need to choose the category for which pages (articles) will be displayed within the component.

The dropdown menu will show all the categories that you have created at your store’s admin panel.

---

Items to display

Allows to define the amount of articles that will be displayed within the component.

The order in which these will be displayed it’s gonna be determined by the order defined within the Blog category page settings (or the one you choose).

To know how to control this follow these steps:

1. Go to Pages > All Pages in your store’s admin panel.
2. On the Categories panel at the left side, two icons will show at the right side of the name.
3. Click on the first one (Edit) to access the category settings.
4. There you will find several options. The one called Category order will allow you to define how articles will be displayed within the component, which will also affect the category page.
5. Choose the option you want and click on the Save button to save the changes.

---

Width

Allows to define the maximum width that the component will stretch to the browser window.

You can read more about how this option will affect the component on this page.

---

Columns

You will find two options to define the amount of articles to be displayed on desktop and mobile devices.

How these show will very depending on what you choose at the Display option that can be found below, as it follows:

Carousel

Device width	Amount of visible articles
≥ 992px	Columns on desktop
≤ 991px	2
≤ 575px	Columns on mobile
≤ 414px	1

Grid

Desktop (≥ 992px)	Tablets (≥ 576px)	Mobile (≤ 575px)	Small mobile (≤ 414px)
Columns on desktop	2 columns	Columns on mobile	1 column

---

Display

Allows to define if the component content will be displayed within a section of type Carousel or Grid.

You can read more about the differences between these two types on this page.

---

Carousel options

This group of options will become visible when you choose Carousel, and they will allow you to customize its behavior.

You can find the full list of options in this page.

---

Heading options

By enabling this, a Heading section will be displayed before the component’s content. You can find the list of options in this page.

---

Appearance

This group contains the following options to customize the component:

• Top margin: Allows to control the upper margin of the section.
• Bottom margin: Allows to control the lower margin of the section.
• Content colors: Allows to choose the Color Pack for the component.

---

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available in this page.