Sometimes, if you have a large logo uploaded via your theme settings, it can look too large in the checkout section. This is because on the actual website, the logo is formatted / resized appropriately; but in the checkout, it will appear at the exact size you upload it. (This is a Shopify limitation which we can't control.)
But never fear -- there's an easy solution. What we're going to do is upload a checkout-specific logo, then link that logo so it shows up in checkout.
***
STEP 1: Go to Admin > Themes > Template Editor. Under "Assets", find the file called "checkout.css". Please save a backup of this file before you edit it (by copying to a text file and then saving to your hard drive for example.)
STEP 2: In that file, do a ctrl+F to find the text "logo.png". Change this to say "logo-checkout.png" instead. This will change the image to a new one, that we'll upload in the next step. Save.
STEP 3: Resize your logo to the size you want it to appear in checkout. For example, if your logo is huge now, resize it to 60% (or to a specific pixel size if you prefer). Save the newly-sized logo with the filename "logo-checkout.png".
Example/recommended size: 400px wide by 100px high. It can be whatever you like, but that's a good size to work with.
STEP 4: Go back to your Shopify window (the one where you have the Template Editor open). Under "Assets", click "Add new asset". Upload your new image, the one you just created called "logo-checkout.png". Save.
***
Then, refresh your checkout page. You should now see your newly resized logo there, instead of the old (huge) one. If it's not quite right, repeat steps 3 and 4 until it's right.
Done.
0 Comments