Adding Gift Card Support to the Customer Account Page : Support

This guide will help you to add gift card support to your customer's account page.

By default, no changes to your design are required to allow for your customers to redeem gift cards on your checkout page. For information on this, check out our help article on how to Redeem a Gift Card.

However, for existing customers, you can easily add the ability for them to redeem gift cards from the customer "My Account" page by adding a single snippet to /html/customer/account.html:

{{ customer_helper.show_gift_card_info(btn_class="btn-large btn-primary") }}

Placing this snippet on the page will, by default, show the customer's gift card balance and will add a button for customers to press which brings up a modal for customers to enter their gift card code.

Depending on the design you have installed, we recommend adding the following:

Fresh

HTML

Replace lines 12-18 (The headline section) with:

<section class="headline account"> <!-- Begin headline -->
  <div class="row content">
    <div class="col-lg-4">
      <h2>Update your information</h2>
    </div>
    <div class="col-lg-8">
      {{ customer_helper.show_gift_card_info(btn_class="btn-primary") }}
    </div>
  </div>
</section> <!-- End headline -->

CSS

Add the following CSS:

.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_page_body}};
  border-radius: 3px;
}

.gift-card-container .gift-card-balance {
  display: none;
}

.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}

.gift-card-container .gift-card-cta #gift-card-redeem {
  margin-top: 0;
}

.btn.gift-card-modal-submit {
   background-color: {{ settings.color_button_primary_color}};
   color: {{settings.color_button_primary_font}};
   border: none;
   font-family: {{settings.face_button_primary}};
}

.btn.gift-card-modal-submit:hover {
   background-color: {{settings.color_button_primary_hover}};
   color: {{settings.color_button_primary_font_hover}};
}

Cargo

HTML

Replace lines 12-18 (The headline section) with:

<section class="headline account"> <!-- Begin headline -->
  <div class="row content">
    <div class="col-lg-4">
      <h2>Update your information</h2>
    </div>
    <div class="col-lg-8">
      {{ customer_helper.show_gift_card_info(btn_class="btn-large btn-primary") }}
    </div>
  </div>
</section> <!-- End headline -->

CSS

Add the following CSS:

.headline.account h2 {
  font-size: 24px;
  margin-top: 10px;
}

.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_page_body}};
  border-radius: 3px;
}

.gift-card-container .gift-card-balance {
  display: none;
}

.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}

Parcel

HTML

Replace lines 12-18 (The headline section) with:

<section class="headline account"> <!-- Begin headline -->
  <div class="row content">
    <div class="col-lg-4">
      <h2>Update your information</h2>
    </div>
    <div class="col-lg-8">
      {{ customer_helper.show_gift_card_info(btn_class="btn-large btn-primary") }}
    </div>
  </div>
</section> <!-- End headline -->

CSS

Add the following CSS:

.headline.account h2 {
  font-size: 24px;
  margin-top: 10px;
}

.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_page_body}};
  border-radius: 3px;
}

.gift-card-container .gift-card-balance {
  display: none;
}

.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}

Delight

HTML

Replace lines 12-18 (The headline section) with:

<section class="headline account"> <!-- Begin headline -->
  <div class="row content">
    <div class="col-lg-4">
      <h2>Update your information</h2>
    </div>
    <div class="col-lg-8">
      {{ customer_helper.show_gift_card_info(btn_class="btn-large btn-primary") }}
    </div>
  </div>
</section> <!-- End headline -->

CSS

Add the following CSS:

.headline.account h2 {
  font-size: 24px;
  margin-top: 10px;
}

.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_page_body}};
  border-radius: 3px;
}

.gift-card-container .gift-card-balance {
  display: none;
}

.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}

Parcel

HTML

Replace lines 12-18 (The headline section) with:

<section class="headline account"> <!-- Begin headline -->
  <div class="row content">
    <div class="col-lg-4">
      <h2>Update your information</h2>
    </div>
    <div class="col-lg-8">
      {{ customer_helper.show_gift_card_info(btn_class="btn-large btn-primary") }}
    </div>
  </div>
</section> <!-- End headline -->

CSS

Add the following CSS:

.headline.account h2 {
  font-size: 24px;
  margin-top: 10px;
}

.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_page_body}};
  border-radius: 3px;
}

.gift-card-container .gift-card-balance {
  display: none;
}

.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}

Bold

HTML

Replace lines 12-18 (The headline section) with:

<div class="headline account">
  <div class="container">
    <div class="row">
      <div class="col-lg-4">
        <h2>Update your information</h2>
      </div>
      <div class="col-lg-8">
        {{ customer_helper.show_gift_card_info(btn_class="primary-button") }}
      </div>
    </div>
  </div>
</div>

CSS

Add the following CSS:

.headline.account h2 {
  font-size: 22px;
  margin-top: 20px;
}
.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_body_text}};
  border-radius: 3px;
}
.gift-card-container .gift-card-balance {
  display: none;
}
.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}
.gift-card-modal-footer .btn {
  border: 0;
}
.gift-card-modal-footer .btn-primary {
  background-color: {{settings.color_button}};
  color: {{settings.color_button_text}};
}
.gift-card-modal-footer .btn-primary:hover {
  background-color: {{settings.color_button_hover}};
}

Tasty

HTML

Replace lines 13-19 (The headline section) with:

<div class="headline account">
  <div class="container">
    <div class="row">
      <div class="col-lg-4">
        <h2>Update your information</h2>
      </div>
      <div class="col-lg-8">
        {{ customer_helper.show_gift_card_info(btn_class="primary-button") }}
      </div>
    </div>
  </div>
</div>

CSS

Add the following CSS:

.headline.account h2 {
  font-size: 22px;
  margin-top: 20px;
}
.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_body_text}};
  border-radius: 3px;
}
.gift-card-container .gift-card-balance {
  display: none;
}
.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}
.gift-card-modal-footer .btn {
  border: 0;
}
.gift-card-modal-footer .btn-primary {
  background-color: {{settings.color_button}};
  color: {{settings.color_button_text}};
}
.gift-card-modal-footer .btn-primary:hover {
  background-color: {{settings.color_button_hover}};
}

Fashion

HTML

Replace lines 13-19 (The headline section) with:

<div class="headline account">
  <div class="container">
    <div class="row">
      <div class="col-lg-4">
        <h2>Update your information</h2>
      </div>
      <div class="col-lg-8">
        {{ customer_helper.show_gift_card_info(btn_class="primary-button") }}
      </div>
    </div>
  </div>
</div>

CSS

Add the following CSS:

.headline.account h2 {
  font-size: 22px;
  margin-top: 20px;
}
.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_body_text}};
  border-radius: 3px;
}
.gift-card-container .gift-card-balance {
  display: none;
}
.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}
.gift-card-modal-footer .btn {
  border: 0;
}

Joybox Mist, Mens, or Peach

HTML

Replace lines 12-18 (The headline section) with:

<div class="headline-container">
  <div class="headline account">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">
          <h2>Update your information</h2>
        </div>
        <div class="col-lg-8">
          {{ customer_helper.show_gift_card_info(btn_class="btn-primary") }}
        </div>
      </div>
    </div>
  </div>
</div>

CSS

Add the following CSS:

.headline.account h2 {
  font-size: 20px;
}
.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_button}};
  border-radius: 3px;
}
.gift-card-container .gift-card-balance {
  display: none;
}
.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}
.gift-card-modal-footer .gift-card-modal-close.btn-default {
  color: {{settings.color_button}};
}
.gift-card-modal-footer .gift-card-modal-close.btn-default:hover {
  background-color: {{settings.color_button_text}};
}

Joybox Digital

HTML

Replace lines 12-18 (The headline section) with:

<div class="headline-container">
  <div class="headline account">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">
          <h2>Update your information</h2>
        </div>
        <div class="col-lg-8">
          {{ customer_helper.show_gift_card_info(btn_class="btn-primary") }}
        </div>
      </div>
    </div>
  </div>
</div>

CSS

Add the following CSS:

.headline.account h2 {
  font-size: 20px;
}
.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_button}};
  border-radius: 3px;
}
.gift-card-container .gift-card-balance {
  display: none;
}
.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}

Betterman

HTML

Replace lines 12-18 (The headline section) with:

<section class="headline account"> <!-- Begin headline -->
  <div class="container">
    <div class="row content">
      <div class="col-lg-4">
        <h2>Update your information</h2>
      </div>
      <div class="col-lg-8">
        {{ customer_helper.show_gift_card_info(btn_class="btn-large btn-primary") }}
      </div>
    </div>
  </div>
</section> <!-- End headline -->

CSS

Add the following CSS:

.headline.account h2 {
  font-size: 24px;
  margin-top: 10px;
}
.gift-card-container.gift-card-balance-container {
  padding: 5px;
  border: 1px solid {{settings.color_primary}};
  border-radius: 3px;
}
.gift-card-container .gift-card-balance {
  display: none;
}
.gift-card-container.gift-card-balance-container .gift-card-balance {
  display: block;
}

Please contact Cratejoy Support with any questions you might have!

Adding Gift Card Support to the Customer Account Page Print

Related Articles