Menu

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

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 Design 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

Login to post a comment