How can I customize the "Shop Pay" checkout screen?

Shopify Plus

Topic summary

Goal: Auto-expand the “Mode d’expédition” (shipping method) dropdown on the Shop Pay checkout screen by default.

Attempts and findings:

  • Tried injecting CSS via a tag in checkout.liquid (before ) to test (change font color to red), but the style did not load or appear in the inspector.
  • Suspects the active template is not checkout.liquid, as no custom styles are applied.
  • Notes the checkout URL is on https://shop.app/checkout/… while assets still load from cdn.shopify.com.

Asks: How to achieve the default-open state for the shipping dropdown using JS/CSS on this checkout flow.

Context: Includes a screenshot highlighting the dropdown in question.

Status: Open question with no confirmed method or solution provided; uncertainty remains about where (or if) this checkout can be customized via theme code.

Summarized with AI on January 28. AI used: gpt-5.
1

From the following screen:

Screenshot from 2023-04-24 15-40-35.png
Screenshot from 2023-04-24 15-40-35.png1366×768 61.3 KB

I want to make the “Mode d’expédition” dropdown to be unfolded by default (actually, when the page is loaded, the dropdown starts being folded). How can I do it with JS/CSS?

I tried, as a little test, to add a tag in the checokut.liquid template, right before end of the tag, trying to change some font color to red, but it didn’t work. From the element inspector I can see that the is not even loading and probably that’s not even the checkout.liquid template.

How can I do it? The address bar says I’m in “https://shop.app/checkout/etc”, but yet I can see that it’s still loading resources from cdn.shopify.com.