<ShopSection> Component

  
  <ShopSection>
      {/* Implementations are different per use case, some props are provided here on render for sanity */}
      {({
        activeVariantSlug,
        setActiveVariantSlug,
        activeVariant,
        shopSectionContent,
        variants,
        discountCode,
        children,
      }) => {
        return (
          <ShopGrid paddingTop="medium" space="small">
            <ImageGallery
              key={activeVariantSlug}
              images={activeVariant?.imageGallery ?? []}
              featuredImageBadgeText="$10 off"
            />
            <ShoppingPane
              heading="Restore 2"
              subheading="Your bedside sleep guide"
              headingLevel="h1"
              description="It sounds amazing!"
              offerText="Buy 2, get 1 free"
              space="small"
              metadata={{
                productImage: activeVariant?.imageGallery[0] ?? null,
                color: 'putty'
              }}
              addToCartText="Add to cart"
              // shoppableProduct contains all the data needed to add to cart
              shoppableProduct={activeVariant.shoppableProduct} 
              // discountCodes is an array of discount codes that can be added to cart
              discountCodes={discountCode ? [discountCode] : null}
              // variantChildren is a render prop that can be used to render variant selectors
              variantChildren={
                <Stack gap={4}>
                  <VariantSelector columns={variants.length + 2}>
                    {variants?.map((variant) => (
                      <VariantSelectorButton
                        key={variant.slug}
                        variantName={variant.productVariant.title}
                        color={variant.color.hex}
                        active={activeVariant.slug === variant.slug}
                        onClick={() => {
                          setActiveVariantSlug(variant.slug);
                        }}
                      />
                    ))}
                  </VariantSelector>
                  <VariantNameText>{activeVariant.name}</VariantNameText>
                </Stack>
              }
            >
                {/* Various components [per use case] can be rendered 
                 as children beneath <AddToCart /> */}
              {children}
            </ShoppingPane>
          </ShopGrid>
        );
      }}
    </ShopSection>