How can i replace the learn more button with a jpg button as a picture?

[rubi06]

How can i replace the learn more button with a jpg button as a picture?

www.soothetech.shop

[Guleria]

Hello @rubi06 ,

To change the text with an image.
Edit button code and replace the text part ‘learn more’ with image element.

e.g

<img src=”your image path” alt=”alt-text” >

Regards
Guleria

[oscprofessional]

@rubi06

How can i replace the learn more button with a jpg button as a picture?

Hi @rubi06 ,
You can replace the “Learn more” button with a JPG image button using a small change in the section code.

1. Upload the JPG

• Go to Online Store → Themes → Edit code
• Open Assets
• Click Add a new asset
• Upload your JPG (example: learn-more.jpg)

2. Replace the button code

Find the button in that section. It will look similar to:

<a href="{{ section.settings.button_link }}" class="button">
  {{ section.settings.button_label }}
</a>

Replace it with:

<a href="{{ section.settings.button_link }}">
  <img src="{{ 'learn-more.jpg' | asset_url }}" alt="Learn more" class="learn-more-img">
</a>

Optional: control size

Add to your CSS file:

.learn-more-img {
  max-width: 200px;
  height: auto;
}

[rubi06]

@oscprofessional

Upload your JPG (example: learn-more.jpg)

how to " Upload your JPG (example: learn-more.jpg)" ?

[oscprofessional]

You can upload the JPG to your theme assets in a few steps:

1. Go to Shopify Admin → Online Store → Themes
2. Click … (three dots) → Edit code
3. In the left sidebar, open the Assets folder
4. Click Add a new asset
5. Select your JPG file and upload it
6. Click Upload asset

[rubi06]

@oscprofessional

Upload asset

Do you have another solution ?

[Nordalux]

It is not recommended to host such content outside of Shopify, if only because of loading times.

You can upload everything under Content > Files, and it will then be stored on Shopify’s CDN.