Versions Compared

Old Version 1

changes.mady.by.user Kresimir Nikolic

Saved on

compared with

New Version 2

changes.mady.by.user Kresimir Nikolic

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Catalog Banners empowers you to create a visually stunning entrance to your virtual shop within the JSM portal. Imagine having the ability to customize the first impression users get when they open the request type – that's exactly what Catalog Banners offer. This feature transforms your storefront into an engaging and personalized space, setting the stage for a delightful shopping journey.

image-20240116-133343.pngImage Removed

Broken hardware

With catalog banners you can easily showcase what the catalog is about and make the request type look much more attractive.

Employee onboarding

Employee onboarding or just in need of a hardware refreshment? Customize your banner to fully suit your needs.

image-20240116-133615.pngImage Removed

...

Configure catalog banner

Catalog banners are defined on a catalog level. Each catalog can have a different design and can be configured through the catalog configuration.

To

...

access the

...

catalog banner configuration, follow these steps:

  1. Navigate to Manage Apps in the sidebar.

  2. Select Shoppie from the list of apps.

  3. Go to Configuration.

  4. Click on Catalog Configuration.

  5. Open the Catalog Design tab.

In the Catalog Design tab, you will find options to edit and preview the catalog banner.

Info

If no catalog banner design is configured the default catalog banner will be displayed.

...

Editing and Previewing the Catalog Banner

...

There are 4 components that make the catalog banner:

  • Button

  • Icon/Logo

  • Text

  • Title

Each of the components can be toggled ON or OFF depending on your needs.

image-20240118-104509.pngImage Removed

Catalog Banner design

In the design tab is where the font and icon size is configured together with all the colors of the components.

image-20240118-110115.pngImage Removed

Title, text and icon sizes:

  • Small - 12

  • Medium - 24

  • Large - 30

  • Custom size

Background color

There are 3 different types of background color:

Solid - Choose between predefined color or select a custom color using the custom color picker.

image-20240118-110516.pngImage Removed

Gradient - Choose between predefined gradients or make a custom gradient using a slider.

image-20240118-110531.pngImage Removed

Image - Choose between Unsplash images or upload a custom image using a link.

image-20240118-110544.pngImage Removed

Button, button text, title and text colors

At the bottom of the design tab are the color options for each of the components. Each component can have a different color and can be customized independently.

...

Content

In the content tab each of the components content can be edited.

Icon
There are three different icon options to choose from:

  • Logo - Custom logo can be uploaded by clicking on the “Add new Logos” button

  • Icons - Choose between Atlaskit, Bootstrap, Font Awesome and Mater Design libraries

  • Emoji

image-20240118-111600.pngImage Removed

image-20240118-111934.pngImage Removed

Card title - Customize the title of the banner

Text - Customize the text underneath the title

Button - Customize button text

Templates and libraries

There are 4 predefined templates to inspire you and kickstart your banner design. Templates and banner library can be accessed by clicking on Check out our templates! at the top right corner of the dialogue:

...

Each banner being used by a catalog will be saved to the Library saving time when wanting to reuse existing banners in different catalogs:

...

Edit Banner

  • Button: Edit Banner

  • Function: Opens a modal with two tabs for editing the banner layout and content.

Preview on JSM

  • Button: Preview on JSM

  • Function: Provides a preview of the configured banner in the JSM portal.

Banner Preview

  • A simple preview of the configured banner is displayed below the buttons.

Banner Editing Modal

The modal that appears upon clicking Edit Banner contains two tabs: Layout and Content.

...

Layout Tab

In the Layout tab, you can edit the layout of the banner, customize the image, and modify the text.

Background Fill

  • Options:

    • Solid Color: Includes a color picker for choosing a solid background color.

    • Image: Allows you to choose an image as the background.

Choosing an Image

  • Button: Choose Image

  • Options:

    • Unsplash: Select an image from Unsplash.

    • Upload Image from URL: Upload your own image from an URL.

Product Cards

  • Toggle: Default is set to ON.

  • Options:

    • Category: Toggle ON/OFF.

    • Description: Toggle ON/OFF.

    • Price: Toggle ON/OFF.

The banner is split into a static banner and a section with product cards. The banner is used to access the catalog in the JSM portal.

Info

By default 3 random products will be taken from the catalog and displayed in the product cards section.

Content Tab

In the Content tab, you can edit the title, text, and select which products to display in the banner.

Editing Options

  • Title: Edit the title of the static banner.

  • Text: Modify the text that appears on the banner.

  • Select Products to Display: Choose which products to display in the product cards section.

Product Management

  • Rearrange Products: Products can be rearranged in the list to control the order in which they appear.

...