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 to build to display and manage your team and members as a responsive grid or as a dynamic slider. You have multiple special layouts that will help you to show your team in so many different ways.

You can manage your members by grouping into separate teams. With Team Showcase by Omega you can display your team without any line of code. All you need to do is to copy the shortcode to your specific posts or pages.

You can display the members in 7 different main ways

  • Grid Layout
    The members will display in a responsive grid with the number of columns you set and with the information to the right or below the image, depending on your settings.
  • Hover Grid Layout
    The members will display also in a responsive grid, but the information will display when you hover the image.
  • Grid Boxes Layout
    Another grid layout to display members with the information in Side Panel or VCard Popup.
  • Thumbnail Slider Layout
    The members will display the information with Thumbnail Slider navigation.
  • Thumbnail Pager Layout
    The members will display the information with Thumbnail Pager navigation.
  • Honeycomb Layout
    The members will display in a responsive image's honeycomb gallery with Side Panel or VCard Popup information.
  • 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.

  • 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

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

or if you want to display members of specified groups, you can insert this code <div class="ot-our-team group-id-{ groupId }" data-group-id="{ groupId }"></div>, replace { groupId } with group id in Group table in administration app.

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.

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.