RP Promap Help Series
Customize Your RP Promap Layout with Custom CSS
Four ready-to-paste layouts for your locator search, store results, and map.
RP Promap's new Custom CSS option lets you restyle and rearrange the locator without editing your Shopify theme files. This guide explains how to apply one of four complete layouts, test the result, switch designs, and restore the default styling.
Before you begin: Copy any CSS already saved in the Custom CSS field into a backup file. Use only one complete layout stylesheet at a time.
What the Custom CSS option changes
The supplied styles target the existing RP Promap search form, filters, store list, store cards, and Google Map container. They change presentation only; your locations, tags, distances, map data, and app settings remain unchanged.
How to add a layout in RP Promap
The Custom CSS field appears near the bottom of RP Promap Settings.
Open RP Promap settingsFrom Shopify Admin, select Apps → ProMap - RP → Settings.
Find Custom CSSScroll to the Custom CSS panel near the bottom of the Settings page.
Back up the current codeIf the field already contains CSS, copy it to a safe place before replacing it.
Copy one complete layoutChoose one layout below and copy the entire CSS block, including the opening comment and responsive rules.
Paste and saveReplace the contents of Custom CSS, then save your RP Promap settings.
Reload the storefrontOpen the storefront locator and perform a hard refresh. Test desktop, tablet, and mobile widths.
Important: Do not combine complete layout files. Their structural rules intentionally override one another.
Layout 1
Map-first split view
Recommended desktop default
Example 1: Map-first split view
Places the store list in a 40% left column and the map in a 60% right column, while keeping the search controls in a compact row above both panels.
Best for: Stores with several nearby results where shoppers need to compare details without losing map context.
What changes
Large, continuously visible map
Scrollable results panel
Selected cards can remain visually prominent
Responsive stacked view on smaller screens
Copy the complete CSS for Layout 1
Copy the complete CSS for Layout 1
/* RP Store Locator — Layout 1: Map-first 40/60 split Paste this entire file after the app's existing CSS. */
#scasl-app-container {
--rp-accent: #a4118d;
--rp-accent-dark: #7e0d6d;
--rp-ink: #17131a;
--rp-muted: #69626d;
--rp-line: #e8e2e8;
--rp-surface: #fff;
--rp-soft: #faf7fa;
--rp-radius: 14px;
color: var(--rp-ink);
font-family: "Rethink Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
max-width: 95%;
margin: 0 auto;
}
#scasl-app-container, #scasl-app-container * { box-sizing: border-box; }
#scasl-app-container #page-header { display: none; }
#scasl-app-container .bh-sl-form-container { margin: 0 0 16px; }
#scasl-app-container #scasl-tab-radius {
padding: 18px !important;
border: 1px solid var(--rp-line) !important;
border-radius: var(--rp-radius);
box-shadow: 0 8px 28px rgba(43, 22, 40, .06);
}
#scasl-app-container #bh-sl-user-location {
display: grid !important;
grid-template-columns: minmax(320px, 2fr) minmax(150px, .6fr) minmax(150px, .6fr) auto;
gap: 12px;
align-items: end;
}
#scasl-app-container #bh-sl-user-location > .form-input { min-width: 0; margin: 0 !important; }
#scasl-app-container .scasl-see-more-content { display: contents !important; }
#scasl-app-container .form-input label,
#scasl-app-container .bh-sl-filters-container > label {
display: block;
margin: 0 0 6px;
color: var(--rp-muted);
font-size: 12px;
font-weight: 700;
}
#scasl-app-container gmp-place-autocomplete,
#scasl-app-container select,
#scasl-app-container #bh-sl-submit {
width: 100% !important;
min-height: 48px;
border-radius: 10px !important;
}
#scasl-app-container select { padding: 0 14px; border: 1px solid var(--rp-line); background: #fff; }
#scasl-app-container .bh-sl-filters-container {
grid-column: 1 / 4;
margin: 2px 0 0 !important;
}
#scasl-app-container #scasl-tag-list-container { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
#scasl-app-container #scasl-tag-list-container li { list-style: none; margin: 0; }
#scasl-app-container #scasl-tag-list-container label { display: flex; gap: 7px; align-items: center; padding: 9px 12px; border: 1px solid var(--rp-line); border-radius: 999px; background: var(--rp-soft); cursor: pointer; }
#scasl-app-container .scasl-search-btn { grid-column: 4; grid-row: 1; margin: 0 !important; }
#scasl-app-container #bh-sl-submit { padding: 0 28px !important; border: 0 !important; background: var(--rp-accent) !important; color: #fff !important; font-weight: 800; cursor: pointer; }
#scasl-app-container #bh-sl-submit:hover { background: var(--rp-accent-dark) !important; }
#scasl-app-container .scasl-see-more,
#scasl-app-container .scasl-see-less { display: none !important; }
#scasl-app-container #scasl-tabs { display: none !important; }
#scasl-app-container #bh-sl-map-container {
display: grid !important;
grid-template-columns: minmax(330px, 40%) minmax(0, 60%);
gap: 16px;
height: clamp(560px, 68vh, 760px) !important;
min-height: 560px;
}
#scasl-app-container .bh-sl-loc-list {
width: auto !important;
height: 100% !important;
overflow: auto !important;
padding: 10px !important;
border: 1px solid var(--rp-line);
border-radius: var(--rp-radius);
background: var(--rp-soft);
}
#scasl-app-container .bh-sl-loc-list .list { margin: 0; padding: 0; }
#scasl-app-container .scasl-list-container {
margin: 0 0 10px !important;
padding: 14px !important;
border: 1px solid var(--rp-line) !important;
border-radius: 12px;
background: var(--rp-surface) !important;
box-shadow: 0 4px 18px rgba(43, 22, 40, .05);
}
#scasl-app-container .scasl-list-container:hover { border-color: var(--rp-accent) !important; box-shadow: 0 8px 24px rgba(164, 17, 141, .12); }
#scasl-app-container .image-title-group { display: grid !important; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
#scasl-app-container .scasl-store_image { width: 112px !important; height: 112px !important; margin: 0 !important; }
#scasl-app-container .scasl-store_image img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 9px; }
#scasl-app-container .scasl-title { font-size: 17px !important; font-weight: 800 !important; margin-bottom: 7px; }
#scasl-app-container .direction-wrapper { background: var(--rp-accent) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; padding: 9px 13px !important; }
#scasl-app-container #bh-sl-map {
grid-column: 2;
width: 100% !important;
height: 100% !important;
border: 1px solid var(--rp-line) !important;
border-radius: var(--rp-radius);
overflow: hidden !important;
}
@media (max-width: 900px) {
#scasl-app-container #bh-sl-user-location { grid-template-columns: 1fr 1fr; }
#scasl-app-container .bh-sl-filters-container { grid-column: 1 / -1; }
#scasl-app-container .scasl-search-btn { grid-column: 2; grid-row: auto; }
#scasl-app-container #scasl-tabs { display: flex !important; }
#scasl-app-container #bh-sl-map-container { display: block !important; height: auto !important; }
#scasl-app-container .bh-sl-loc-list, #scasl-app-container #bh-sl-map { width: 100% !important; height: 520px !important; }
}
button#scapl-geocode-btn { display: none; }
a#scapl-geocode-btn { display: block !important; }
a#scapl-geocode-btn { position: absolute; top: 5px; right: 5px; margin: 0; float: none; background: none !important; }
a#scapl-geocode-btn, a#scapl-geocode-btn img { width: 30px !important; height: 30px !important; }
a#scapl-geocode-btn:hover { opacity: 1; }
.scasl-distance .form-input { margin-bottom: 0px !important; }
.scasl-search-btn { border-top: none !important; }
Layout 2
Full map with floating panels
Best for geographic exploration
Example 2: Full map with floating panels
Makes the map the primary canvas and positions the search controls and results list in elevated panels above it.
Best for: Travel, lifestyle, dealer, and destination-focused brands where location context is the main part of discovery.
What changes
Near full-height map
Floating search palette
Floating scrollable result drawer
Compact bottom drawer treatment on mobile
Copy the complete CSS for Layout 2
Copy the complete CSS for Layout 2
/* RP Store Locator — Layout 2: Full map with floating panels Paste this entire file after the app's existing CSS. */
#scasl-app-container {
--rp-accent: #a4118d; --rp-accent-dark: #7e0d6d; --rp-ink: #17131a;
--rp-muted: #69626d; --rp-line: #e8e2e8; --rp-surface: #fff;
position: relative; max-width: 95%; min-height: 1000px; margin: 0 auto;
color: var(--rp-ink); font-family: "Rethink Sans", system-ui, sans-serif;
}
#scasl-app-container, #scasl-app-container * { box-sizing: border-box; }
#scasl-app-container #page-header, #scasl-app-container #scasl-tabs { display: none !important; }
#scasl-app-container #bh-sl-map-container { position: relative !important; height: clamp(680px, 82vh, 900px) !important; min-height: 680px; overflow: hidden; border-radius: 18px; }
#scasl-app-container #bh-sl-map { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 18px; overflow: hidden !important; z-index: 1; }
#scasl-app-container .bh-sl-form-container { position: absolute; z-index: 20; top: 24px; left: 50%; width: min(1080px, calc(100% - 64px)); transform: translateX(-50%); margin: 0; }
#scasl-app-container #scasl-tab-radius { padding: 14px !important; border: 1px solid rgba(255,255,255,.75) !important; border-radius: 18px; background: rgba(255,255,255,.94) !important; box-shadow: 0 16px 44px rgba(35, 17, 32, .18); backdrop-filter: blur(14px); }
#scasl-app-container #bh-sl-user-location { display: grid !important; grid-template-columns: minmax(300px, 2fr) 150px 135px auto; gap: 10px; align-items: end; }
#scasl-app-container #bh-sl-user-location > .form-input { min-width: 0; margin: 0 !important; }
#scasl-app-container .scasl-see-more-content { display: contents !important; }
#scasl-app-container .form-input label { display: none !important; }
#scasl-app-container gmp-place-autocomplete, #scasl-app-container select, #scasl-app-container #bh-sl-submit { width: 100% !important; min-height: 50px; border-radius: 12px !important; }
#scasl-app-container select { border: 1px solid var(--rp-line); padding: 0 12px; background: #fff; }
#scasl-app-container .bh-sl-filters-container { grid-column: 1 / 4; margin: 4px 0 0 !important; }
#scasl-app-container .bh-sl-filters-container > label { display: none; }
#scasl-app-container #scasl-tag-list-container { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
#scasl-app-container #scasl-tag-list-container li { list-style: none; }
#scasl-app-container #scasl-tag-list-container label { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--rp-line); border-radius: 999px; background: #fff; }
#scasl-app-container .scasl-search-btn { grid-column: 4; grid-row: 1; margin: 0 !important; }
#scasl-app-container #bh-sl-submit { padding: 0 30px !important; border: 0 !important; background: var(--rp-accent) !important; color: #fff !important; font-weight: 800; }
#scasl-app-container #bh-sl-submit:hover { background: var(--rp-accent-dark) !important; }
#scasl-app-container .scasl-see-more, #scasl-app-container .scasl-see-less { display: none !important; }
#scasl-app-container .bh-sl-loc-list { position: absolute !important; z-index: 15; top: 142px; bottom: 24px; left: 24px; width: min(390px, calc(100% - 48px)) !important; height: auto !important; overflow: auto !important; padding: 12px !important; border: 1px solid rgba(255,255,255,.8); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 18px 50px rgba(35,17,32,.2); backdrop-filter: blur(14px); }
#scasl-app-container .bh-sl-loc-list .list { margin: 0; padding: 0; }
#scasl-app-container .scasl-list-container { margin: 0 0 10px !important; padding: 12px !important; border: 1px solid var(--rp-line) !important; border-radius: 12px; background: #fff !important; }
#scasl-app-container .scasl-list-container:hover { border-color: var(--rp-accent) !important; }
#scasl-app-container .image-title-group { display: grid !important; grid-template-columns: 92px 1fr; gap: 12px; }
#scasl-app-container .scasl-store_image { width: 92px !important; height: 92px !important; margin: 0 !important; }
#scasl-app-container .scasl-store_image img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 9px; }
#scasl-app-container .scasl-title { font-size: 16px !important; font-weight: 800 !important; }
#scasl-app-container .direction-wrapper { border: 0 !important; border-radius: 8px !important; background: var(--rp-accent) !important; color: #fff !important; padding: 8px 12px !important; }
@media (max-width: 760px) {
#scasl-app-container { min-height: 820px; }
#scasl-app-container .bh-sl-form-container { top: 12px; width: calc(100% - 24px); }
#scasl-app-container #bh-sl-user-location { grid-template-columns: 1fr 1fr; }
#scasl-app-container .bh-sl-filters-container { display: none; }
#scasl-app-container .scasl-search-btn { grid-column: 2; grid-row: 2; }
#scasl-app-container .bh-sl-loc-list { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto !important; height: 300px !important; }
}
button#scapl-geocode-btn { display: none; }
a#scapl-geocode-btn { display: block !important; }
a#scapl-geocode-btn { position: absolute; top: 5px; right: 5px; margin: 0; float: none; background: none !important; }
a#scapl-geocode-btn, a#scapl-geocode-btn img { width: 30px !important; height: 30px !important; }
a#scapl-geocode-btn:hover { opacity: 1; }
.scasl-distance .form-input { margin-bottom: 0px !important; }
.scasl-search-btn { border-top: none !important; }
Layout 3
Results-first card grid
Best for comparing stores
Example 3: Results-first card grid
Turns the store results into a two-column card grid and keeps a smaller sticky map on the right.
Best for: Retailers whose store photography, services, opening status, and attributes influence the shopper's choice.
What changes
Two-column store card grid
Larger store imagery
Sticky map remains visible while scrolling
Single-column results on narrower screens
Copy the complete CSS for Layout 3
Copy the complete CSS for Layout 3
/* RP Store Locator — Layout 3: Results-first card grid + compact map
Paste this entire file after the app's existing CSS. */
#scasl-app-container { --rp-accent:#a4118d; --rp-accent-dark:#7e0d6d; --rp-ink:#17131a; --rp-muted:#69626d; --rp-line:#e8e2e8; --rp-soft:#faf7fa; max-width:95%; margin:0 auto; color:var(--rp-ink); font-family:"Rethink Sans",system-ui,sans-serif; }
#scasl-app-container, #scasl-app-container * { box-sizing:border-box; }
#scasl-app-container #page-header, #scasl-app-container #scasl-tabs { display:none !important; }
#scasl-app-container #scasl-tab-radius { padding:18px !important; border:1px solid var(--rp-line) !important; border-radius:14px; background:#fff !important; box-shadow:0 8px 28px rgba(43,22,40,.06); }
#scasl-app-container #bh-sl-user-location { display:grid !important; grid-template-columns:minmax(320px,2fr) 155px 155px auto; gap:12px; align-items:end; }
#scasl-app-container #bh-sl-user-location > .form-input { min-width:0; margin:0 !important; }
#scasl-app-container .scasl-see-more-content { display:contents !important; }
#scasl-app-container .form-input label { display:block; margin:0 0 6px; color:var(--rp-muted); font-size:12px; font-weight:700; }
#scasl-app-container gmp-place-autocomplete, #scasl-app-container select, #scasl-app-container #bh-sl-submit { width:100% !important; min-height:48px; border-radius:10px !important; }
#scasl-app-container select { padding:0 13px; border:1px solid var(--rp-line); background:#fff; }
#scasl-app-container .bh-sl-filters-container { grid-column:1 / 4; margin:4px 0 0 !important; }
#scasl-app-container .bh-sl-filters-container > label { display:none; }
#scasl-app-container #scasl-tag-list-container { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
#scasl-app-container #scasl-tag-list-container li { list-style:none; margin:0; }
#scasl-app-container #scasl-tag-list-container label { display:flex; align-items:center; gap:6px; padding:9px 12px; border:1px solid var(--rp-line); border-radius:999px; background:var(--rp-soft); }
#scasl-app-container .scasl-search-btn { grid-column:4; grid-row:1; margin:0 !important; }
#scasl-app-container #bh-sl-submit { padding:0 30px !important; border:0 !important; background:var(--rp-accent) !important; color:#fff !important; font-weight:800; }
#scasl-app-container #bh-sl-submit:hover { background:var(--rp-accent-dark) !important; }
#scasl-app-container .scasl-see-more, #scasl-app-container .scasl-see-less { display:none !important; }
#scasl-app-container #bh-sl-map-container { display:grid !important; grid-template-columns:minmax(0,65%) minmax(340px,35%); gap:16px; min-height:700px; margin-top:16px; align-items:start; }
#scasl-app-container .bh-sl-loc-list { width:auto !important; height:auto !important; max-height:none !important; overflow:visible !important; padding:0 !important; background:transparent !important; }
#scasl-app-container .bh-sl-loc-list .list { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0; padding:0; }
#scasl-app-container .scasl-list-container { width:auto !important; min-width:0; margin:0 !important; padding:14px !important; border:1px solid var(--rp-line) !important; border-radius:14px; background:#fff !important; box-shadow:0 5px 18px rgba(43,22,40,.05); }
#scasl-app-container .scasl-list-container:hover { border-color:var(--rp-accent) !important; transform:translateY(-2px); box-shadow:0 10px 28px rgba(164,17,141,.12); }
#scasl-app-container .image-title-group { display:grid !important; grid-template-columns:minmax(120px,42%) minmax(0,1fr); gap:14px; }
#scasl-app-container .scasl-store_image { width:100% !important; height:180px !important; margin:0 !important; }
#scasl-app-container .scasl-store_image img { width:100% !important; height:100% !important; object-fit:cover; border-radius:10px; }
#scasl-app-container .scasl-title { font-size:17px !important; font-weight:800 !important; margin-bottom:7px; }
#scasl-app-container .direction-wrapper { background:var(--rp-accent) !important; color:#fff !important; border:0 !important; border-radius:8px !important; padding:9px 13px !important; }
#scasl-app-container #bh-sl-map { position:sticky !important; top:16px; grid-column:2; width:100% !important; height:700px !important; border:1px solid var(--rp-line) !important; border-radius:14px; overflow:hidden !important; }
@media (max-width:1100px) { #scasl-app-container .bh-sl-loc-list .list { grid-template-columns:1fr; } }
@media (max-width:800px) {
#scasl-app-container #bh-sl-user-location { grid-template-columns:1fr 1fr; }
#scasl-app-container .bh-sl-filters-container { grid-column:1 / -1; }
#scasl-app-container .scasl-search-btn { grid-column:2; grid-row:auto; }
#scasl-app-container #bh-sl-map-container { display:flex !important; flex-direction:column-reverse; }
#scasl-app-container #bh-sl-map { position:relative !important; width:100% !important; height:460px !important; }
#scasl-app-container .bh-sl-loc-list .list { grid-template-columns:1fr; }
}
button#scapl-geocode-btn { display: none; }
a#scapl-geocode-btn { display: block !important; }
a#scapl-geocode-btn { position: absolute; top: 5px; right: 5px; margin: 0; float: none; background: none !important; }
a#scapl-geocode-btn, a#scapl-geocode-btn img { width: 30px !important; height: 30px !important; }
a#scapl-geocode-btn:hover { opacity: 1; }
.scasl-distance .form-input { margin-bottom: 0px !important; }
.scasl-search-btn { border-top: none !important; }
Layout 4
Map with horizontal results carousel
Best cross-device experience
Example 4: Map with horizontal results carousel
Uses a wide map with a horizontally scrolling strip of store cards along the bottom edge.
Best for: Brands that want a streamlined, map-led experience that also feels natural on tablets and mobile devices.
What changes
Wide, immersive map
Horizontal scroll-snap result cards
Visible Map/List tabs
Large touch-friendly card targets
Copy the complete CSS for Layout 4
Copy the complete CSS for Layout 4
/* RP Store Locator — Layout 4: Wide map + horizontal results carousel
Paste this entire file after the app's existing CSS. */
#scasl-app-container { --rp-accent:#a4118d; --rp-accent-dark:#7e0d6d; --rp-ink:#17131a; --rp-muted:#69626d; --rp-line:#e8e2e8; --rp-soft:#faf7fa; max-width:95%; margin:0 auto; color:var(--rp-ink); font-family:"Rethink Sans",system-ui,sans-serif; }
#scasl-app-container, #scasl-app-container * { box-sizing:border-box; }
#scasl-app-container #page-header { display:block !important; text-align:center; margin:8px 0 18px; }
#scasl-app-container .bh-sl-title { font-size:clamp(26px,3vw,40px) !important; font-weight:800 !important; }
#scasl-app-container .bh-sl-title::after { content:"Find a store near you"; font-size:0; }
#scasl-app-container #scasl-tab-radius { width: 80% ; margin:0 auto 16px; padding:16px !important; border:0 !important; background:#fff !important; }
#scasl-app-container #bh-sl-user-location { display:grid !important; grid-template-columns:minmax(300px,2fr) 180px 140px; gap:12px; align-items:end; }
#scasl-app-container #bh-sl-user-location > .form-input { min-width:0; margin:0 !important; }
#scasl-app-container .scasl-see-more-content { display:contents !important; }
#scasl-app-container .form-input label { display:none !important; }
#scasl-app-container gmp-place-autocomplete, #scasl-app-container select, #scasl-app-container #bh-sl-submit { width:100% !important; min-height:50px; border-radius:11px !important; }
#scasl-app-container select { padding:0 13px; border:1px solid var(--rp-line); background:#fff; }
#scasl-app-container .bh-sl-filters-container { grid-column:1 / -1; margin:0 !important; }
#scasl-app-container .bh-sl-filters-container > label { display:none; }
#scasl-app-container #scasl-tag-list-container { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
#scasl-app-container #scasl-tag-list-container li { list-style:none; }
#scasl-app-container #scasl-tag-list-container label { display:flex; align-items:center; gap:6px; padding:9px 13px; border:1px solid var(--rp-line); border-radius:999px; background:var(--rp-soft); }
#scasl-app-container .scasl-search-btn { grid-column:4; grid-row:1; margin:0 !important; }
#scasl-app-container #bh-sl-submit { border:0 !important; background:var(--rp-accent) !important; color:#fff !important; font-weight:800; }
#scasl-app-container #bh-sl-submit:hover { background:var(--rp-accent-dark) !important; }
#scasl-app-container .scasl-see-more, #scasl-app-container .scasl-see-less { display:none !important; }
#scasl-app-container #scasl-tabs {
display: flex !important;
position: absolute;
z-index: 15;
left: 50%;
margin: 18px 0 0 !important;
padding: 4px !important;
gap: 4px;
border: 1px solid var(--rp-line);
border-radius: 999px;
background: #fff;
box-shadow: 0 8px 24px rgba(43, 22, 40, .12);
width: auto;
}
#scasl-app-container #scasl-tabs li { list-style:none; padding:9px 18px !important; border-radius:999px; cursor:pointer; }
#scasl-app-container #scasl-tabs li.active { background:var(--rp-accent) !important; color:#fff !important; }
#scasl-app-container #bh-sl-map-container { position:relative !important; height:clamp(650px,75vh,820px) !important; min-height:650px; overflow:hidden; border-radius:18px; }
#scasl-app-container #bh-sl-map { position:absolute !important; inset:0; width:100% !important; height:100% !important; border:0 !important; border-radius:18px; overflow:hidden !important; z-index:1; }
#scasl-app-container .bh-sl-loc-list { position:absolute !important; z-index:12; left:24px; right:60px; bottom:22px; width:auto !important; height:210px !important; overflow-x:auto !important; overflow-y:hidden !important; padding:12px !important; border:1px solid rgba(255,255,255,.8); border-radius:16px; background:rgba(255,255,255,.94); box-shadow:0 18px 46px rgba(35,17,32,.18); backdrop-filter:blur(14px); scroll-snap-type:x mandatory; }
#scasl-app-container .bh-sl-loc-list .list { display:flex !important; gap:12px; width:max-content; min-width:100%; height:100%; margin:0; padding:0; }
#scasl-app-container .scasl-list-container { flex:0 0 clamp(340px,31vw,480px); height:100%; margin:0 !important; padding:12px !important; border:1px solid var(--rp-line) !important; border-radius:12px; background:#fff !important; scroll-snap-align:start; }
#scasl-app-container .scasl-list-container:hover { border-color:var(--rp-accent) !important; }
#scasl-app-container .image-title-group { display:grid !important; grid-template-columns:120px minmax(0,1fr); gap:12px; }
#scasl-app-container .scasl-store_image { width:120px !important; height:120px !important; margin:0 !important; }
#scasl-app-container .scasl-store_image img { width:100% !important; height:100% !important; object-fit:cover; border-radius:9px; }
#scasl-app-container .scasl-title { font-size:16px !important; font-weight:800 !important; }
#scasl-app-container .direction-wrapper { border:0 !important; border-radius:8px !important; padding:8px 12px !important; background:var(--rp-accent) !important; color:#fff !important; }
@media (max-width:760px) {
#scasl-app-container #bh-sl-user-location { grid-template-columns:1fr 1fr; }
#scasl-app-container .scasl-search-btn { grid-column:2; grid-row:2; }
#scasl-app-container .bh-sl-filters-container { display:none; }
#scasl-app-container #bh-sl-map-container { min-height:680px; }
#scasl-app-container .bh-sl-loc-list { left:12px; right:12px; bottom:12px; height:220px !important; }
#scasl-app-container .scasl-list-container { flex-basis:86vw; }
}
button#scapl-geocode-btn { display: none; }
a#scapl-geocode-btn { display: block !important; }
a#scapl-geocode-btn { position: absolute; top: 5px; right: 5px; margin: 0; float: none; background: none !important; }
a#scapl-geocode-btn, a#scapl-geocode-btn img { width: 30px !important; height: 30px !important; }
a#scapl-geocode-btn:hover { opacity: 1; }
.scasl-distance .form-input { margin-bottom: 0px !important; }
.scasl-search-btn { border-top: none !important; }
#infowindow { margin-bottom: 11% !important; }
Switching or removing a layout
Return to Custom CSS Open Apps → ProMap - RP → Settings and scroll to Custom CSS.
Replace the entire block Delete the current layout CSS before pasting a different layout.
Restore default styling Clear the Custom CSS field completely and save.
Refresh and retest Reload the storefront locator after every change.
Troubleshooting
The page looks unchanged: Confirm that Settings were saved, then hard-refresh the storefront or test in a private browser window.
The layout is partly applied: Remove older custom rules and paste one complete stylesheet.
The map has empty space or appears cropped: Resize the browser once after loading so Google Maps redraws inside its new container.
The layout conflicts with the theme: Keep all rules scoped to
#scasl-app-container. The supplied files already use this scope.A mockup feature is missing: CSS cannot generate live result counts, numbered marker data, an Expand Map action, or marker-linked popovers when those elements do not exist in the app markup.
Recommended starting point
Recommendation: Start with Layout 1 for most desktop storefronts. Choose Layout 4 when tablet and mobile map exploration is a priority.
© Rose Perl Technology.