상품 상세페이지에서 이미지 간격 없애기 (코딩)

참고 : 애드리빙에서 제공하지 않는 기능을 코드로 해결하는 도움말입니다. 향후 기능 업데이트 등의 변화에 따라 본 도움말에서 안내된 코드가 적용되지 않을 수 있습니다.

등록된 이미지간 구분을 위해 약간의 간격을 두게끔 설정되어 있습니다. 상품 상세페이지는 여러 이미지를 연속하여 배치할 경우 이 간격이 방해가 되는 경우가 있습니다. 이를 없애기 위해선 다음 방법을 수행해 보시기 바랍니다.


코드 적용방법

  1. 디자인 모드에 접속합니다.
  2. 왼쪽 상단 메뉴 관리를 클릭합니다.
  3. 상품 상세페이지 메뉴를 클릭해 이동합니다.
    주의 : 쇼핑 기본설정을 완료하지 않은 경우 상품 상세페이지 메뉴가 나타나지 않습니다. 쇼핑몰 시작하기
  4. 왼쪽 상단 위젯 추가를 클릭합니다.
  5. 코드 위젯을 클릭합니다.
    참고 : 코드 위젯은 실제 페이지에서 표시되지 않습니다.
  6. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  7. 코드 설정을 클릭합니다.
  8. 다음 코드를 복사하여 붙여넣습니다.

    <style>
    .fr-view img.fr-dib {
    margin: 0 auto;
    }
    .fr-view img.fr-dii {
    margin: 0;
    }
    </style>
  9. 상품 상세페이지로 이동해 적용여부를 확인합니다.


이미지 간격이 여전히 떨어져 있나요?

코드를 적용해도 이미지 간격이 여전한 경우 첨부한 이미지들이 문단 형식으로 줄내림 되었기 때문입니다. 다음 절차에 따라 코드를 일부 변경해 바로 잡아보세요.

  1. 상품관리 메뉴로 이동하고 상품을 클릭합니다.
  2. 상세설명 항목으로 마우스 스크롤을 내립니다.
  3. 상세설명 텍스트 에디터 오른쪽 끝 코드 보기 를 클릭합니다.
  4. 코드 에디터로 전환되면, 전체 코드의 처음과 끝의 <p>와 </p>를 제외하고, 아래 예제 그림처럼 빨간 네모 쳐진 부분의 <p>와 </p> 태그를 삭제합니다.
    참고 : 첨부하신 상세이미지 개수에 따라 삭제해야 할 <p>, </p> 태그 개수는 달라질 수 있습니다.

  5. 중간 <p>와 </p> 태그를 모두 삭제하면 다음처럼 한 줄이 됩니다.
    참고 : <p> 태그는 한 문단을 추가할 때 사용합니다. 아래 그림은 위 4개 문단을 하나의 문단으로 수정한 코드입니다.

  6. 다시 코드 보기 를 클릭해 이미지 간격이 없어졌는지 확인합니다.
  7. 저장 버튼을 클릭해 적용합니다.


추가 도움말: Shift + Enter 줄내림하기

이미지 첨부 시 두 번째 이미지부터 키보드 Shift + Enter를 클릭해 줄내림 후 이미지를 첨부하셔도 됩니다.

사업자등록번호 : 106-04-80687

통신판매업신고번호 : 제 2015-서울용산-00950 호

Copyright© Adliving. All right reserved. 


고객지원 : 고객지원 게시판

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

주소 : 서울시 마포구 도화동 173 삼창프라자빌딩 1539호

고객지원 : 고객지원 게시판

운영시간 : 평일 AM 10:00 ~ PM 18:00(공휴일 휴무)

점심시간 : AM 11:30 ~ PM 1:00

주소 : 서울시 마포구 도화동 173 삼창프라자빌딩 1539호


사업자등록번호 : 106-04-80687

통신판매업신고번호 : 제 2015-서울용산-00950 호

Copyright© Adliving. All right reserved.