To insert a shopping cart link on your web forms, you'll need a hyperlink that directs patrons to this address: <https://SITEID.blackbaudhosting.com/SITEID/page.aspx?pid=191>

Important: Before adding the link to your web forms, remember to swap out the highlighted SITEIDwith your organization's Site ID. This is typically the last digits of your Altru login. For example, if your Site ID was 5740, your link would look like this one: https://5740.blackbaudhosting.com/5740/page.aspx?pid=191

Follow these steps to add the link to your Altru web forms using the WYSIWYG Editor: 
  1. Go to Web 
  2. Under Configuration, click Page Designer 
  3. Click Next until you arrive at the third step: Configure Content. 
  4. Click the gear icon in the top corner of the part (example: header, footer, or side column) where you’d like to add your shopping cart. In the example image below, we are adding the link to the Header: User-added image
  5.  Go to the Insert tab and click Image to find/upload the image that you’d like to use as your shopping cart icon: User-added image
  6. If you see the image you’d like to use in the image library, click the image and then click the Insert button. This will insert the image onto your web form.
    1. If you don’t see the image you’d like to use in the image library, you can click the button to Add images to upload an image from your computer to the image library.
  7. Once the image is inserted on your web forms, you can resize the image as needed and place the image where you'd like to see the shopping cart. Tip: To resize, highlight the image until you see the squares surrounding it. Click the bottom right square while holding the SHIFT key on your keyboard to resize. 
  8. If you'd like to link the shopping cart link to the image directly, with the image highlighted, go to the Insert Tab and then click Hyperlink:
     
    User-added image
  9. In the following screen, select the third option "Create other type of link: and then paste the shopping cart URL from above for your organization. Then click Insert:User-added image
  10. (Optional) If you prefer to link text like Shopping Cart or Return to Cart, simply enter the text where you'd like it to appear in the editor. Highlight the text and following step 8 and 9 to insert a link in the same way. 
  11. Click Save to save your changes in the Configure Content area. 
  12. Click Submit to submit your changes to the Page Designer and apply them to the secure payments page. 

If you have HTML expertise and prefer to work in the HTML code for the page, follow these steps to add the shopping cart icon using code: 
  1. Go to Web 
  2. Under Configuration, click Page Designer 
  3. Click Next until you arrive at the third step: Configure Content. 
  4. Click the gear icon in the top corner of the part (example: header, footer, or side column) where you’d like to add your shopping cart.
  5. Go to the View Tab and click HTML CodeUser-added image
  6. A new window will appear with the HTML Code. You can insert the code you need to direct patrons to the shopping cart.
  7. Here is an example of HTML Code that Altru users have added in the past:
    <div id="shopping-cart" style="position: relative; z-index: 3000; float: right; display: block;"><a href="<https://SITEID.blackbaudhosting.com/SITEID/page.aspx?pid=191>" target="_parent"><img align="left" border="0" height="25" src="<https://5740.blackbaudhosting.com/5740/view.image?id=551>" width="25" /></a><a style="padding: 5px !important;" href="<https://SITEID.blackbaudhosting.com/SITEID/page.aspx?pid=191>" target="_parent">Shopping Cart</a></div>
    1.  Remember to replace the SITEID with your organization's Altru Site ID
    2. Remember also to replace the link highlighted in green with a link to the image your organization would like to use as a shopping cart. 
NOTE: We do not support customization of the CSS editor.