Top

Add a Logo to Cashier's Checkout

Pro Tip

Bold recommends uploading the logo image you wish to use with Cashier to your Shopify admin before proceeding with this guide. Remember to copy and paste the URL, that your Shopify "Files" page generates, into a notepad for use later in this guide.

Cashier displays your store's name information when your customers go to confirm their order.

Here's how to add a custom logo to Cashier:

    1. From "Shopify Admin", select Apps.

      select apps

    2. Select Bold Cashier.

      select cashier

    3. Select SETTINGS.

      select settings

    4. Select General Settings.

      select general settings

    5. Under "Appearance" select the Custom CSS box.

      select custom css

    6. Copy and paste this code into the "Custom CSS" box:
      /* Logo */
      .Logo {
        text-indent: -9999px;
        display: inline-block;
        width: XXXpx;
        height: YYYpx; 
        margin-bottom: 15px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(https://www.mystore.com/logo.png)
      }
      

      custom css code

    7. Edit the "width" and "height" fields to match the current size of your uploaded logo.

      height and width adjust

      Note: Bold recommends that the height of your logo be no more than 100px to ensure it displays attractively within Cashier.

    8. Paste the logo's URL, from your Shopify "Files" page, into the "background-image" field.

      background image url

      Note: The URL produced by your Shopify "Files" page should read something like "https://cdn.shopify.com/s/files/1/1000/0100/files/yourstoreslogo.png"

    9. Select Save underneath the "Custom CSS" box

      select save

That's it!

Next Steps:

Blog Posts: