Customization

The Product Listing Page (PLP) is designed with flexibility in mind, allowing you to tailor its appearance and functionality to meet specific business needs. Below are the key areas where customization is available either through our SCAYLE Panel or directly in the source code.

If you haven't already, please start by reading our General Overview of the PLP page.

Category Structure

Our category structure can be easily configured through the SCAYLE Panel. For detailed guidance on setting up new categories and updating the structure, refer to the Configuration Documentation.

The Storefront Application automatically fetches the category tree from the Storefront API and displays the tree to the user to allow for easy navigation. There is a slight difference in the appearance of category structure between our two web stacks:

Desktop View: By default, the category tree is displayed as a side navigation panel, showing root categories and their immediate children. Selecting a child category will reveal its own children below.

Mobile View: On mobile devices, the category tree is displayed using breadcrumbs for upper-level categories and chips for immediate children of the currently active category.

Content Banners

To make your PLP visually stand out, it can be beneficial to show a related image at the top of the page. Besides the page being more visually appealing, by using the banner, you can define a focus point as it will be in the user's first viewport of your PLP page. This can help you boost specific marketing campaigns, category pages, product brands, or other content.

This requires a working CMS Setup as described on our CMS Integrations page for either Storyblok or Contentful.

For this, we will need two components that come out of the box with the SCAYLE Storefront CMS Module:

CMSCategoryData: Which fetches the data and makes it available to the child components using a slot.
CMSImage: Which is the actual component that will render the image.

When you open the file pages/c/[...categories]/[...slug]-[id].vue, you will see the entry point and main code for the PLP. Upon further inspection, you can see that we render the CategorySideNavigation component, and next to it, we have our main content of the page.

To show an image on top of the PLP ahead of any other content, the first step is to fetch the data using our CMSCategoryData component:

When rendered, this component will fetch the data from the selected CMS Provider and make the content available in the template slot.

We can then use this provided content to render the actual UI, which can be easily achieved through the CMSImage component:

The full code for rendering a CMS banner looks like this:

The final output of the implementation is:

Available Sizes

Customizing the available sizes on product cards involves displaying size options directly on the product card, allowing customers to quickly see their preferred size without having to navigate to the Product Detail Page. This customization can enhance the shopping experience and streamline the purchase process.

Here’s how it works in Storefront Application.

Let's start by opening our ProductCard component which is located in /components/product/card/ProductCard.vue. Since we want to show this information below the product name, we need to go into the ProductCardDetails component, which renders the UI below the image.

First, we need to figure out which of the sizes of the product are available. To do this, we set up a new computed value in our script that uses the variants of our product.

Variants are the most specific representation of a product. These items carry stock and price info and are being sold in the shops.

To learn more about the Product Structure in SCAYLE, head over to the Developer Guide.

We then filter out any variants that are no longer in stock, and from each variant, we take the size attribute value and use the label. In our example, the size attribute holds the differentiating attribute between the different variants; in typical e-commerce fashion, this would be S, M, or L. However, depending on your data structure in SCAYLE, you might use a different attribute for this.

We now have a reactive variable that updates automatically if our inputs change, which is a list of the labels of the available sizes. We can now use this variable in our template to render this information.

First, we need to locate the product name in our existing template, which should look like this:

We now want to create a new HTML component that will be responsible for rendering the available sizes of the product:

<p
  v-if="availableVariants"
  class="truncate text-sm text-gray-600"
>
  {{ $t('available-sizes', { sizes: availableVariants.join(', ') }) }}
</p>

We only render this component if we have some availableVariants; this is handled by the v-if directive, which conditionally renders a component. We also give our component some styling for consistency with the application. To also have a bit of space between the product name and the available sizes, we can add the class mb-0.5 to the product name paragraph, which will give the component a small bottom margin. The final outcome of this customization is:

Available Sizes as Part of PLP's Product Cards

Low Stock Badge

The Low Stock Badge offers many benefits for your business. It signals to users that the item is running out, encouraging them to make a purchase quickly before it's gone. Furthermore, it triggers FOMO (Fear of Missing Out), which motivates the users to buy now rather than risk missing out on the product entirely. This can help your business effectively drive sales & improve inventory turnover.

For instance, rather than always displaying the "New In" badge, you might want to prioritize showing a "Low Stock" badge instead. The logic for determining low stock is typically implemented in components/product/card/badges/ProductCardBadgesHeader.vue.

First of all, we need to build our logic which decides whether or not the product itself is considered as low stock based on the variants and the quantity. In our example, we will just consider all variants (including sold-out ones) and consider the product as having low stock if the average quantity is lower than 3. For this, we need to set up a new computed variable that calculates the information based on the product that is in the properties.

The code would look like this:

We can now adjust the labels variable, which handles the logic of which badges are ultimately shown to the user. It returns a list of up to two badges, and we can adjust the first element to now also consider our new isLowStock variable.

We use isLowStock.value since our variable is a reactive reference and we can access the actual result of our computation through the .value property.

This way our labels will automatically update in case our isLowStock variable changes. To learn more about Vue's Reactivity System, head over to the Vue Docs.

The final outcome of the customization looks like this: