Cart button implementation

You can also review steps in YouTube here!

Placing the GovX ID button at the bottom of your cart ensures the military discount offer gets maximum visibility on your site. We've made the install process as easy as the click of a button. That means you never have to edit the code of your store theme.

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

To enable the button, simply navigate to the Deploy section of the GovX ID app in your store admin and click the big purple "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.

Manually placing buttons

When you enable the button, we'll dynamically insert the button when the page loads. In most cases, this will look great! However, if you want to fine-tune the placement, you can also manually place the button tag in a custom location on your cart (or other pages). 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.