Dashboard

Theme Integration

Charge Rabbit offers 2 different ways to integrate with your Shopify theme, Widget or Embedded.

Widget Integration

The widget is the simplest integration that requires less customization. The widget embeds charge rabbit content using a modal.

Using the Widget integration you can customize the membership product page in your shopify store by following the instructions below.

Embedded Integration

The embedded integration embeds Charge Rabbit content directly into the layout of your Shopify theme.

This provides you with the ability to fully customize your customers experience, however setting this up requires intgrating your Shopify theme by editing its html and css.

The embedded integration embeds Charge Rabbit content directly into the layout of your Shopify theme.

This provides you with the ability to fully customize your customers experience, however setting this up requires intgrating your Shopify theme by editing its html and css.

Charge Rabbit embeds customer facing pages to your Shopify store. This allows for a seamless integration between your store and Charge Rabbit, however for the best customer experience it is recommended that you integrate your shopify theme with Charge Rabbit.

Customizing the Product Page(widget and embedded integration)

Customization requires knowledge of html and css
This is viewed by the customer when they are viewing the product details of your membership product. By default it contains a product title, description, membership options and prices and a 'Join Now' button.

To customize this page

  1. Visit your shopify themes page
  2. Click Link ...
  3. Select Edit HTML/CSS
  4. Click link templates/product.charge-rabbit.liquid
  5. Make your changes and click Save

Customizing the Login or Create Account page(embedded integration only)

If a customer is not logged in when they click 'Join Now' they will be given the option to login or to create an account to continue

These links are displayed within your shopify store and the styling of them is dependent on your stores stylesheet. To customize the display of these links please add styles for the following html elements

.charge_rabbit{
  /* A wrapper for a all content added by Charge Rabbit */
}

.charge_rabbit .login_or_signup h3{
  /* Your Styling Here */
}

.charge_rabbit .login_or_signup a#login_link{
  /* Your Styling Here */
}

.charge_rabbit .login_or_signup a#signup_link{
  /* Your Styling Here */
}

Customizing the My Subscriptions Page(embedded integration only)

This is viewed by the customer when they are viewing the product details of your membership product. By default it contains a product title, description, membership options and prices and a 'Join Now' button.

The page where the customer manages their membership. From there the customer can update their card, change their shipping address or cancel their membership

The information displayed on this page is displayed within your shopify store and the styling is dependent on your stores stylesheet. To customize the display add styles for the following html elements

.charge_rabbit{
  /* A wrapper for a all content added by Charge Rabbit */
}

.charge_rabbit .subscription_info{
  /* A wrapper for all subscription info */
}

.charge_rabbit .charge-rabbit-custom-content{
  /* Wraps custom content added from your Charge Rabbit Settings */
}

.charge_rabbit .subscription_details p{
  /* Describes the current state of the subscription */
}

.charge_rabbit .subscription_details .discount_details p{
  /* Describes the current discount applied to the subscription */
}

.charge_rabbit .card_info{
  /* Wraps Credit Card Info */
}

.charge_rabbit .card_info dl dt.card-number{
  /* card number label */
}

.charge_rabbit .card_info dl dd.card-number{
  /* card number number */
}

.charge_rabbit .card_info span.no-card{
  /* Message if no card is present */
}

.charge_rabbit .address_info{
  /* Wrapper for Address display */
}

.charge_rabbit .address_info a.update-address-link{
  /* Link to update address */
}

.charge_rabbit .subscription_actions{
  /* Wrapper for link to cancel Subscription */
}

.charge_rabbit .subscription_actions a.cancel-subscription-link{
  /* Cancel Subscription Link */
}

This is viewed by the customer when they login and manage their membership by following the link added from Add A My Subscription link to the My Account Page.

Customizing the no active membership page(embedded integration only)

When a customer clicks to view/edit their membership and does not have a membership a page is displayed telling them they do not have an active plan.

This page can be edited by by editing the snippets/charge-rabbit.no-membership.liquid template in your Shopify theme

  1. Visit your shopify themes page
  2. Click Link ...
    .3 Select Edit HTML/CSS
  3. Click link snippets/charge-rabbit.no-membership.liquid
  4. Make your changes and click Save