drew_n's profile

1.4K Messages

 • 

262.9K Points

Thursday, October 3rd, 2013 7:02 PM

Closed

How do I add a credit card logo image to the website?

Uploading the credit card logo

1.
 Before starting, you will need a credit card logo to put on your site. If you do not have one of your own, you can use one of the ones below (Right-click and Save).

visa-mc-disc-amexpng

visa-mc-discpng

2. In your Bigcommerce control panel, to go Web Content › Image Manager.

3. Click Upload Images.

1412-upload-imagespng

4. Click Choose File or Browse.

1412-choose-filepng

5. Locate the image on your computer. (Hint: it often goes to the Downloads folder if you did not specify another location) Click the file and choose Open.

1412-open-filepng

6. Click Upload.

7. Your image will now be shown in the Image Manager.

1412-image-uploadedpng

Locating the image URL 1. In the Image Manager, click View Full Size under the credit card logo.

1412-view-full-sizepng

2. A new tab with just your image will open. In step 5 below, you will copy the URL by highlightingeverything after https:, including // .

1412-copy-urlpng

3. Return to your control panel.

Inserting the logo with HTML 1. Go to Design.

2. Click on the Edit HTML/CSS button.

1412-edit-htmlpng

3. Under Files used by this template in the top left, scroll to the bottom of the first list and clickfooter.html.

1412-footerpng

If you are adding this image somewhere other than the bottom of the site, you will need to choose the that file instead. For example, if you are adding it to the top of your store, you will go to header.html

4. Copy the code in the box below, and paste it into the footer.html file. You can move it later if desired

<img src="IMAGE URL GOES HERE" /> 1412-paste-codepng

5. Copy the image URL from the new tab you opened in Step 2 above. Paste it inside the quotes, where it says IMAGE URL GOES HERE.

1412-copy-urlpng

6. Save your changes.

1412-savepng

7. You will now see the redit card logo at the bottom of your store. If you want to change its location, simply edit footer.html and move the code until it is displaying as desired.

1412-storefrontpng

This conversation is no longer open for comments or replies and is no longer visible to community members.

No Responses!