Upload an HTML image

To add an HTML image to your WooCommerce, Shopify, Wix or custom built store/app, see the detailed instructions below:

WordPress

From the WordPress Administration panel select:
Appearance > Customise > Widgets
Select the widget area where you would like to insert the Peach Payments Logo:(in this demo it will be placed in a footer widget)
Select Browse all and scroll down to select the ‘Custom HTML Widget’
Paste the HTML code underneath this image into the ‘Custom HTML Widget’ box and then click ‘Publish’

For the black and white logo:

<a href="https://www.peachpayments.com/" target="blank" title="Get Peach as your Payment Gateway and Grow your ecommerce. Process online payments with Visa, Mastercard, Debit Orders, EFT payments, and subscriptions. Plugins for Wix, Shopify, WooCommerce."><img style="width: 90%; height: auto;" src="<Insert the URL address for your image>" alt="Peach Payments logo and company logos supported by Peach Payments South African Payment Gateway"></a>

</div>

For the colour Logo:

</div>

For the grey logo

</div>

The logo will now be displayed in the widget area you selected:

Shopify

NOTE: This guide is based on the Debut theme and will be slightly different for each theme.

To upload the image to the website file library, log into your administration panel and open ‘Settings’ in the bottom left of the screen

Open the ‘Files’ panel from the left hand menu

After downloading the .svg file of the logo in the colour you would like (the logos are attached to this support article), upload it from your computer to your Shopify store using the ‘Upload files’ button.
The uploaded logo will now appear in the files list and then you will be able to copy the logo link. Click on the chain icon to copy the link and then paste the address in a notepad or a document so that you can edit it.
To edit the link, first delete all the text that appears after .svg You will return to this later.

Now that logo has been uploaded you’ll need to implement it in the theme files. Exit the file uploader as shown below.

In your admin panel select ‘Themes’ from the left hand menu, then pull down the ‘Actions’ menu and select ‘Edit code’.
In the code editor panel you will need to expand the folder named ‘Sections’ and click on ‘footer.liquid’.
Navigate to line 128.

Move your cursor to the end of the line and hit enter to make a new line.

Copy and paste the following HTML into the line you have created (the yellow sections will be replaced in the next step)

For the black logo:
<div style="margin: 0 9.3%; text-align: center; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; justify-content: center;">

https://7856266.fs1.hubspotusercontent-na1.net/hubfs/7856266/Secured%20by%20Peach%20images/secured%20by%20peach-black.svg" alt="Peach Payments logo and company logos supported by Peach Payments South African Payment Gateway"></a>

</div>

For the colour Logo:

<a href="https://www.peachpayments.com/" target="blank" title="Get Peach as your Payment Gateway and Grow your ecommerce. Process online payments with Visa, Mastercard, Debit Orders, EFT payments, and subscriptions. Plugins for Wix, Shopify, WooCommerce."><img style="width: 90%; height: auto;" src="https://7856266.fs1.hubspotusercontent-na1.net/hubfs/7856266/Secured%20by%20Peach%20images/secured%20by%20peach-colour.svg" alt="Peach Payments logo and company logos supported by Peach Payments Sou

th African Payment Gateway"></a>

</div>

For the grey logo

</div>

Now, replace the yellow highlighted URL with the edited one from your notepad or document.
Save the file and exit.

See the changes by viewing the online store in the left-hand menu
The Peach Payments logo will now appear above the payment icons.

Wix

The payment icons and Peach Payments logo can be added to a Wix site by embedding an HTML widget.

To place the logo set in the footer (the circled area in the above diagram) follow these steps:

1. Open the website editor and click on ‘Add’ (top left) then ‘Embed’ from the menu. Then select ‘Custom embed’.

A grey block will appear. This is where the image will appear after you insert the HTML.

2. Drag this down to the bottom of the page and then click on ‘Move to footer’.

Once in the footer area, you can resize it to fit as below:

3. Click on enter code and paste the following code:

For the black logo:
<div style="margin: 0 9.3%; text-align: center; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; justify-content: center;">

</div>

For the colour Logo:

</div>

For the grey logo

</div>

4. Click update and then resize to your requirement

Custom Build (Using API or SDK)

Copy contents of txt file
Place contents within the desired location
(Optional): Place CSS within your css file or create and link one of your choosing

Please Note:

The images will scale in the proportion of the parent DIV and are already made responsive to stack on top of each other on mobile
Black, grey, white and colour logo options are available for websites as per preference

Click here for our logos

How-to load HTML Secured by Peach Payments logo to your website footer Print

To add an HTML image to your WooCommerce, Shopify, Wix or custom built store/app, see the detailed instructions below:

WordPress

Shopify

Wix

Custom Build (Using API or SDK)

Related Articles