Drop down option on mobile

Wishlist Pricing Table
1

Hello everyone so I came across this landing page here. I think it’ll be amazing to add on a feature (if possible of course!) where on mobile it turns to a drop down pricing table. Rather than a long Vertical structure it has now.

On computer I love the way it looks now, but on mobile… not the worst but can use something like the link above.

Would love to hear the communities thoughts on this, I saw another post about scrolling horizontal which isn’t bad either.

1 Like
2

Hi there @seltz :wave:

This is a truly great idea, thanks for sharing!

I am not sure if there is a chance to customize the widget this way. However, I’ll gladly discuss it with the devs and share their words with you on Monday :wink:

3

Hey @Max thank you! Really hope its possible.

Also notice on the elfsite the price table had a option to select which price option to look at. Is this custom coded by any chance? Maybe this could be a fix for that.

Screenshot 2024-07-12 at 10.16.15 PM
Screenshot 2024-07-12 at 10.16.15 PM982×1706 100 KB

1 Like
4

Hi there @seltz :wave:

I’ve talked to the devs and, unfortunately, it’s impossible to add a dropdown option on mobile at the moment. We’ll try to consider this feature in the future!

As for your second question, we use a 3rd part app on our pricing page. However, I’ve talked to the devs, and they’ve confirmed that it’s possible to customize the widget this way.

To do this, you’ll need to create a separate widget which will be displayed only on mobile devices. Here, you should enable Multiple Tables Mode:

image

If this option works for you, please send me the widget IDs, a link to the page where these widgets should be installed and I’ll forward your request to the devs :wink:

5

Hey it work and looks way better! here is the website. Not done but you can have an idea of the pricing table chart. More like in info box for this site lol

1 Like
6

Hi @seltz :wave:

Do I understand right that you are satisfied with the current Multiple Tables Modes? Or would you like to customize it further, like in the screenshot of the pricing page on our website?

1 Like
7

Hey Max, thank you. Yea for now it works fine. Although I wouldn’t mind if you can ask how I can customize it like the screen shot one.

1 Like
8

Hi @seltz :wave:

If you want to display buttons on the left on mobile, add this code to the Custom CSS field on the Appearance tb of your widget’s settings:

.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-inner {
  display: flex;
  align-items: flex-start;
  max-width: 100% !important;
  overflow: hidden !important;
}

.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-column {
  margin: 10px 0 !important;
}

.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-toggle-inner {
  padding: 0 10px 0 0;
  margin-top: 10px;
}

.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-toggle-item {
  margin-right: 0;
}

.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-toggle-item-name {
  padding: 6px 10px;
}

.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-column-title-text {
  word-break: normal !important;
}

.global-styles,
.eapps-pricing-table-one-column
  .eapps-pricing-table-column-features-item-inner {
  padding: 8px 10px !important;
  font-size: 14px;
}