Needing to change a background image on signup form

Kathandkin
Tourist
5 0 0

Hi all,

I've been trying to change the background image from the default image on the signup page. For reasons, I needed to set it up as a separate page, as well as being on the homepage as I need to be able to directly link it.

I've managed to get the code working with the signup form, but it's defaulting to the regular background icons that come with the prestige theme.

Can someone please point me in the direction that I'm going wrong here?

Link: www.kathandkin.com/pages/signup 

And here's the current code in the page.liquid:

<div class="Container">
  <header class="PageHeader">
    <div class="SectionHeader SectionHeader--center">
      <h1 class="SectionHeader__Heading Heading u-h1">{{ page.title }}</h1>
    </div>
  </header>

  <section id="section-{{ section.id }}">
  {%- capture mobile_size -%}750x{% if section.settings.image.height >= 960 %}960{% else %}{{ section.settings.image.height }}{% endif %}{%- endcapture -%}

  <div class="FlexboxIeFix">
    <div class="ImageHero {% if section.settings.section_size != 'normal' %}ImageHero--{{ section.settings.section_size }}{% endif %} ImageHero--newsletter" {% if section.settings.image %}style="background: url({{ section.settings.image | img_url: '1x1' }})"{% endif %}>
      <div class="ImageHero__ImageWrapper">
        <div class="ImageHero__Image Image--lazyLoad Image--zoomOut"
             data-optimumx="1.4"
             data-expand="-150"
             {% if section.settings.image %}data-bgset="{{ section.settings.image | img_url: mobile_size, crop: 'center' }} 750w, {{ section.settings.image | img_url: '1000x' }} 1000w, {{ section.settings.image | img_url: '1500x' }} 1500w"{% endif %}>
        </div>

        <noscript>
          <div class="ImageHero__Image" style="background-image: url "https://i.pcmag.com/imagery/reviews/03aizylUVApdyLAIku1AvRV-39.1605559903.fit_scale.size_760x427.png" | img_url: '1000x' }})"></div>
        </noscript>

        {%- unless section.settings.image != blank -%}
          <div class="PlaceholderBackground PlaceholderSvg--dark">
            {{ 'lifestyle-1' | placeholder_svg_tag: 'PlaceholderBackground__Svg' }}
          </div>
        {%- endunless -%}
      </div>

      <div class="ImageHero__ContentOverlay">
        <header class="SectionHeader SectionHeader--center">
          {%- if section.settings.subheading != blank -%}
            <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.subheading | escape }}</h3>
          {%- endif -%}

          {%- if section.settings.title != blank -%}
            <h2 class="SectionHeader__Heading Heading u-h1">{{ section.settings.title | escape }}</h2>
          {%- endif -%}

          {%- if section.settings.content != blank -%}
            <div class="SectionHeader__Description">
              {{ section.settings.content }}
            </div>
          {%- endif -%}
        </header>

        {%- assign newsletter_id = 'footer-' | append: section.id -%}

        {%- form 'customer', id: newsletter_id, class: 'Newsletter Form' -%}
          {%- if form.posted_successfully? -%}
            <p class="Form__Alert Alert Alert--success">{{ 'home_page.newsletter.success' | t }}</p>
          {%- else -%}
            {%- if form.errors -%}
              <p class="Form__Alert Alert Alert--error">{{ form.errors.messages['email'] }}</p>
            {%- endif -%}

            <div class="Newsletter__Inner">
              <input type="hidden" name="contact[tags]" value="newsletter">
              <input type="email" name="contact[email]" class="Form__Input" aria-label="{{ 'home_page.newsletter.input' | t }}" placeholder="{{ 'home_page.newsletter.input' | t }}" required>
              <button type="submit" class="Form__Submit Button Button--primary">{{ 'home_page.newsletter.submit' | t }}</button>
            </div>
          {%- endif -%}
        {%- endform -%}
      </div>
    </div>
  </div>
</section>

<style>
  #section-{{ section.id }},
  #section-{{ section.id }} .Heading {
    color: {{ section.settings.text_color }};
  }

  #section-{{ section.id }} .Form__Submit {
    border-color: {{ section.settings.text_color }};
    color: {{ section.settings.button_color }};
  }

  #section-{{ section.id }} .Form__Submit::before {
    background-color: {{ section.settings.text_color }};
  }

  @media (-moz-touch-enabled: 0), (hover: hover) {
    #section-{{ section.id }} .Form__Submit:hover {
      color: {{ section.settings.text_color }};
    }
  }
</style>

  
  </div>
</div>
0 Likes
Guleria
Shopify Partner
1776 373 527

Hello,

Replace this

{%- unless section.settings.image != blank -%}
          <div class="PlaceholderBackground PlaceholderSvg--dark">
            {{ 'lifestyle-1' | placeholder_svg_tag: 'PlaceholderBackground__Svg' }}
          </div>
        {%- endunless -%}

 

with this one

{%- unless section.settings.image != blank -%}
          <div class="PlaceholderBackground PlaceholderSvg--dark">
           <img src="Your_image_url" alt="image_alternative_text_here">
          </div>
        {%- endunless -%}

Don't forget to add img ur in src

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
Kathandkin
Tourist
5 0 0

Thank you for the response. Somethings definitely changed, I've added the image in the assets folder and changed the code as said. But now getting a broken image link.

Not sure if I've done anything wrong here:

<div class="Container">
  <header class="PageHeader">
    <div class="SectionHeader SectionHeader--center">
      <h1 class="SectionHeader__Heading Heading u-h1">{{ page.title }}</h1>
    </div>
  </header>

  <section id="section-{{ section.id }}">
  {%- capture mobile_size -%}750x{% if section.settings.image.height >= 960 %}960{% else %}{{ section.settings.image.height }}{% endif %}{%- endcapture -%}

  <div class="FlexboxIeFix">
    <div class="ImageHero {% if section.settings.section_size != 'normal' %}ImageHero--{{ section.settings.section_size }}{% endif %} ImageHero--newsletter" {% if section.settings.image %}style="background: url({{ section.settings.image | img_url: '1x1' }})"{% endif %}>
      <div class="ImageHero__ImageWrapper">
        <div class="ImageHero__Image Image--lazyLoad Image--zoomOut"
             data-optimumx="1.4"
             data-expand="-150"
             {% if section.settings.image %}data-bgset="{{ section.settings.image | img_url: mobile_size, crop: 'center' }} 750w, {{ section.settings.image | img_url: '1000x' }} 1000w, {{ section.settings.image | img_url: '1500x' }} 1500w"{% endif %}>
        </div>

        <noscript>
          <div class="ImageHero__Image" style="background-image: url "" | img_url: '1000x' }})"></div>
        </noscript>

        {%- unless section.settings.image != blank -%}
          <div class="PlaceholderBackground PlaceholderSvg--dark">
           <img src="Shopify_Image_File.png" alt="image_alternative_text_here">
          </div>
        {%- endunless -%}
      </div>

      <div class="ImageHero__ContentOverlay">
        <header class="SectionHeader SectionHeader--center">
          {%- if section.settings.subheading != blank -%}
            <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.subheading | escape }}</h3>
          {%- endif -%}

          {%- if section.settings.title != blank -%}
            <h2 class="SectionHeader__Heading Heading u-h1">{{ section.settings.title | escape }}</h2>
          {%- endif -%}

          {%- if section.settings.content != blank -%}
            <div class="SectionHeader__Description">
              {{ section.settings.content }}
            </div>
          {%- endif -%}
        </header>

        {%- assign newsletter_id = 'footer-' | append: section.id -%}

        {%- form 'customer', id: newsletter_id, class: 'Newsletter Form' -%}
          {%- if form.posted_successfully? -%}
            <p class="Form__Alert Alert Alert--success">{{ 'home_page.newsletter.success' | t }}</p>
          {%- else -%}
            {%- if form.errors -%}
              <p class="Form__Alert Alert Alert--error">{{ form.errors.messages['email'] }}</p>
            {%- endif -%}

            <div class="Newsletter__Inner">
              <input type="hidden" name="contact[tags]" value="newsletter">
              <input type="email" name="contact[email]" class="Form__Input" aria-label="{{ 'home_page.newsletter.input' | t }}" placeholder="{{ 'home_page.newsletter.input' | t }}" required>
              <button type="submit" class="Form__Submit Button Button--primary">{{ 'home_page.newsletter.submit' | t }}</button>
            </div>
          {%- endif -%}
        {%- endform -%}
      </div>
    </div>
  </div>
</section>

<style>
  #section-{{ section.id }},
  #section-{{ section.id }} .Heading {
    color: {{ section.settings.text_color }};
  }

  #section-{{ section.id }} .Form__Submit {
    border-color: {{ section.settings.text_color }};
    color: {{ section.settings.button_color }};
  }

  #section-{{ section.id }} .Form__Submit::before {
    background-color: {{ section.settings.text_color }};
  }

  @media (-moz-touch-enabled: 0), (hover: hover) {
    #section-{{ section.id }} .Form__Submit:hover {
      color: {{ section.settings.text_color }};
    }
  }
</style>

  
  </div>
</div>
0 Likes
Guleria
Shopify Partner
1776 373 527
<img src="{{  'Shopify_Image_File.png'  | asset_img_url: }}" alt="image_alternative_text_here" />
Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal
Kathandkin
Tourist
5 0 0

Once again, thank you! It is now showing the image, but really small and centered on the top. Any easy solution so the image fills the entire section at all? Thank you

0 Likes