Adding an image below the Add to Cart button

Add image below Add to Cart button !

Let’s say a merchant wants to add icons below his Add to Cart button showing which payment options are available to use:

The most reliable way to attach this to the product page for each product is to add the image to the theme itself and include it where you would like the image to appear.

In the Edit HTML section, open the assets folder and add a new asset. Locate your image and upload it. The image is now in your assets folder and we can use a command to make it appear on a liquid template. The syntax of that command would be:

<img src="{{ 'FILENAME.jpeg' | asset_url }}" alt="alttxt" >

So for example on Debut you can open product-template.liquid and find where the Add to Cart button is and add this code below:

<img src="{{ 'payment-methods.png' | asset_url }}" alt="paymentmethods" >

This is what is would look like within product-template.liquid:

And the output would look like this:

Changing the colour of the Add to Cart Button

One of the most popular customisations to a Shopify store is to change how an Add to Cart button appears on a product page. It's possible to change the colour of this button, or how wide it is, how tall it is, how the button is shaped, or how the the text of the button appears with CSS.

The colour of the Add to Cart button can be adjusted without changing the characteristics of any other buttons by using CSS to set a specific colour just for the Add to Cart button. You can see the selector for the Add to Cart Button by using the inspect element tool in your browser.

Read entire article.