Add icon with text section above the add to cart button (Testament Theme)

Store Design
, , , , ,

Topic summary

Goal: add an icon-with-text info block above the Add to Cart button on a product page in the Testament theme.

Implementation (Customizer-based):

  • Product template > Add block > Custom liquid.
  • Paste HTML/CSS for a flex container with an icon image and a bullet list of store assurances.
  • Drag the block above the Buy buttons and save.
  • To change icon color, replace the image src with an icon file in the desired color (not via CSS color on the provided SVG/PNG).

Refinements after feedback:

  • Reduced overall size via CSS: smaller font-size, tighter padding, max-width adjustments.
  • Desktop: set the image to ~30% width; kept list on the right to minimize wrapping.
  • Mobile: allowed 100% width for the block; advised against making the icon as large as the text list, as it causes excessive wrapping and layout issues.

Open/closed status:

  • Resolved. The updated desktop CSS achieved the desired appearance; user confirmed it “looks good now.”

Notes:

  • Screenshots were central to showing layout/size issues and the final result.
Summarized with AI on December 29. AI used: gpt-5.
3

Hi @dreamtechzone_5

Hope the following instructions can help you:

- Step 1: First, navigate to Theme => Customize => Select “Product” page:

view.png
view.png1431×966 177 KB

- Step 2: Second, on the left sidebar, under Template → Product Page, click “Add block” and choose “Custom liquid”

view.png
view.png926×964 232 KB

- Then, a block will appear on the right side.

view.png
view.png1873×967 228 KB

- Step 3: Third, paste the following code into this block:


   
![Image|22x22](upload://yzj0sVi9U6nlNbuP2tg4O7B2dlO.svg)

   

      - Accepting Payments Worldwide.

      - Shipping Worldwide.

      - Currencies are seamlessly converted to Philippine Pesos (₱) at checkout.

      - We ensure secure transactions and safe delivery of your orders.
  • You can modify the image by changing the “src” attribute of the image tag, as well as the text.
  • Don’t forget to click “Save” to apply your changes.

- Step 4: Fourth, drag the block you just created to position it right above the ‘Buy buttons’ as illustrated in the following image:

view.png
view.png303×564 18 KB

- Step 5: Finally, save change and see what happend.

  • The result can look like:

view.png
view.png1859×965 147 KB

I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.

Have a nice day sir!

1 Like