Shopify Self-Install Troubleshooting FAQ

Follow

Q: Where do I place the Route div code?

The Route div code, <div class="route-div"></div>, should go directly above the checkout option(s) on your website. For exact steps, see videos 3 and 4 in the video guide.

The following sections outline common Route+ asset styling solutions. Use the steps outlined in the applicable section to fix the Route+ asset styling.

Q: What if the Route+ asset is too far to the left/right?

When the Route+ asset is implemented on your site, it might appear too far to the left or right. The Route+ asset should appear above the checkout button.

mceclip1.png

 

If the Route+ asset is appearing to the left or right of the checkout, follow these steps to fix the alignment of the Route+ asset:

  1. In Shopify, go to the Online Store > Themes.
  2. In the Theme library, find the Route Test theme and click Actions Edit codePreview_Test_Theme_Gif.gif
  3. In the new page, click on the Sections folder and open the applicable file for the checkout option.
    mceclip0.png
  4. Use Ctrl + F to search for the Route div code: <div class="route-div"></div>.mceclip0.png
  5. Copy and paste the following options depending on the alignment issue:
    • desktop-align="right" - will move the Route+ asset to the right of the page
    • desktop-align="left" - will move the Route+ asset to the left of the page
    • desktop-align="center" - will move the Route+ asset to the center of the page
  6. For example, if the Route+ asset is showing to the left of the checkout, add desktop-align="right" to the div code.Desktop_align_right_2.gif
  7.  Click Save at the top right.
    mceclip18.png
  8. Open the Preview in Google Chrome's incognito mode and test the checkout to see if the Route+ asset appears in the designated checkout location. The Route+ asset should then be pushed to the right and located above the checkout button.

Q: What if the dark background makes the Route+ asset less visible?

When the Route+ asset is implemented on a website or checkout option with a dark background, it may not be clearly visible to your customers. 

mceclip0.png

To resolve this, you can use the "dark-ui prop". 

Follow these steps to fix the issue: 

  1. In Shopify, go to the Online Store > Themes.
  2. In the Theme library, find the Route Test theme and click Actions Edit codePreview_Test_Theme_Gif.gif
  3. In the new page, click on the Sections folder and open the applicable file for the checkout option.
    mceclip0.png
  4. Use Ctrl + F to search for the Route div code: <div class="route-div"></div>.mceclip0.png
  5. Add the dark-ui code. It should look like <div class="route-div" dark-ui></div>.Dark_ui.gif
  6. Click Save. 
  7. Open the Preview in Google Chrome's incognito mode and test the checkout to see if the Route+ asset is showing with white font color and fully visible.

Q: What if there is too much white space between the Route+ asset and the checkout option?

When the Route+ asset is implemented on a website or checkout option with too much white space, you can increase or decrease the margins between the Route+ asset and the elements around it.

For example: In the screenshot below, there is unnecessary space between the Route+ asset and the checkout option below it.

mceclip1.png

 

If the Route+ asset has large margins and too much white space between the elements around it, follow these steps to fix the margins:

  1. In Shopify, go to the Online Store > Themes.
  2. In the Theme library, find the Route Test theme and click Actions Edit codePreview_Test_Theme_Gif.gif
  3. In the new page, click on the Sections folder and open the applicable file for the checkout option.
    mceclip0.png
  4. Use Ctrl + F to search for the Route div code: <div class="route-div"></div>.mceclip0.png
  5. Use the following options depending on where you need to adjust the margins–above, below, to the left, or to the right of the Route+ asset:

    Note: The number associate with px (EX: 30px) can be any number depending on the amount of space/margins you are increasing or decreasing.
    • Changing the margins below the Route+ asset
      • style="margin-bottom: -30px;" to decrease margins/white space
      • style="margin-bottom: 30px;" to increase margins/white space
    • Changing the margins above the Route+ asset
      • style="margin-top: -30px;" to decrease margins/white space
      • style="margin-top: 30px;" to increase margins/white space
    • Changing the margins to the left of the Route+ asset
      • style="margin-left: -30px;" to decrease margins/white space
      • style="margin-left: 30px;" to increase margins/white space
    • Changing the margins to the right of the Route+ asset
      • style="margin-right: -30px;" to decrease margins/white space
      • style="margin-right: 30px;" to increase margins/white space
  6. For example, if the Route+ asset is showing with too much white space between it and the checkout, use: <div class="route-div" style="margin-bottom: -30px;"></div>. This will decrease the extra space below the Route+ asset.mceclip2.png
  7.  Click Save at the top right.
    mceclip18.png
  8. Open the Preview in Google Chrome's incognito mode and test the checkout to see if the Route+ asset no longer has extra white space. 
    mceclip4.png