How to integrate Premium Course Template into existing Webflow site with CMS collections and custom code without breaking functionality? Answered

Post author
Spenny Whiting

I just purchased the Premium Course Template. I already have a Webflow website that is fully developed. You can check it out at gimbalgod.com. I want to implement the Premium Course Template into the pre-existing site. Is this possible? Right now on the site was the version of my course that was fully housed on Webflow.

I have the template on my Webflow dashboard as a completely different site, but I'm curious if I can merge it into my current site.

Also, is it be possible to meet with any of the designers/developers who made the template? It would be much easier to chat on a call rather than text.

Thank you!

Comments

16 comments

  • Comment author
    A J

    While the template is a starting point to build and customize your website. If you have a different site already built, you can copy paste the pages, components, custom code enabled in those pages to your existing site. It can be a bit time consuming to go through the existing setup and to make sure all features get aligned with it, but nevertheless its definitely possible to integrate it.

    Make sure you keep a backup of the existing site and template (in case you are going to change anything there) just in case as a back-up to compare the design / functionality aspect down the line. Hope this gives you some idea.

    0
  • Comment author
    Magnaem A

    To merge the premium course template with your own site, you would have to manually copy over all the course UI to your existing site but my suggestion would rather be to copy over your existing websites pages to the template so you avoid breaking any functionalities and then you can transfer your domain from existing site to the template.

    As for hopping on a call, our team is quite small, so we lean heavily on async com tools like Slack or Loom. Gives us a record of what was said, transcripts, and makes it easy to coordinate with teammates across multiple timezones.

    If you have any questions or concerns please do let me know and I'll do my best to assist you.

    0
  • Comment author
    Spenny Whiting

    Hi Magnaem!

    Thank you for the response!

    Got it. That makes sense to me. Great suggestion. One other thing: I am concerned that I have not correctly connected the template to the backend Memberstack side of things. Is there a way to confirm that the connection has been made correctly?

    One other questions:
    We have a lot of CMS collections with videos and photos (the Portfolio page on gimbalgod.com) with hoverable actions and custom code. Is that an easy copy/paste? That seems like it might break the interaction if we tried to copy and paste it...

    Sorry to spam you with a lot of questions, but it seems like copy/pasting everything from our current site (which has a lot of CMS stuff and custom code for animations/interaction) would just be a crazy amount of work that does not seem worth doing. Is there any other option to integrating it with our original site?

    Otherwise, I think we might have to look at other options for hosting a course...

    0
  • Comment author
    Magnaem A

    Hi Spenny Whiting

    1. Could you send a loom recording walking me through your current Memberstack settings and what is not working right now?
    2. The only other option is to carefully copy the premium course template pages to your existing site. I would start by understanding how the premium course template fully works and then copy over these pages to your existing website as well as the custom code needed for some functionalities.

    Please create a duplicate backup of both sites in case you need a reference of your original sites.

    0
  • Comment author
    Dmytro Ivanitskyy

    Any chance you can elaborate on how to "copy over your existing websites pages to the template so you avoid breaking any functionalities and then you can transfer your domain from existing site to the template". My current site is an Ecomm Standard site, and the pages are all setup, just need your template added as pages.

    0
  • Comment author
    Magnaem A

    Hi Dmytro Ivanitskyy in this case you should over the template pages to your existing site. Here is how to do it and things you should be aware of.

    1. First add you Memberstack install code to your Ecomm site.
    2. Open your Ecomm site and create the following first blank pages: Login, Signup, Access Denied and create a folder "Member" and add the pages: Home, saved courses, enrolled courses, courses
    3. Create the exact CMS setup on your Ecomm site similar to the template.
    4. Now start copying all the layouts selecting "page-wrapper" from the template to your Ecomm sites blank pages

    There are some pages with custom codes so please inspect all pages on the template -> settings to see if there is any code you need to copy over. There is also site wide code so copy that over to your Ecomm site as well.

    Once you've done all of this you can let me know and i can check out your site to make sure all of the pages/layouts and code has been properly placed.

    Hope this helps!

    0
  • Comment author
    Dmytro Ivanitskyy

    Hello Magnaem A! Would you be able to provide the custom code for the Dashboard home page. I can't view it without a plan. Page is raptortrading.info.

    On the Lessons page, the checkmarks and the complete lesson buttons don't work

    0
  • Comment author
    Magnaem A

    Hi Dmytro Ivanitskyy  There isn't a script that should go on the Dashboard homepage and on the lessons page -> on the checkbox (.chapter-menu_check) you are missing the combo class "yes" that might have been cleared from your styles.

    Add a "yes" class and style it like this (see screenshot). This should solve that issue.

    0
  • Comment author
    Dmytro Ivanitskyy

    Hello Magnaem A Duncan Hamra! I got the checkmarks working. But upon more testing found a few more issues I hope you can help with.

    1. The button to complete lesson does NOT change to red/green when pressed.
    2. The "relative" section that's supposed to appear above when lessons are completed, does NOT appear at the top. I checked the styles and all variables and can't seem to find the issue.
    3. The Billing, Profile, and Log Out buttons do NOT work from the Lessons page, but work from all other pages.
    0
  • Comment author
    Duncan from Memberstack

    When did these features stop working? And do you have someone who can help you to fix them? Our team is only so big, and these sorts of issues are best handled by yourself or a developer who is familiar with your particular instance of the project.

    0
  • Comment author
    Dmytro Ivanitskyy

    Duncan Hamra these features did not work from the start since the project template had to be copied over to my original site which was the reason why some items like custom code had to be manually transferred. Magnaem A provided the steps to get things copied over and I got almost everything working and functional with the exception of the above issues. Once these are fixed, project will be complete, so I would really appreciate the help from your team.

    0
  • Comment author
    Duncan from Memberstack

    https://www.loom.com/share/aba8599be05d441fae94b216feec9b1f

    0
  • Comment author
    Magnaem A

    Hi Duncan Hamra, I think the button error is caused by this div which I believe is the commenting feature for the site. Could this be resolved by enabling commenting in the Memberstack app? Dmytro Ivanitskyy can you confirm if you've switched on the commenting functionalities in your Memberstack app?

    "<div class="comment_container"><div data-ms-channel-sort="newest" data-ms-channel="" class="comment_channel"><div class="spacer-small"></div><div class="is-hidden"><div class="spacer-small"></div><div class="spacer-small"></div><div data-ms-content="members" class="comment_profile-row"><div class="comment_upload-wrap"><img data-ms-member="profile-image" src="https://cdn.prod.website-files.com/68c4954921fca3ddc2f97e26/68d1ce8584293f019fe7363a_transparent%20white%20profile%20image.svg" alt="" class="comment_image"><a data-ms-action="profile-image" href="#" class="comment_action-button w-inline-block"><div>Upload Image</div><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ic" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16h6v-6h4l-7-7l-7 7h4zm-4 2h14v2H5z"></path></svg></div></a></div><a data-ms-redirect="current-url" data-ms-action="logout" href="#">Logout</a><a data-ms-modal="profile" href="#">Edit Profile</a></div><div class="spacer-small"></div></div><div data-ms-post="loading" class="comment_loader-wrap is-fixed"><div class="comment_loader-inner"><img width="75" loading="lazy" alt="" src="https://cdn.prod.website-files.com/68c4954921fca3ddc2f97e26/68d1ce8584293f019fe7363c_loading.gif" class="comment_loader"><div>Loading</div></div></div></div></div>"
    0
  • Comment author
    Dmytro Ivanitskyy

    Thank you for the video walkthrough Duncan Hamra! I got the button color and relative section fixed. Now just need the links from problem #3 resolved. Magnaem A I actually removed commenting from my site as it is not required in my case.

    0
  • Comment author
    Magnaem A

    Okay, could you inspect that page in Webflow and completely delete that section with the "comment_container" class because that might be interrupting the Memberscript.js from running properly on that page. Let me know if this works?

    0
  • Comment author
    Dmytro Ivanitskyy

    Magnaem A that fixed it! Thank you so much!

    0

Please sign in to leave a comment.