Profile
      Back to home
      1. ArchiPro Knowledge Base
      2. Your Company Profile
      3. Profile

      How to add the badge to a Shopify website

      This article outlines the steps to install the ArchiPro badge on a Shopify website.

      1. Access Your Shopify Admin: Log in to your Shopify account and go to the admin dashboard.

      2. Go to Online Store: From the left sidebar, click on "Online Store," then select "Themes."

      3. Edit Code: Find the theme you want to modify and click on "Actions." Choose "Edit code" from the dropdown menu.

      4. Find the Appropriate File: In the theme code editor, locate the file titled "theme.liquid" and open it.

      5. Insert Badge Code: Copy the ArchiPro badge code provided to you here. 

      Please copy the all the text below and send this to your website developer:

       

      Place this script inside the <head> tag:

       <script src="https://badge.archipro.com.au/ap-badge.js"></script>

      Place this code inside the <body> or the <footer> tag where you'd like the badge to show up:

      <ap-badge href="archipro-url-to-your-projects-products-or-profile" theme="black/white" size="pixel-width-of-badge" transparent />

      You will need to edit the second piece of code above to include the following:

       

      • href - this can be any of your product or project URLs where you'd like your visitors to go to when they click the badge; can also be a link to your profile on ArchiPro;
      • theme - this sets the colour of the badge. You can choose black or white. Any other value will show up as white.
      • size - this sets the width of the badge. You can add the exact pixel width you desire and the height will scale automatically, with an aspect ratio of 2.75:1
      • transparent - this can be used to make the background of the logo transparent. To use a badge with a transparent background, you can simply keep the transparent parameter at the end of the code, as shown above. To use a badge with an opaque background, remove the 'transparent' parameter from the code.

      6. Save Changes: After inserting the code, click the "Save" button to apply the changes.


      7. Preview Your Store: Return to your store and refresh the page to see the ArchiPro badge in action.

      8. Adjust if Necessary: If the badge doesn’t look right, you may need to tweak the code or styling.


      That’s it! You’ve successfully installed the ArchiPro badge on your Shopify website.