HELP NEEDED!! Testimonial Icons Swap? Any Help Will Be Appreciated!

TumaDor
Excursionist
13 2 2

Hi Shopify Community, 

I was attempting to replace the icons in the testimonials section, and ran into an issue of the image size being restricted. The default icons are quotation marks and stars, so I was trying to upload my own image instead.

TumaDor_0-1632376112395.png

TumaDor_1-1632376112408.png

 

I tried to make the background-size as small as possible, and made sure the image had the same px, but the issue was still there. Lastly, if needed, this is the code I edited to try to upload the image: Many thanks !!

 

{%- if block.settings.icon == 'quote' -%}
                <span class="quote-icon"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-quote" viewBox="0 0 41 35"><path d="M10.208 17.711h6.124v16.332H0V21.684C0 8.184 5.444.956 16.332 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766zm24.498 0h6.124v16.332H24.498V21.684C24.498 8.184 29.942.956 40.83 0v6.125c-4.083 1.14-6.124 4.414-6.124 9.82v1.766z" fill="#000" fill-rule="evenodd"/></svg></span>
              {%- elsif block.settings.icon == '5-stars' -%}
                <span class="testimonial-stars">★★★★★</span>
              {%- elsif block.settings.icon == '4-stars' -%}
                <span class="testimonial-stars"><u+200e></span>
              {%- elsif block.settings.icon == '3-stars' -%}
                <span class="testimonial-stars">★★★</span>
              {%- elsif block.settings.icon == '2-stars' -%}
                <span class="testimonial-stars">★★</span>
              {%- elsif block.settings.icon == '1-star' -%}
                <span class="testimonial-stars">★</span>
              {%- endif -%}

 

 

Replies 6 (6)

oscprofessional
Shopify Partner
15830 2369 3071

@TumaDor ,

Hello,
Welcome to the Shopify community!
Share your store url with password.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
TumaDor
Excursionist
13 2 2

Hi, thanks for responding! Here is the info you requested:

Store URL:

zurainelx.myshopify.com

Password:

ilyaga

oscprofessional
Shopify Partner
15830 2369 3071

Hi @TumaDor ,

See screenshot, like this you want ?

oscprofessional_0-1632392956936.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
TumaDor
Excursionist
13 2 2

Yes, that is what I am looking for. Just for the flag to not have a restricted size like the current one shows on the store. I can't see the flag icon too well, but as long as it's the full image, perfect 

oscprofessional
Shopify Partner
15830 2369 3071

@TumaDor ,

If you reduce the size then image quality will destroy. create new image with small size in HD quality.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15830 2369 3071

@TumaDor ,

I have adjusted this size only

oscprofessional_0-1632396022738.png

try to decrease it.. 30 to 35

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing