How to display multiple store pickup locations stacked on Shopify product pages

Store Design
1

Looking to modify Shopify’s pickup availability feature to show two store locations stacked vertically on the product page (similar to how some retailers display multiple pickup options) instead of the default single location with a drawer button.

Current behavior: Only shows the first location with a “Check other stores” button that opens a drawer.

Desired behavior: Display both store locations (e.g., Location A and Location B) as separate blocks stacked below each other on the product detail page, with the main location showing an arrow button to access the full drawer.

Have tried a few options, but no success. Assistance or guidance would be appreciated.

2

Hi,

Hope this will help

  • Add a small container in pickup-availability.liquid.
  • In pickup-availability.js, after fetch completes, clone first two store list items from the drawer HTML and append them to .pickup-inline.
  • Add a few lines of CSS to make them look like stacked cards.
  • Keep the original “See all” button to open the full drawer.

This gives you two vertically stacked pickup locations on the product page, with the full drawer still available for all locations—clean, safe and update-friendly

3

Hi there,

I will have a look at this and try it.

Thanks!

4

This worked, thank you so much :slight_smile:

1 Like