Shopify themes, liquid, logos, and UX
hello how to design a contact us page like this in dawn theme
https://bit.ly/3Cqzd6R
any one please
can any one please help me in this
Hi @learningdesign,
Please follow these steps:
- Step 1: Upload background image in Assets. https://i.imgur.com/csVLqBr.png . Ex: name image: background.png
- Step 2: Go to layout/theme.liquid file and add code in 125 line. Refer https://i.imgur.com/HqGmfuf.png
Code:
{% if template == 'page.contact' %}
<style>
#MainContent{
background-image: url({{ 'background.png' | asset_url }});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}
Hope it helps!
its worked but image is showing double and form is not visible
Hi @learningdesign,
I checked and because you added section banner at the top it gave this error.
Please go to Customize > Pages > contact > Image banner. Just you remove this section and re-add my code, everything will display fine.
Hope it helps!
the form is also not visible clearly please check the referral link which i send
Hi @learningdesign,
I checked and can't find the code you added, you can add it again and send me the link.
I will check it.
Hi @learningdesign,
I don't understand, you want to add background color to the form? Because your request is not really clear.
This is what you want? https://i.imgur.com/9uAA9Ml.png . Please change code:
#shopify-section-template--15247764881631__form {
background-image: url({{ 'background.png' | asset_url }});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
padding: 50px 100px;
margin-top: 0px;
}
#shopify-section-template--15247764881631__form .contact{
background: #fff;
padding: 50px;
border-radius: 10px;
}
@media screen and (min-width: 750px){
#shopify-section-template--15247764881631__form {
background-attachment: scroll;
padding: 30px;
}
#shopify-section-template--15247764881631__form .contact{
padding: 20px;
margin: 0px !important;
}
}
Hope it helps!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024