Add a payment icon or image inside the Collapsible Row ( Shopify Impact Theme )

Store Design
, , , , , , ,

Topic summary

A user wants to add payment icons inside a Collapsible Row component on their Shopify Impact theme product page, where currently only text input is available.

Two solutions were provided:

  1. Custom JavaScript approach (theycallmemakka): Add a script to theme.liquid just before the closing </body> tag that programmatically inserts payment icons into the collapsible row.

  2. Liquid code approach (MR115_ShopiDevs): Edit main-product.liquid and insert Liquid code that loops through shop.enabled_payment_types to render payment icons using the payment_type_svg_tag filter.

Both solutions involve editing theme code files through the Shopify admin’s “Edit Code” section. The user included reference images showing their current setup and desired outcome with payment icons displayed.

Status: Two potential solutions offered; awaiting user feedback on implementation.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello Everyone!

I want to add a payment icon or image inside the Collapsible Row on the product page. I don’t see the option to add a payment icon here, I only see the option to add text. Please help me. Thank you.

https://2fs5oaq1iizkjx86-60604383299.shopifypreview.com

Password: Admin

Now

Mushroom-Coffee-with-6-Adaptogenic-Mushrooms-04-07-2025_09_18_AM.png
Mushroom-Coffee-with-6-Adaptogenic-Mushrooms-04-07-2025_09_18_AM.png826×216 6.48 KB

I want to have the payment icon exactly like this

Hears-Earplugs-Jet-Black-04-07-2025_09_17_AM.png
Hears-Earplugs-Jet-Black-04-07-2025_09_17_AM.png828×198 14.6 KB

2

Hi @dreamtechzone_5 ,

I have created custom script to add icons to the product page. Please follow below steps and let me know your feedback.

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code just above tag 

{% if product %}

{% endif %}

theycallmemakka_0-1744000473618.png
theycallmemakka_0-1744000473618.png1745×548 70.4 KB

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

3

You can add Payment Icons manually collapsible Row on your Shopify product page by editing your product Liquid code.

  1. Go to Online Store > Themes
  2. Click … (three dots) next to your theme and select Edit Code
  3. Locate the file main-product.liquid
  4. Insert the following code (product Liquid code) where you want the payment icons to appear:
  5. Save the changes and check if the icons appear on your store.

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

Please do not hesitate to reach out to us in the future if you have any further questions or concerns regarding the issue.

I hope this answer will be helpful