Liquid, JavaScript, themes, sales channels
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>
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
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>
<img src="{{ 'Shopify_Image_File.png' | asset_img_url: }}" alt="image_alternative_text_here" />
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
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024