Spline Integration with Custom Liquid Section

Spline Integration with Custom Liquid Section

EcommKingz
Shopify Partner
13 0 0

Hey guys, I recently started to use Splines and the integration method is to create a custom liquid and then copy the viewer embed from Spline. This works but when in mobile mode the sizing doesn't change to fit the screen? Any ideas on what I can do here? Thanks

ScreenShot Tool -20250121174000.pngScreenShot Tool -20250121173936.png

Replies 9 (9)

CodingFifty
Shopify Partner
525 80 98

Hi @EcommKingz,

Please share the website URL.

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
EcommKingz
Shopify Partner
13 0 0

Sure it's, https://pwaclothing.myshopify.com/

The password is pwa123

CodingFifty
Shopify Partner
525 80 98

Hi @EcommKingz,


Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.

canvas#spline {
    height: 100vh !important;
}

 

CodingFifty_0-1737484106026.png

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
EcommKingz
Shopify Partner
13 0 0

Unfortunately, it stays the same in mobile view.

 

CodingFifty
Shopify Partner
525 80 98

Hi @EcommKingz,


Go to Online Store, then Theme, and select Edit Code.

In theme.liquid, search for <head> and paste it in the line below.

 

@media (max-width: 768px){
#spline {
    height: 100vh !important;
}
}

 

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
EcommKingz
Shopify Partner
13 0 0

Again still the same but now it displays a message on top of the spline.ScreenShot Tool -20250121184318.png Really not sure what the issue is.

CodingFifty
Shopify Partner
525 80 98

Please share the store access. @EcommKingz 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
EcommKingz
Shopify Partner
13 0 0

Do you mean password?

 

DaisyVo
Shopify Partner
3465 393 476

Hi @EcommKingz ,

You should create an additional block specifically for mobile view.

When viewing on desktop, remove the mobile block, and vice versa.

Once you've added the block, please come back here and share the link so I can assist you with editing the code.

 

Best,

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution