Menu

How do I move my Buy Button so it isn't in the top of the page?

(Note: This is for Theme versions 1.9.9 and below!)

Thinkific presents your landing page to a visitor by finding and assembling the various parts of it. It has a set of instructions do this in your site's Theme.


You can change your site's Theme to include the buy button after your course description and before your course instructor profile by doing the following:


  1. In the Admin Dashboard, go to Themes.
  2. Select the My Themes button. Under the 'Active Theme' select the Edit HTML/CSS button.
  3. In the Theme Editor, on the left, expand 'Course Landing Pages'.
  4. Select 'Add New Course Landing Page'. Name it.
  5. Find '{% include "course_landing_page_action_buttons" %}' and remove it from the code.
  6. Find the space before '{% comment %} Display the course instructor {% endcomment %}' and paste the following code in there:

    <div style="padding-bottom:2em;" class='product-main-cta'>
         {% include "course_landing_page_action_buttons" %}
    </div>

  7. Go to File > Save.
  8. Go to My Courses in the Admin Dashboard, and open your course.
  9. Go to the Landing Page Tab.
  10. Change the landing page to the one you have just created.
  11. Save the changes and preview the page.

Now you'll have a Custom Landing Page that can be applied to all of your courses through the Design tab of your course creator.


Now you can also stop at step 6 above, and add your course button to the course description directly as HTML:

  1. Follow these steps to get your course's enroll button's target URL.
  2. Go to My Courses and then open your course.
  3. Go to the Details tab to edit the Course Description.
  4. In the Editor Toolbar, select the '<>' button to see the HTML markup.
  5. After your course description markup ends, add the following:

    <div class="product-main-cta" style="text-align:center;padding-top:1em;padding-bottom:2em;">

    <a href="[Course Enroll URL]" class="btn btn-primary btn-purchase btn-lg">[Button Text]</a>

    </div>

  6. Where the HTML says '[Button Text]' change this to whatever CTA you want (e.g. Get Started).
  7. Where the HTML says '[Course Enroll URL]' change this to your button's target URL copied earlier in step 1.
  8. Save the page.


1 person has this question

Can I customize the location of the "resume course" button? I'd rather have the button lower/center on the banner so I can keep my design and none of the themes have this option... Thanks.

Hi Renita!


You can still follow the instructions above but for step 6, you would past the code into the space before  {% comment %} Display the course description {% endcomment %}


If you're having problems with this, send us a quick message through this link: http://help.thinkific.com/support/tickets/new


Thanks!


Oliver

Hi! 


I have created a new banner in the "add new section" area (inside edit theme)... but when I later on want to use it, inside my page builder, it does not appear as an option when I click on "add section". How could I solve this?

My aim was to have an additional banner without any buttons (my other banners / landing pages do have and need buttons). 


Thanks for your help!


Hi Patrick!


Send us a message to http://help.thinkific.com/support/tickets/new and we can take a look for you. 

Login to post a comment