docs
  1. Features
  2. Product Listing Page
  3. Configuration

Configuration

This page provides detailed information on the configuration options available for the Product Listing Page (PLP) within the SCAYLE Storefront Application. Understanding these settings allows you to tailor the PLP's behavior and features to align with your specific business requirements.

Category Structure Configuration

Our category structure is primarily configured through the SCAYLE Panel. For detailed guidance on setting up new categories and updating the structure, refer to the Shop Categories Documentation.

Filters Configuration

Filters are configured through the SCAYLE Panel and are presented in a filter flyout. They consist of default filters and category-specific filters based on category attributes.

  • Default Filters: Default filters are set at the shop level and apply to all categories. Common examples include price or sale. For detailed information, please refer to the Default Filters Setup section of the User Guide.
  • Category-Specific Filters: Category-specific filters are based on attributes unique to each category. For more details, see the Category-Specific Filters Configuration section of the User Guide.
  • Color Filter Configuration: The color filter is special because it shows actual color bubbles instead of just the color names. The mapping of color attribute values to hex codes can be adjusted in the constants/product.ts file.

Color Filter

Image Configuration

To enable and customize the "Image View Toggle" feature on your PLPs, you need to define specific image attributes in the SCAYLE Panel and then assign them to your product images using the Admin API.

Defining Default Primary Image Logic (Optional)

If you want to explicitly control which image is shown as the "Default view" in the toggle, you can use the primaryImage attribute group. If you skip this step, the system will automatically use the first image in the product's image array as the default.

  1. Create primaryImage Attribute Group:
    1. Go to Settings.
    2. Select Attributes.
    3. Click the "+ Add Attribute Group" button.
    4. Name the Attribute Group: You must name this attribute group primaryImage.
    5. Set Type: Choose "Boolean" as the attribute type.
    6. Add Value: The boolean value will be true.
    7. Save: Save the new primaryImage attribute group.
  2. Assign primaryImage: true to Images (via Admin API):

Creating the Image Attribute Group for Toggle Options

First, you'll create a new attribute group in the Panel that will define the different image "types" you want to offer in the toggle.

  1. Navigate to Attributes:
    1. Go to Settings (usually a gear icon in the left menu).
    2. Select Attributes.
  2. Create a New Attribute Group:
    1. Click the "+ Add Attribute Group" button.
    2. Name the Attribute Group: You must name this attribute group primaryImageType. This specific name is recognized by the Storefront Application to power the image toggle.
    3. Add Values: Define the specific image types you want to offer as options in the toggle. These will appear as selectable chips in the filter flyout.
      • Examples: model, close_up, lifestyle, back_view, detail.
      • Use clear, descriptive names for your values. These values will be displayed directly in the frontend, so consider user-friendliness.
    4. Save: Save the new primaryImageType attribute group.

Assigning Attributes to Product Images via Admin API

Once the primaryImageType attribute group and its values are created in the Panel, you need to assign these values to the specific images of your products using the Admin API. This tells the Storefront Application which image corresponds to which view type. For detailed information on the Admin API endpoint and its usage, please refer to the Admin API documentation for Update or create product image attributes.

Important Considerations:

  • One Value Per Image: An image can only have one primaryImageType attribute assigned to it.
  • Hierarchy: primaryImageType attributes should be assigned only to images that do not have the primaryImage attribute assigned to them. This ensures a clear hierarchy and avoids conflicts with the default primary image logic.

Sorting Options Configuration

The default and available sorting options on the PLP can be adjusted directly in the codebase. The logic is handled within the composables/useProductListSort.ts file.

  • Default Sorting Key: You can change the default selected sorting option by modifying the DEFAULT_SORTING_KEY constant. It is exported to the outside so external developers can use it for specific needs (e.g, applying smart sorting keys).
  • Available Sorting Options: The sortingOptions object defines the available sorting methods. You can remove, reorder, or add new options here. Furthermore, the defaultSortingOptions are exported and can be used outside of the package, improving the flexibility and control of the external developers.
  • Custom and Smart Sorting Keys: The sortingKey property used for the Recommended sorting option can be set to a Custom Sorting Key or a Smart Sorting Key, which are configured through the SCAYLE Panel.

Badges Configuration

Badges are used to provide quick, additional categorization of products, highlighting features, novelty, or other attributes. The display of these product badges on the PLP can be configured:

  • New In Badge: This badge is based on the isNew property, which can be configured in the SCAYLE Panel under Settings using the isNew flag. By default, products are displayed as "New In" for the first 30 days after they go live in a country shop. You can adjust this period in days through the configuration settings. For more detailed information, refer to the dedicated section of the User Guide.
  • Custom Badges: Custom badges can be created to highlight specific product features or attributes (e.g., sustainability, unisex). To add or modify custom badges, navigate to SCAYLE Panel ➜ Settings ➜ Attribute. Look for an attribute group named storefrontBadge. If it doesn't exist, create it. Within this attribute group, define the custom value. For example, if you want the badge "unisex," set the value to "unisex."
Next up
Composables