Cart button implementation

Placing the GOVX ID button at the bottom of your cart ensures the discount offer gets maximum visibility on your site. 

There are many kinds of carts

There are many ways a cart can render based on the theme you are using. Some themes use a dedicated cart page, others use a drawer or even a pop-up. Our app integrates with all carts across all public Shopify themes (free and paid).

 

Installing the GOVX ID button

You have three options for deploying the GOVX ID button on your cart page:

1. Automatic Embed
2. App Block
3. Manual Placement

Automatic Embed

This is the fastest way to deploy and no coding is required. Just click to enable and we'll automatically place the GOVX ID button in your cart.

Navigate to the Deploy section of the GOVX ID app in your store admin and click the big "Enable" button. You'll be prompted to select the cart placements and pick a button alignment for each: left, center or right.

Cart placements

Although we give you the option to enable or disable specific placements, we recommend just leaving them all checked - even if the placement doesn't apply to your store. For example, if your store doesn't use a cart drawer and you leave the box checked, nothing will happen. 

 

 

Alignment

You typically want to align the GOVX ID button with the checkout and payment buttons on your cart page. On mobile, the GOVX ID button will always center align.

The screenshot below shows a 'right' alignment of the cart button.

 

 

If you uninstall the app and then reinstall, you may notice that the buttons don't show up automatically. In fact, you must resave your settings. Clicking the save button on the settings screen will republish the buttons.

Automatic Embed

If your theme is not playing nice with the auto-embed feature, try placing the button through your cart editor using our app block. 

To enable this in your cart:

1. Open Shopify's cart editor
2. Click "Add Block" in the template
3. Select GOVX ID from the list

You'll have the option of where to place the button, but we recommend putting it directly above the checkout button.

Need more help? Watch our step-by-step tutorial below.

 

Manual Placement

If you'd like to control the exact location of the button and neither the auto-embed or app block feature are working, you can manually paste the button tag into your theme. To do this, just copy the tag from the deployment dashboard and paste it directly into your theme.

There are two button styles for you to choose from:

Button style	Button tag
Large button	<i data-govx-id></i>
Small button	<i data-govx-id="s"></i>

 

Creating a custom button

If you want to create something completely custom, you'll need a little html knowledge. You can use the starter code below to customize the text above the button.

Large button

<div style="width:100%; display:flex; justify-content: flex-end;padding: 20px 0 !important; margin: 0 auto;">
  <div style="width: 100%;min-width: 325px;max-width: 350px;text-align: left;line-height: 1.5;padding: 15px;color: #333 !important;background-color: #fff;border: 1px solid #eee;">
     <p style="font-size: 13px;font-family: sans-serif;margin: 0 0 19.44444px;color: #333;">Your custom text goes here</p>
     <a target="popup" href="Your custom link goes here" style="width: 100%;font-size: 13px;font-family: sans-serif; border: 1px solid #ddd;background-color: #eee;padding-top: 1em;padding-bottom: 1em;text-align: center;text-decoration: none;display: inline-block;"><span style="display: flex;justify-content: center;"><img alt="govx-id-logo" style="width:114px;height:18px;" src="https://i2.govx.net/images/cdn/govx-id-new-logo-orange-black.png?t=1000" /></span></a>
     <a style="display: block;text-align: right;color: #00a1df;padding-top: 5px;border: 0; text-decoration: none;background-color: transparent;font-family: sans-serif; font-size:.7em;" href="https://www.govx.com/t/govx-id" target="_blank">What is GovX ID?</a>
  </div>
</div>

 

Small button

<div style="font-style: normal; clear: both; display: block !important; width: 100%; padding: 20px 0 !important; letter-spacing: initial; text-transform: none;">
  <span style="display: flex !important; box-sizing: border-box;">
    <a target="popup" style="display: flex; width: 100% !important; max-width: 300px; border: 1px solid #eee; color: #333 !important; background-color: white !important; flex-direction: row; padding: 10px; justify-content: flex-start; text-align: left; text-decoration: none; border-radius: 5px !important;" href="Your custom link goes here">
      <span style="display: block; flex-grow: 0; align-self: center; box-sizing: border-box; width: 50px; height: 50px;"><img alt="govx-id-logo" style="width:50px; height:50px;" src="https://i4.govx.net/images/cdn/govxid-new-logo-shopify-iapp-icon.jpg" /></span>
      <span style="display: block; flex-grow: 2; flex-wrap: wrap; align-self: center; padding-left: 15px; max-width: 400px;""><p style="color: #333; line-height: 16px; font-size: 14px; margin: 0px; font-family: sans-serif;">Your custom text goes here</p></span>
    </a>
  </span>
</div>

 

If you use the start code above, just remember to insert your real custom link and customize the text. Also, you can swap out any of the logos in the button code with our logo options here. 

Or you can get even more creative and build some completely custom just for your store.

 

Shopify Plus subscribers can place the button in checkout too!  See the video instructions here.

 

If you have any questions throughout the process, please contact us at partnersupport@govx.com.