Coding payment icons and text in Sense theme

Store Design
1

Hi! I want to code two things on my website, that uses Shopify’s Sense theme. My website is osenza.de

The first thing I want to code, under my add to cart button, are payment icons. You can activate them to show in the footer, but I would like them under my add to cart button. I want the credit card (mastercard, visa, AMEX), PayPal, and Klarna icons to show.

Then, under those payment icons (and above my product description), I would like to code a specific text in the color red:

Update: Aufgrund der hohen Nachfrage nach diesem Produkt ist der Bestand derzeit sehr begrenzt!

^The text in the color RED, and the words ‘‘Update’’ and ‘‘sehr begrenzt’’ in BOLD if possible.

Can anyone help me with how/where I can code this?

2

Hello @osenza

This will need some liquid code changes. Would you please take help from a developer to help you setup in your store as it will be tricky to find code in the files.

3

I’m pretty familiar with coding, I would just need to know which code to put in which file.

4

Hi @osenza ,

The simplest way to do the payment icons is to add a custom_liquid block in your product page.

  1. Go to Admin > Online store > Themes > Customize
  2. Go to Product > Default Product, then add block
  3. Click Custom liquid and paste the code below.

NOTE: Payment cards are based on the shop payments


              {%- for type in shop.enabled_payment_types -%}
                - {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                
              {%- endfor -%}
            

**Update:** Aufgrund der hohen Nachfrage nach diesem Produkt ist der Bestand derzeit **sehr begrenzt**!
5

Thanks so much, that is perfect! Just one little thing, the payment icons are not centered. Do you know of a small change in the code that I can make to have them centered? You can check here what I mean: https://osenza.de/products/deltamattress-kompakt-komfortabel

6

@made4Uo ^

1 Like
7

Hi @osenza ,

  1. Go to Admin > Online store > Themes > Actions > Edit code
  2. Go to Asset folder, and open the base.css file
  3. Add the code below.

To center it inside the container, you can use the code below.

ul.list.list-payment {
    justify-content: center;
}

To have it align to left, you can use the code below.

ul.list.list-payment {
    justify-content: flex-start;
}
1 Like
8

@made4Uo

Some excellent code there!

giphy

1 Like