Gift Box Snippet

This snippet can show a progress bar towards a goal for a Tech Fund account along with button options for users to donate. It can be used to create a listing page with multiple accounts shown and a full-page listing for one account. The full-page listing includes social media sharing and comments.

Gift Box snippet

View gift boxes in the Style Guide.

If you are going to use both the multiple listing and full-page options for one account, you must create the snippet as an Asset. Once created, the asset (or snippet itself if you are only doing one listing) can be inserted into a Boxed Sections snippet to create the multiple listing and inserted directly onto the Main Content Region to create the full-page listing.

  1. Insert the title for the Gift Box. This will be displayed in the multiple listing.
  2. Enter a couple sentences of text about the account in the Callout field. This is a short description that will be displayed in the multiple listing. If you use headings in this field, begin with Heading 3.
  3. In the Body field, include all of the content you want to appear in the content area of the full page. This can include sliders and other snippets.
  4. Using the Image Editor, crop the Banner type and insert the largest size created in the Image field. If you are only using the snippet in the short version inside a Boxed Sections snippet, you could choose to use a Card type instead. The will scale appropriately for the space it is used.
  5. The Link is used to get from the multiple listing to the full page. Type any text in the field (url for example) and link that text to the full page index.pcf file in the CMS. The link on the live page will show [ read more ] and go to the page you set.
  6. Enter the Michigan Tech Fund account number in the Account field in the format Account-####-Description where #### is the account number and Description is a short description of what the account is for.
  7. If you want to display a progress bar, enter a goal amount, without a dollar sign or comma.
  8. To increase the progress amount, enter a number in the Given field without a dollar sign or comma.
  9. To decrease the progress amount, enter a number in the Zero Total Value field without a dollar sign or comma.
  10. The Buttons field will determine what donation amount buttons are available for a user to select. You can have up to three. The defaults are $25, $50, and a user-entered value. You can change or delete any of these button amounts.
  11. Button Code is used for tracking donations made through this online form. It must be a unique four-character code.

Comments Closed