Solved

How do I make my image full size on password page (North Theme)

isaacdob
Tourist
46 0 1

I am wanting to make my image full size on my password page. Anytime I choose an image it only pulls up above the email subscribe. I am wanting my image behind the subscribe button. My website is https://evrenclothing.com/password

Accepted Solutions (2)
Dan-From-Ryviu
Shopify Partner
7820 1519 1539

This is an accepted solution.

Please try to open password.liquid file and add code before </head> tag instead of and check again. 

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
7820 1519 1539

This is an accepted solution.

If you want background display as original version then please update code to this 

<style>
.password-protected-page {
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/380805i4E0DD29959B2CC21/image-size/large?v=v2&px=400');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.password-protected-page .shopify-section div { background: transparent !important; }
</style>

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 20 (20)

Dan-From-Ryviu
Shopify Partner
7820 1519 1539

Hi @isaacdob 

Please send your image link

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

isaacdob
Tourist
46 0 1

@Dan-From-Ryviu The image that I am trying to use for the password page?

 

Dan-From-Ryviu
Shopify Partner
7820 1519 1539

Correct

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

isaacdob
Tourist
46 0 1
isaacdob
Tourist
46 0 1

@Dan-From-Ryviu Is this possible?

 

Dan-From-Ryviu
Shopify Partner
7820 1519 1539

Hi @isaacdob 

Let me check

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
7820 1519 1539

Please go to your Online store > Themes > Edit code > open theme.liquid file, add this code before </head> tag

<style>
.password-protected-page {
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/380805i4E0DD29959B2CC21/image-size/large?v=v2&px=400');
}
.password-protected-page .shopify-section div { background: transparent !important; }
</style>

Screenshot 2023-11-03 at 10.53.10.png

 

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

isaacdob
Tourist
46 0 1

Thank you so much. Do you know why the photo appearing twice?

 

Dan-From-Ryviu
Shopify Partner
7820 1519 1539

Please update code to make it not repeat 

<style>
.password-protected-page {
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/380805i4E0DD29959B2CC21/image-size/large?v=v2&px=400');
background-size: cover;
}
.password-protected-page .shopify-section div { background: transparent !important; }
</style>

 

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

isaacdob
Tourist
46 0 1

@Dan-From-Ryviu I put this code in and it still appears black on the page. Any reason why?

 

Dan-From-Ryviu
Shopify Partner
7820 1519 1539

Let me check

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

isaacdob
Tourist
46 0 1

@Dan-From-Ryviu thank you

Dan-From-Ryviu
Shopify Partner
7820 1519 1539

I cant found the code you added. 

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

isaacdob
Tourist
46 0 1
Dan-From-Ryviu
Shopify Partner
7820 1519 1539

This is an accepted solution.

Please try to open password.liquid file and add code before </head> tag instead of and check again. 

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

isaacdob
Tourist
46 0 1

@Dan-From-Ryviu This worked! Image is cut in half on desktop though. Works perfect for mobile

 

isaacdob
Tourist
46 0 1

@Dan-From-Ryviu i got it. but image is cut in half

 

Dan-From-Ryviu
Shopify Partner
7820 1519 1539

This is an accepted solution.

If you want background display as original version then please update code to this 

<style>
.password-protected-page {
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/380805i4E0DD29959B2CC21/image-size/large?v=v2&px=400');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.password-protected-page .shopify-section div { background: transparent !important; }
</style>

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

isaacdob
Tourist
46 0 1

I see. I like the sizing of the other code you sent. but it cuts off right side of image. 

IMG_4066 2.PNG

Dan-From-Ryviu
Shopify Partner
7820 1519 1539

You are most welcome

- Helpful? Like and Accept solution or Buy me a coffee.
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.