Skip to main content

How to use the custom code section of AfterShip Page Builder

Written by Harneet Kaur

Overview

AfterShip Page Builder now supports a custom code section to let Shopify store owners add forms created via other apps or make any other changes to their pages. This help guide will explain how to use this new section with an example and provide important notes as well.

Critical information

  • You can insert code in these formats: HTML, CSS, JavaScript, and Liquid

  • If you want to use JavaScript or Liquid, save your changes and then update your live page to see the final result

  • The code will automatically turn red if you use the wrong code format

Let’s use the example of Mailchimp forms to understand how to use the custom code section of AfterShip Page Builder:

  1. To generate the MailChimp form’s code, follow these steps.

    1. Click Forms, then choose Other forms.

    2. Click Create new form.

    3. Click Create embedded form.

    4. Enter a name for your form, then click the Audience drop-down to choose the audience you want to work with.

    5. Click Continue to builder.

    6. Click Form Fields, Settings, Tags, or Referral Badge to customize your form. Collect email and subscribed SMS contacts on your embedded form. Either an Email Address or SMS Phone Number input field is required.

    7. When you’re ready, click Continue.

    8. Click Copy Code.

  2. Go to your AfterShip Page Builder account and choose the page into which you want to embed your form

  3. Click Add section, Add blank section

  4. Click Add elements, select Custom code.

  5. Click Open code editor and paste your copied code.

  6. Click Save and then hit the Save and publish button.

Tip: If the alignment of your form is not right or by default it is displaying on the left side of the page, set the Content width of the page to Small.

For any help, please reach out to our chat support team.

Did this answer your question?