Is it simple to replace a .svg file? Email subscribe button is just icon now but text preferred.

[Cryyos]

I am attempting to replace the .svg icon that serves as the "subscribe" button for my email list. I have identified the icon with inspect element, super impressive I know, but I'm not sure where to go from here. 

I looked through my theme.liquid as well as newsletter.liquid but can't seem to find the lines of code I actually need to modify. 

Is this a simple change or more complicated than I'm thinking? I just want to change the icon to a button that says "Submit". 

Website is Stimagz.com

[Uhrick]

Hey Cryyos, good evening.

I don't know exactly the theme that you are using, but if the newsletter.liquid file doesn't have the svg tag in itself, there is probably a snippet, with 'icon' in the name, or something like that. The way it looks is something like 

{% render 'theme-icons' %}

let me know if you find something like that or try sending the area of the newsletter file that the icon should be, if you find it

[Cryyos]

Hello Uhrick, thank you for your response and being willing to take a look at the code. I didn't see any mention of the word "icon" in the newsletter.liquid file, but I may have missed it. The section code is attached below.

<div class="index-section index-section--alt newsletter-section newsletter-{{ section.id }}" data-aos>
  <div class="page-width text-center">
    {%- for block in section.blocks -%}
      <div class="theme-block" {{ block.shopify_attributes }}>
        {%- case block.type -%}
          {%- when '@app' -%}
            {% render block %}
          {%- when 'title' -%}
            {%- if block.settings.title != blank -%}
              <div class="h2 appear-delay" {{ block.shopify_attributes }}>
                {{ block.settings.title }}
              </div>
            {%- endif -%}
          {%- when 'text' -%}
            {%- if block.settings.text != blank -%}
              <div class="rte rte--block appear-delay-1" {{ block.shopify_attributes }}>
                {{ block.settings.text }}
              </div>
            {%- endif -%}
          {%- when 'form' -%}
            <div class="appear-delay-2" {{ block.shopify_attributes }}>
              {%- render 'newsletter-form', section_id: section.id, snippet_context: 'section' -%}
            </div>
          {%- when 'share_buttons' -%}
            {%- render 'social-sharing' -%}
        {%- endcase -%}
      </div>
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.newsletter.name",
  "max_blocks": 6,
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "title",
      "name": "t:sections.newsletter.blocks.title.name",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.newsletter.blocks.title.settings.title.label",
          "default": "Sign up and save"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.newsletter.blocks.text.name",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "t:sections.newsletter.blocks.text.settings.text.label",
          "default": "<p>Let customers know about the key benefits of joining your newsletter.</p>"
        }
      ]
    },
    {
      "type": "form",
      "name": "t:sections.newsletter.blocks.form.name",
      "limit": 1
    },
    {
      "type": "share_buttons",
      "name": "t:sections.newsletter.blocks.share_buttons.name",
      "limit": 1
    }
  ],
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.newsletter.settings.content"
    }
  ],
  "presets": [
    {
      "name": "t:sections.newsletter.presets.email_signup.name",
      "blocks": [
        {
          "type": "title"
        },
        {
          "type": "text"
        },
        {
          "type": "form"
        }
      ]
    }
  ]
}
{% endschema %}

[Uhrick]

Hey, Cryyos. 

From that code, I'm seeing that we need to see the 'newsletter-form.liquid' file. It's probably inside that snippet

[Cryyos]

You got it! Here's the code. Thank you for your quick response! You're really helping me out here 🙂

{%- assign newsletter_form_id = 'newsletter-' | append: section_id -%}
{% form 'customer', id: newsletter_form_id %}
  {%- if form.posted_successfully? -%}
    <div class="note note--success">
      {{ 'general.newsletter_form.newsletter_confirmation' | t }}
    </div>
  {%- endif -%}
  {%- if form.errors and form.context == snippet_context -%}
    {{ form.errors | default_errors }}
  {%- endif -%}

  {%- unless form.posted_successfully? -%}
    <label for="Email-{{ section_id }}" class="hidden-label">
      {{ 'general.newsletter_form.newsletter_email' | t }}
    </label>
    <input type="hidden" name="contact[tags]" value="prospect,newsletter">
    <input type="hidden" name="contact[context]" value="{{ snippet_context }}">
    <div class="newsletter-form-group">
      <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email-{{ section.id }}" class="newsletter-form-group__input" autocapitalize="off">
      <button type="submit" class="newsletter-form-group__submit" name="commit" title="{{ 'general.newsletter_form.submit' | t }}">
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-email" viewBox="0 0 64 64"><path d="M63 52H1V12h62zM1 12l25.68 24h9.72L63 12M21.82 31.68L1.56 51.16m60.78.78L41.27 31.68"/></svg>
      </button>
    </div>
  {%- endunless -%}
{% endform %}

[kstar]

@Cryyos  I noticed on your website you had solved this problem. Could you share how you did it? I would also like to do this and I'm using the same theme as you 🙂

[KetanKumar]

@kstar 

yes, please share store url

[Cryyos]

Hey there, sorry I ended up just hiring someone to take care of it for me so I'm not exactly sure how he did it. Cost $45 but I had him take care of a few other things as well so you could probably get it done for cheaper. 

He did great work here's his link: https://www.upwork.com/freelancers/~01ce09ba494e708c6a

[Uhrick]

Hey @Cryyos 

Glad you could solve your issues smoothly

And sure, for small things like what you might have needed I could possibly do an affordable price. Please, feel free to contact me if any future work is necessary.

[Uhrick · Accepted solution]

hey, @Cryyos , I'm so sorry, I missed the notification and didn't see your response. But glad that you could solve the issue.

@kstar , if your theme is the same as Cryyos', if you notice, in the newsletter-form file that was sent, there is a

<button type="submit" class="newsletter-form-group__submit" name="commit" title="{{ 'general.newsletter_form.submit' | t }}">
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-email" viewBox="0 0 64 64"><path d="M63 52H1V12h62zM1 12l25.68 24h9.72L63 12M21.82 31.68L1.56 51.16m60.78.78L41.27 31.68"/></svg>
      </button>

just replace it with 

<button type="submit" class="newsletter-form-group__submit" name="commit" title="{{ 'general.newsletter_form.submit' | t }}">
        Submit
      </button>

[Cryyos]

No worries, for some reason the thread got flagged and frozen by Shopify for a few days so I don't think my reply actually posted until 3 ish days after our last messages. 

[KetanKumar]

@Cryyos 

yes, please share newsletter-section code so i will check and update

[Cryyos]

Ketan, thank you for being willing to take a look at the code for newsletter.liquid. It is attached below:

<div class="index-section index-section--alt newsletter-section newsletter-{{ section.id }}" data-aos>
  <div class="page-width text-center">
    {%- for block in section.blocks -%}
      <div class="theme-block" {{ block.shopify_attributes }}>
        {%- case block.type -%}
          {%- when '@app' -%}
            {% render block %}
          {%- when 'title' -%}
            {%- if block.settings.title != blank -%}
              <div class="h2 appear-delay" {{ block.shopify_attributes }}>
                {{ block.settings.title }}
              </div>
            {%- endif -%}
          {%- when 'text' -%}
            {%- if block.settings.text != blank -%}
              <div class="rte rte--block appear-delay-1" {{ block.shopify_attributes }}>
                {{ block.settings.text }}
              </div>
            {%- endif -%}
          {%- when 'form' -%}
            <div class="appear-delay-2" {{ block.shopify_attributes }}>
              {%- render 'newsletter-form', section_id: section.id, snippet_context: 'section' -%}
            </div>
          {%- when 'share_buttons' -%}
            {%- render 'social-sharing' -%}
        {%- endcase -%}
      </div>
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.newsletter.name",
  "max_blocks": 6,
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "title",
      "name": "t:sections.newsletter.blocks.title.name",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.newsletter.blocks.title.settings.title.label",
          "default": "Sign up and save"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.newsletter.blocks.text.name",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "t:sections.newsletter.blocks.text.settings.text.label",
          "default": "<p>Let customers know about the key benefits of joining your newsletter.</p>"
        }
      ]
    },
    {
      "type": "form",
      "name": "t:sections.newsletter.blocks.form.name",
      "limit": 1
    },
    {
      "type": "share_buttons",
      "name": "t:sections.newsletter.blocks.share_buttons.name",
      "limit": 1
    }
  ],
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.newsletter.settings.content"
    }
  ],
  "presets": [
    {
      "name": "t:sections.newsletter.presets.email_signup.name",
      "blocks": [
        {
          "type": "title"
        },
        {
          "type": "text"
        },
        {
          "type": "form"
        }
      ]
    }
  ]
}
{% endschema %}