Adding the Gipht Button Code Manually

In some circumstances, it might be nessesary to add the Gipht code manually to the Shopify theme’s .liquid files. The process is usually very simple:

Open your theme’s code editor from your Shopify Admin by navigating to Online Store → Themes and select the “edit code” option for the current theme (or select one from the theme library).
The next step is to locate the cart or product .liquid file containing the existing checkout button code. This location varies from theme to theme, so it might take some time locating it. For many themes, they will be found in the cart-template.liquid and product-form.liquid files.
The final step is to insert a <gipht-button></gipht-button> HTML element tag pair at the location in the .liquid file where you want the button to appear.

Button Code

The Gipht button can be inserted anywhere on the product or cart page, but normally it’s best to place it under the existing buttons.

Here are some snippets of the Gipht button with the supported properties.

<gipht-button
  button-text="Send gift with email"
  button-class="gipht-inner-button"
  page-location="product">
</gipht-button>

Here’s a list of the supported properties:

button-text This can be set to change the text of the button. By default its “Send gift with email”

button-class This can be used to set the CSS style class.

page-location This can be set to force the button to behave as if it’s on a product page (the app will find the current product and create an order with that product) or the cart page (the app will create an order with all items in the customer’s shopping cart). It is rarely needed to set this because the app has logic to handle this automatically. One use case is if the button is on a cart slide-out or mini cart and not the actual /cart page.

Button Styling

It's often tricky getting the button to behave and re-size in a way that fits the theme and regular check out button. In some cases it's helpful to add or override some of the element's styles. This is an example that adds a gipht-adjust class to make the button fill the width of its parent container, add 10 pixels of space on top to separate it from the check out button above, and use the same button radius as the other checkout buttons.

<style>
  .gipht-adjust {
    width: 100%;
    margin-top: 10px;
    border-radius: var(--buttons-radius-outset);
  }
</style>
<gipht-button
  button-class="gipht-inner-button gipht-adjust">
</gipht-button>

Button Code

Button Styling

Examples