Product Display 2.0
The Product Display 2.0 component is a fresh, modern way to showcase your products on your platform!
Here’s a quick look at some of the highlights:
Two Display Styles: Choose between "Divided by Type" and "Single List." "Divided by Type" gives you the familiar grouped-by-type layout, while "Single List" displays everything in one unified list, ordered exactly how you want (also a newish feature in the display groups).
Secondary Display Group: Use the plan toggle to showcase an alternative display group—perfect for offering monthly vs. yearly options side-by-side.
Included List: Make it clear what's in or out! Add a list of features included (or not) with each product, making it easy to compare and clarify differences.
Highlight Specific Products: Emphasize your star product with a custom header to give it that personal touch.
Bottom Text Area: Sometimes, you just need to add a bit of general info or a footer note for all products—now it’s easy to do!
If your platform does not yet have any subscriptions or packages created, you should first read about how to Create a new subscription, as well as how to create and manage your Product display groups.
Go to Platform - Manage platform in the dashboard
Select the subpage you would like to add the Product Display 2.0 component to and click to add new section. It is likely that you will want to add this to your /subscribe page, to replace the previous version of the Product Display component. You will find the Product Display 2.0 component in the content tab.
The new component will be listed at the bottom left and you can click and drag to change its placement amongst the other components on the page.
Use the dropdown menu below Select main product display group to select which product display group you want to be visible.
If you would like a 2nd display group to be visible (accessed by using a toggle navigation on the page), then activate that option and select which product display group you want to be visible here. You might want to use this option to display monthly vs yearly options separately, like in the example above. To do this, you would include all the monthly subscriptions in one product display group, and then annual subscriptions in a different product display group.
If you want each type of product (subscriptions vs packages vs gift cards) to appear on separate rows to each other, then select Divided by type.
If you want all the products to appear together, then select Single List.
If you've selected single list, you can choose the order in which the products appear by editing the order within the Product display group (at Products > Product display groups).
Tip: Click "Save Section" after doing the above steps, so that your CMS preview will show the products, which will make the editing and styling easier to manage.
By default, all the essential text sections will automatically have appropriate text included.
You can edit the text and styling of the header and the subtitle in the Header & Titles section.
You can edit the styling of the product titles and descriptions in the Cards section. To edit the text of the product titles and descriptions, you should go to the Products section of the dashboard, and edit it within each individual product.
In the Cards section, you can also choose to edit the billing interval texts, the custom billing texts and the buy button texts, however the default texts provided should be good. There are various other options in the Cards section, to edit the styling and appearance.
The Included List allow you to add a list of content/features that are included (or not) for each product, making it easy to compare and clarify differences.
Click Edit included list in the Included list section.
You'll see each of your products listed here. Select the product that you want to add a list to, then click Add row and you'll see the options that you can edit. Add as many rows as you want depending on the number of content/features you want to draw attention to.
In the examples above, we used the included lists to communicate which competitions are/aren't included in each subscription, by adding the 4 rows "Youth Games", "Tournaments", "International Competitions" and "Top League" and then selecting the tick to show which are included and the X to show which aren't included.
The Highlight Products option allows you to add a custom banner above one (or multiple) of your products. In the examples above we added the text "Most Popular" above the gold subscription. You might want to add something like this, or "Best Value", or "Limited Offer" etc.
In the Highlight Products section, type the text that you want to appear here, then select which products you want this banner to appear above.
There are styling options if you want to change the size/weight/colour of the text or the colour of the banner.
By default the Bottom text is deactivated. You can activate this section if there is any additional information that you want to communicate to customers on this page. Once activated, you'll see the options to add text and edit the styling of this text.
In case you have no products that are actively available, this is the text that will appear on the page. You can choose to edit this, however the default texts provided should be good. Hopefully you will always have some products available though!
To read more about how you can style everything you can read these guides:
CMS Styling - Text and buttons
CMS Styling - Sizing
CMS Styling - Padding and Margins
Click on Save section at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes, click on Publish to make them live on the platform. You can also click on Discard to delete all your changes since the last time you published.
What’s New?
Here’s a quick look at some of the highlights:
Two Display Styles: Choose between "Divided by Type" and "Single List." "Divided by Type" gives you the familiar grouped-by-type layout, while "Single List" displays everything in one unified list, ordered exactly how you want (also a newish feature in the display groups).
Secondary Display Group: Use the plan toggle to showcase an alternative display group—perfect for offering monthly vs. yearly options side-by-side.
Included List: Make it clear what's in or out! Add a list of features included (or not) with each product, making it easy to compare and clarify differences.
Highlight Specific Products: Emphasize your star product with a custom header to give it that personal touch.
Bottom Text Area: Sometimes, you just need to add a bit of general info or a footer note for all products—now it’s easy to do!
Getting Started - Setting up your products
If your platform does not yet have any subscriptions or packages created, you should first read about how to Create a new subscription, as well as how to create and manage your Product display groups.
Creating a Product Display 2.0 component
Go to Platform - Manage platform in the dashboard
Select the subpage you would like to add the Product Display 2.0 component to and click to add new section. It is likely that you will want to add this to your /subscribe page, to replace the previous version of the Product Display component. You will find the Product Display 2.0 component in the content tab.
The new component will be listed at the bottom left and you can click and drag to change its placement amongst the other components on the page.
Selecting which products you want to display
Use the dropdown menu below Select main product display group to select which product display group you want to be visible.
If you would like a 2nd display group to be visible (accessed by using a toggle navigation on the page), then activate that option and select which product display group you want to be visible here. You might want to use this option to display monthly vs yearly options separately, like in the example above. To do this, you would include all the monthly subscriptions in one product display group, and then annual subscriptions in a different product display group.
Selecting "Divided by Type" vs "Single List"
If you want each type of product (subscriptions vs packages vs gift cards) to appear on separate rows to each other, then select Divided by type.
If you want all the products to appear together, then select Single List.
If you've selected single list, you can choose the order in which the products appear by editing the order within the Product display group (at Products > Product display groups).
Tip: Click "Save Section" after doing the above steps, so that your CMS preview will show the products, which will make the editing and styling easier to manage.
Editing the texts
By default, all the essential text sections will automatically have appropriate text included.
You can edit the text and styling of the header and the subtitle in the Header & Titles section.
You can edit the styling of the product titles and descriptions in the Cards section. To edit the text of the product titles and descriptions, you should go to the Products section of the dashboard, and edit it within each individual product.
In the Cards section, you can also choose to edit the billing interval texts, the custom billing texts and the buy button texts, however the default texts provided should be good. There are various other options in the Cards section, to edit the styling and appearance.
Adding and managing the "Included List"
The Included List allow you to add a list of content/features that are included (or not) for each product, making it easy to compare and clarify differences.
Click Edit included list in the Included list section.
You'll see each of your products listed here. Select the product that you want to add a list to, then click Add row and you'll see the options that you can edit. Add as many rows as you want depending on the number of content/features you want to draw attention to.
In the examples above, we used the included lists to communicate which competitions are/aren't included in each subscription, by adding the 4 rows "Youth Games", "Tournaments", "International Competitions" and "Top League" and then selecting the tick to show which are included and the X to show which aren't included.
Adding and managing "Highlight Products"
The Highlight Products option allows you to add a custom banner above one (or multiple) of your products. In the examples above we added the text "Most Popular" above the gold subscription. You might want to add something like this, or "Best Value", or "Limited Offer" etc.
In the Highlight Products section, type the text that you want to appear here, then select which products you want this banner to appear above.
There are styling options if you want to change the size/weight/colour of the text or the colour of the banner.
Adding and managing "Bottom Text"
By default the Bottom text is deactivated. You can activate this section if there is any additional information that you want to communicate to customers on this page. Once activated, you'll see the options to add text and edit the styling of this text.
Editing the text for "No products"
In case you have no products that are actively available, this is the text that will appear on the page. You can choose to edit this, however the default texts provided should be good. Hopefully you will always have some products available though!
General styling
To read more about how you can style everything you can read these guides:
CMS Styling - Text and buttons
CMS Styling - Sizing
CMS Styling - Padding and Margins
Save and publish
Click on Save section at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes, click on Publish to make them live on the platform. You can also click on Discard to delete all your changes since the last time you published.
Updated on: 22/11/2024
Thank you!