> ## Documentation Index > Fetch the complete documentation index at: https://cdbd.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # 상품 카드 # 상품 카드 > **한 줄 요약** — 외부 상품 페이지 주소만 붙여 넣으면 이미지·상품명·가격·구매 버튼이 자동으로 채워지는, 상품 진열대용 카드예요. ## 이 기능이 필요한 순간 * 자사 쇼핑몰(스마트스토어·쿠팡·자체몰)에서 파는 상품을 한 페이지에 **카탈로그처럼** 모아두고 싶을 때 * 인플루언서·셀러로서 "오늘의 추천 상품 5개"처럼 **상품 큐레이션**을 보여주고 싶을 때 * 이미지 카드·텍스트 카드·버튼 카드를 따로 만들지 않고 **주소 한 줄**로 상품 한 칸을 완성하고 싶을 때 *** ## 상품 카드 추가하기 에디터에서 **\[+ 카드 추가하기]** 버튼을 누르면 카드 추가 메뉴가 열려요. 메뉴의 기본 카드 두 번째 줄 마지막에 있는 **\[상품]** 을 골라요. 상품 카드는 카드 추가 메뉴의 두 번째 줄 마지막에 있어요 페이지에 빈 상품 카드 한 개가 추가되고, 오른쪽 패널이 상품 카드 설정으로 자동 전환돼요. 빈 카드에는 **"오른쪽에서 상품 URL을 입력해 주세요"** 라는 안내가 보여요. 빈 상품 카드와 오른쪽의 상품 목록 패널 — 주소만 기다리는 상태예요 오른쪽 패널 위쪽에는 **상품 목록 / 디자인** 두 가지 탭(설정 묶음을 바꾸는 작은 메뉴)이 있어요. **상품 목록** 탭에서는 어떤 상품을 보여줄지 정하고, **디자인** 탭에서는 진열 방식을 정해요. *** ## 상품 주소를 붙여넣고 자동으로 채우기 이 카드의 핵심은 **주소 한 줄로 상품 정보가 자동으로 채워진다**는 점이에요. ### 1단계. 상품 페이지 주소 입력하기 상품 목록 탭의 **상품 항목**(상품 하나당 작은 칸 한 개) 안에 있는 **"상품 페이지 URL"** 입력 칸에 외부 상품 페이지 주소를 붙여 넣어요. 예를 들어 무신사 상품 페이지 주소(`https://www.musinsa.com/products/6120209`)를 그대로 복사해 붙여 넣으면 돼요. 주소를 입력하면 옆에 있는 **체크(✓) 아이콘 버튼**이 활성 상태로 바뀌어요. 무신사 상품 주소를 붙여 넣은 모습 — 오른쪽 체크 아이콘이 활성 상태로 바뀌어요 ### 2단계. 체크 아이콘 누르거나 Enter 누르기 **체크(✓) 아이콘**을 누르거나 키보드의 **Enter** 키를 누르면, CdBd가 그 주소의 페이지를 읽어 와요. 자동으로 채워지는 항목은 다음과 같아요. | 자동으로 채워지는 것 | 설명 | | ----------- | ------------------------------------------- | | **이미지** | 페이지에 설정된 대표 이미지 (없으면 회색 태그 모양의 기본 이미지) | | **상품명** | 페이지의 제목 | | **가격** | 페이지에 가격 정보가 잘 적혀 있을 때 (사이트에 따라 비어 있을 수 있어요) | | **버튼 텍스트** | 기본값 "구매하기" | 무신사 주소를 적용한 직후 — 상품 이미지·상품명·가격(31,500원)이 자동으로 채워지고 오른쪽 상품 항목이 펼쳐져요 위 예시에서는 무신사처럼 상품 정보가 잘 정리된 사이트라서 **이미지·상품명·가격**(31,500원)이 모두 한 번에 들어왔어요. 다음에 무신사의 다른 상품 주소(`https://www.musinsa.com/products/5391060`)를 추가해도 같은 방식으로 자동으로 채워져요. > 💡 **가격이 자동으로 안 채워질 수 있어요** — 사이트마다 가격을 표시하는 방식이 달라서 자동으로 못 가져올 때가 있어요. 그때는 펼쳐진 가격 칸에 직접 입력해 주세요. ### 3단계. 채워진 내용 다듬기 자동으로 채워진 정보가 마음에 들지 않거나 비어 있다면, 상품 항목 안의 각 칸에서 직접 수정해요. 펼쳐진 상품 항목 — 무신사에서 가져온 이미지·상품명·가격·버튼 텍스트를 자유롭게 손볼 수 있어요 * **이미지** — **변경** 버튼을 누르면 이미지를 고르는 창이 열려요. 그 창에서 다른 이미지로 바꿀 수 있어요. * **상품명 / 가격 / 버튼** — 텍스트 칸을 눌러 직접 입력해요. 가격에는 통화 표시(`원`, `$`)도 자유롭게 적어요. > ⚠️ **버튼이 이동할 주소를 바꾸려면 윗줄 주소 칸을 다시 입력하세요** — 버튼 칸에서는 버튼에 적힌 글자만 바뀌어요. 버튼을 누르면 윗줄에 적용된 상품 페이지 주소로 이동해요. 주소를 바꾸고 나면 다시 ✓를 눌러 적용해야 해요. ### 다음 상품을 더 추가하기 상품 칸 아래쪽의 **+ 상품 추가** 버튼을 누르면 빈 상품 항목이 목록 끝에 하나 더 생겨요. 새 주소(예: `https://www.musinsa.com/products/5391060`)를 붙여 넣고 다시 ✓ 또는 Enter를 눌러 채우면 돼요. 같은 사이트의 다른 상품을 모으거나 다른 사이트 주소를 섞어 한 카드 안에 여러 상품을 진열할 수 있어요. 상품 항목 왼쪽의 **점 6개 손잡이**를 잡아 위아래로 끌면 진열 순서를 바꿀 수 있어요. *** ## 상품 복제하거나 삭제하기 각 상품 항목 오른쪽의 **점 3개(⋮)** 메뉴를 누르면 **복제하기 / 삭제하기** 가 나와요. 점 3개 메뉴 — 같은 상품을 한 번에 복제하거나 삭제할 수 있어요 * **복제하기** — 같은 정보를 가진 상품 항목이 바로 아래에 하나 더 추가돼요. 비슷한 상품을 빠르게 만들 때 편해요. * **삭제하기** — 한 번 더 묻는 확인 창이 나오고, 확인을 눌러야 실제로 지워져요. *** ## 진열 방식 고르기 (디자인 탭) 오른쪽 패널의 **디자인** 탭으로 전환하면 상품을 어떻게 보여줄지 정할 수 있어요. 디자인 탭 — 유형, 단 수, 옆으로 넘겨보기, 간격, 구성 요소를 한곳에서 정해요 ### 진열 유형 고르기 **그리드형** 은 상품을 격자 모양으로 배열해 한 줄에 여러 개를 보여줘요. 상품 사진을 큼직하게 보여주고 싶을 때 어울려요. 그리드형 2단 — 무신사 상품 두 개가 한 줄에 나란히 놓여요 그리드형을 고르면 그 아래에 **단 수 조절 막대**(좌우로 움직여 값을 정하는 막대)가 함께 보여요. 막대를 움직여 한 줄에 몇 개씩 보여줄지 정해요. **가로형** 은 한 줄에 상품 하나씩, 왼쪽에 이미지·오른쪽에 글·끝에 화살표(▸)가 놓이는 목록 모양이에요. 상품 수가 많거나 설명이 긴 카탈로그에 어울려요. 가로형 — 두 무신사 상품이 목록처럼 한 줄에 하나씩 보이고 줄 끝에 화살표(▸)가 함께 표시돼요 > 💡 **가로형에서는 버튼이 화살표(▸)로 바뀌어요** — "구성"에서 버튼을 켜 두어도 가로형에서는 별도 버튼이 따로 보이지 않고, 줄 끝의 화살표가 버튼 역할을 대신해요. ### 옆으로 넘겨보기 켜고 끄기 **옆으로 넘겨보기** 스위치(켜고 끄는 작은 동그라미 버튼)를 켜면, 상품이 세로로 죽 늘어서지 않고 한 화면에 모이고 좌우로 넘겨보는 방식으로 바뀌어요. 상품 수가 한 화면에 다 들어오지 않으면 화면 아래에 현재 위치를 알려주는 **작은 점**이 함께 나와요. 옆으로 넘겨보기 ON — 두 무신사 상품이 한 화면에 모이고 좌우로 넘겨볼 수 있어요 상품 수는 많은데 페이지 길이를 짧게 유지하고 싶을 때 켜 두세요. 작동 방식은 [갤러리 카드](/editor/card-gallery)의 옆으로 넘겨보기와 같아요. ### 간격 조절하기 상품 항목들 사이의 공간을 조절 막대로 조절해요. 좁히면 빽빽한 카탈로그처럼, 넓히면 여유 있는 갤러리 느낌이 돼요. ### 보여줄 정보 고르기 **이미지 / 상품명 / 가격 / 버튼** 네 가지를 각각 켜거나 꺼서 보여줄 정보를 골라요. 예를 들어 가격을 숨기고 상품명만 보여주는 미니멀한 카탈로그도 만들 수 있어요. ### 이미지 모양과 모서리 정하기 이미지 모양은 위의 **이미지** 항목이 켜져 있을 때만 보여요. 아래쪽 **모서리** 는 **각진 / 둥근** 두 가지 중에서 골라 카드의 분위기를 정돈해요. *** ## 결제는 어떻게 처리되나요? 상품 카드는 상품을 **보여주고 외부 상품 페이지로 이어주는** 카드예요. CdBd 안에서 직접 결제하거나 재고를 관리하는 기능은 들어 있지 않아요. 방문자가 버튼(또는 가로형의 화살표)을 누르면 입력해 둔 상품 페이지로 이동해, 그곳에서 결제와 배송이 이뤄져요. 따라서 결제·재고·교환·환불 정책은 연결한 외부 쇼핑몰에서 관리해 주세요. *** ## 자주 묻는 질문 **Q. 가격이 자동으로 안 들어와요. 왜 그런가요?** A. 사이트마다 가격을 표시하는 방식이 달라요. 무신사처럼 상품 정보가 잘 정리된 사이트는 가격까지 자동으로 들어오지만, 그렇지 않은 사이트는 가격이 비어 있을 수 있어요. 그럴 땐 펼쳐진 상품 항목의 가격 칸에 직접 입력해 주세요. **Q. 한 카드에 여러 상품을 모아도 되나요?** A. 네, 한 카드 안에 여러 상품 주소를 넣을 수 있어요. 다만 사이트마다 가격 표기가 달라질 수 있으니, 가격 칸은 직접 정리해 통일감을 맞춰 주세요. **Q. 상품 페이지 주소를 바꾸려면 어떻게 하나요?** A. 상품 항목 윗줄의 주소 칸을 다시 입력하고 **체크(✓)** 아이콘이나 **Enter** 를 한 번 더 눌러 주세요. 그래야 이미지·상품명·가격이 새 주소 기준으로 다시 채워져요. **Q. 상품을 몇 개까지 추가할 수 있나요?** A. 페이지의 흐름이 길어지지 않도록 정말 보여주고 싶은 상품 위주로 추리는 편을 권해요. 많은 상품을 한 카드에 담는 경우에는 **옆으로 넘겨보기** 를 켜면 페이지가 짧아져요. **Q. 상품 카드는 어떤 유료 플랜에서 쓸 수 있나요?** A. 자세한 요금 안내는 [요금제](/start/pricing) 를 확인해 주세요. *** ## 함께 보면 좋은 문서 * [갤러리 카드](/editor/card-gallery) — 이미지 위주로만 보여주고 가격·구매 버튼이 필요 없을 때 * [메뉴 카드](/editor/card-menu) — 상품이 아니라 여러 링크를 항목 리스트로 묶고 싶을 때 * [버튼 카드](/editor/card-button) — 한 가지 행동(웹 이동·전화·문자 등)을 단독으로 강조하고 싶을 때 * [이미지 카드](/editor/card-image) — 한 장의 큰 이미지로 분위기를 잡고 싶을 때 * [페이지 테마](/editor/page-theme) — 옆으로 넘겨보기의 점 색깔과 가로형 화살표 색을 페이지 테마가 정해요