i need help in designing contact us page

learningdesign
Shopify Partner
109 1 15

hello how to design a contact us page like this in dawn theme

https://bit.ly/3Cqzd6R

Replies 8 (8)

learningdesign
Shopify Partner
109 1 15

any one please

learningdesign
Shopify Partner
109 1 15

can any one please help me in this 

LitExtension
Shopify Partner
4860 1001 1133

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
learningdesign
Shopify Partner
109 1 15

its worked but image is showing double  and form is not visible

Capture.PNG

LitExtension
Shopify Partner
4860 1001 1133

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
learningdesign
Shopify Partner
109 1 15

the form is also not visible clearly please check the referral link which i send

LitExtension
Shopify Partner
4860 1001 1133

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
LitExtension
Shopify Partner
4860 1001 1133

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify