Documentation

Install app

Directly go to this link: https://apps.shopify.com/our-team-by-omega to install Team Showcase by Omega app.

App Overview

Team Showcase by Omega is the perfect app built to display and manage your team as well as your members in responsive grid view or a dynamic slider. You have multiple special layouts that will help you to take a broad view of your team in so many different ways.

You can manage your members by grouping them in separate teams. With Team Showcase by Omega you can display your team without any coding involved. All you need to do is to copy the short code that is already provided to your specific posts or pages.

You can display the members in 7 different ways
1. Grid Layout
  • The members will be displayed in a responsive grid with the custom number of columns and their information can be shown on the right or below the image, depending on your settings.

2. Hover Grid Layout

  • The members will also be displayed in a responsive grid, but the information will display when you hover on the image.

3. Grid Box Layout

  • Another grid layout to display members with the information in Side Panel or VCard Popup.

4. Thumbnail Slider Layout

  • The members will display the information with Thumbnail Slider navigation.

5. Thumbnail Pager Layout

  • The members will display the information with Thumbnail Pager navigation.

6. Honeycomb Layout

  • The members will display in a responsive image's honeycomb gallery with Side Panel or VCard Popup information.

7. Filter Showcase Layout

  • Filter member by small button of Group's title.

 You can customize and enhance the layout, with several layout options and pre-built styles in Settings Tab.

  • Number of members to display
    Choose number of members to display on your store, default all members in Filter Showcase Layout.
  • Number of Columns
    You can choose how many columns you want to display. The Columns will be responsive and adapt in different screen sizes.
  • Image Shapes and effects
    You will be able to choose if you want the images to display with squared corners, rounded corners or even circular shaped! In addition you can give them extra styles, like grayscale, image borders and shadow styles.
  • Layout preset or Composition

Settings

Choose "Settings" tab in administration app

Some settings:

  • Social Icons
    Size and shape for the social icons images.
  • mailto:active
    When active, emails will display as a link in the mailto:email format.

How to add/edit member

When adding or editing a member, there are 7 main steps:

  1. Insert/edit the name for this member. MANDATORY
  2. Insert/edit description for this member.
  3. Set/change image for this member. MANDATORY
  4. Choose one or more groups.
  5. Insert/Edit the additional information such as Job Title, Email, Telephone, Location and Personal Website.
  6. Insert/Edit the links to the social networks (Must use complete URL)
  7. Click "Save"

How to display members on your store and Groups settings

Insert this code <div class="ot-our-team"></div> in specified page or post's content.

What information do you want to display
In this options you can choose what to display. It’s recommended that Name is active always.

  • Name
  • Description
  • Email
  • Telephone
  • Social Icons
  • Job Title
  • Location
  • Personal Website

How you want it to look like

  • Layout: choose between 7 – Grid, Hover Grid, Grid Boxes, Thumbnail Slider, Thumbnail Pager, Honeycomb, Filter Showcase.
  • Load a Layout Preset, Composition or Theme for choosen layout.
  • Columns – Number of columns to display. Depends on the layout choosen.
  • Image Shape – Choose between 3: Square, Rounded Corners or circles.
  • Image Effect – Extra CSS effects for the images.
  • Short description – short description for your team.

The Preview

The preview will show you the items and layout you choose. However, after you save settings, the visuals can possibly change on your store. This is because some CSS of your theme might affect the content of the team showcase layouts. Normal problems are image CSS and text CSS.

Groups Settings

In some cases, it might be a good idea to show customers your specific groups' members. To Add Groups, please follow these simple steps:

Step 1: In Groups Tab, you can create a new group by entering group's title in the blank on the left of the screen, then click Save.

Step 2: Your new group will be shown in the All Group section on the right, together with Group ID, which will help you display group members on your store page.

To display members of specific groups on your store, you can insert this code <div class="ot-our-team group-id-{ groupId }" data-group-id="{ groupId }"></div>, anywhere you want to see it, do not forget to replace { groupId } with that group's ID.

You can also Edit or Remove an existing group by clicking 2 symbols on the right of the group thread.

FAQ

  1. Is this app Responsive?
    Yes, the layouts are responsive.
  2. Can I add extra fields in the Additional Information box?
    No, you can’t. However the ‘Description’ fields lets you add any HTML content, so you can use this field to extend your content. Also, if you’re an advanced user, you can change the labels of the other fields if needed.
  3. Can I hard-code one of the layouts to my Shopify Theme?
    No, You only need copy shortcode and paste it to page/post's content.
  4. Can I change the visuals of the layouts?
    Yes, you can add more CSS code in "Custom CSS" field, but at your own risk. If you have trouble with it please contact us contact@omegatheme.com.