Tutorial: How to add a custom logo to footer payments

Here are the steps required when adding a custom payment logo to your footer. 

Step 1

Create a .PNG version of the logo image

Step 2

Upload the logo to your files folder:

https://shopify.com/admin/settings/files

You'll need the URL of the image you've uploaded. 

Example:

The image url you'll need:

https://cdn.shopify.com/s/files/1/1885/8865/files/sofort_payment_logo.png?17240834815496721008

Step 3

Edit the snippets/footer.liquid file:

sections/footer.liquid

Around line 96 or 99 depending on your version of Pipeline, look for the line that has:

</ul>

Example:

Add a blank line before before that line - You'll be adding a line of code above "</ul>" line.

Example:

Step 4

Add a line of code to display your image with a custom class. The code follows this format:

<li><img class="payment_logo-brandname" src="https://cdn.shopify.com/s/files/1/1885/8865/files/sofort_payment_logo.png?17240834815496721008"></li>

Example:

Code breakdown:

Start with the list item:

<li>

Add the start of your HTML image tag:

<img

Add a class to style your image. Use a unique name for each logo.

class="payment_logo-brandname"

For this example, let's change the class from payment_logo-brandname to payment_logo-sofort

class="payment_logo-sofort"

Add the image url source from Step 2:

src="https://cdn.shopify.com/s/files/1/1885/8865/files/sofort_payment_logo.png?17240834815496721008"

Close out the html image tag and close out the list item tag:

></li>

Final completed version:

<li><img class="payment_logo-sofort" src="https://cdn.shopify.com/s/files/1/1885/8865/files/sofort_payment_logo.png?17240834815496721008"></li>

Save the file.

Step 5

The logo will appear in your footer now but may seem very large depending on the size of the logo you uploaded:

To adjust the sizing, we will now use the class that was applied and add some CSS code to style it.

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

Or if you're using Pipeline 4:  
assets/theme.scss.liquid

Code format to use:

.payment_logo-brandname { 
	width: 60px;
}

For this tutorial example, we'll use the class .payment_logo-sofort

/* -- code to style payment logo for sofort -- */
.payment_logo-sofort { 
	width: 60px;
}
/* -- end -- */

Save the file.

That results in:

Notes

Adjust the value of 60px to your preference. 

If you'd like to make the logo grayscale

You can add this line of code:

filter: grayscale(100%);

Example:

/* -- code to style payment logo for sofort -- */
.payment_logo-sofort { 
	width: 60px;
  	filter: grayscale(100%);
}
/* -- end -- */

Ideally, you'll want to use a logo that works with the background color of your footer. Check with the payment company for logo options. Most of them will have variations that will work on white or dark background colors.