About Contact Store Carousel

What this section does

The Contact store carousel section on the About template showcases showroom/studio cards in a horizontal carousel. It supports heading text, carousel arrows, a “View all” link, and per-store cards with live open/closed status.

Where it appears

1. Template: About (templates/page.about.json).
2. Section instance in template: studio_locations.
3. Section type: contact-store-carousel.
4. Block type: Store.

How to set it up

1. Go to Online Store -> Themes.
2. Click Customize.
3. Open the About template/page.
4. Select Contact store carousel in the left sidebar.
5. Add/edit/reorder Store blocks.
6. Save.

Section controls (important)

When the section is selected:

1. Background color: section background.
2. Heading: section title (example: Studio locations).
3. Text: supporting intro text.
4. View all label: CTA text next to the arrows.
5. View all URL: destination for the View all CTA.
6. Previous button label: aria label for left arrow.
7. Next button label: aria label for right arrow.
8. View all card heading and View all card text: metadata fields for view-all card content patterns in section data.

Store block controls (important)

When a Store block is selected:

1. Store name: card heading.
2. Address: location line used for display and timezone detection.
3. Hours: opening schedule text used for status calculations.
4. Store URL: destination for the card link.
5. Link label: card CTA text (example: View location).
6. Store image: uploaded card image.
7. Fallback asset filename: theme asset fallback if image is not uploaded.

Behavior details

1. Carousel shows 3 cards desktop, 2 tablet, 1 mobile.
2. Arrow clicks move by a full “page” of visible cards.
3. Arrows disable automatically at start/end scroll bounds.
4. If a store has valid Hours, status shows Open now or Closed now.
5. Status updates every minute on the storefront.
6. Timezone is inferred from state code in Address (CA, NY, UT supported by default).
7. If Store image is empty, it uses Fallback asset filename; if both are empty, a placeholder appears.

Common merchant tasks

Add a new showroom card

1. Click Add Store.
2. Fill name, address, hours, URL, and link label.
3. Upload image (or provide fallback asset filename).
4. Save.

Reorder cards

1. Drag store blocks in the left sidebar.
2. Confirm order in preview.
3. Save.

Fix incorrect open/closed status

1. Open the store block.
2. Review Address state code and Hours format.
3. Save and recheck storefront.

Tips

1. Keep hours format consistent (example: Mon–Sat · 10:00 AM – 7:00 PM).
2. Use matching image style and aspect for all stores.
3. Ensure every store has a valid URL and CTA label.
4. Keep address state abbreviations correct for timezone accuracy.

FAQs

Why is a card showing placeholder media?

No Store image and no valid Fallback asset filename were provided.

Why does open/closed status not appear?

Hours could not be parsed, or required day/time parts are missing.

Why is status time wrong?

The section infers timezone from the state code in Address; verify state abbreviation.

Related guides

• About Care Grid Documentation
• Store Locations Documentation
• Store Detail Page Documentation
• Theme Documentation