반응형
쇼핑몰 오픈마켓 상품모음
오픈마켓에서 상품을 판매하면서 사용하면 좋은 상품 모음 코드입니다. 가로 사이즈는 860px로 제작되어 여러 오픈마켓에서 사용하시기 좋습니다. 마우스 오버를 통해 좀 더 디테일하게 작업할 수 있으나 관리가 불편합니다. 간단하게 작업하고 관리하는 것이 좀 더 좋습니다.
상세페이지 기본 코드
기본 html코드입니다. 상품목록 이미지를 클릭하면 새로운 창에서 상세페이지가 나오도록 되어있습니다. 모바일 화면에서는 상품이 화면에 맞게 이동하여 보이도록 되어 있습니다.
<tbody style="user-select: auto !important;"><tr style="user-select: auto !important;">
<td style="user-select: auto !important;"><a href="샤넬 상품 상세페이지 URL" target="_blank" style="user-select: auto !important;"><img src="샤넬 상품목록 이미지URL" border="0" style="user-select: auto !important;"></a></td>
<td style="user-select: auto !important;"><a href="입생로랑 상품 상세페이지 URL" target="_blank" style="user-select: auto !important;"><img src="입생로랑 상품목록 이미지URL" border="0" style="user-select: auto !important;"></a></td>
</tr>
</tbody>
기본코드를 사용한 샘플 모습입니다. 판매하는 상품에 맞게 수정하셔서 사용하시면 됩니다.
위 이미지는 이해를 돕기 위해 만들어진 것입니다. 상품 목록의 이미지를 클릭하시면 해당 게시글로 이동합니다.
응용 코드
판매하고 있는 상품이 두 개만 있는 것은 아니죠. 기본 코드를 응용하여 노출하고자 하는 상품의 수량만큼 증가할 수 있습니다. 아래 코드만 수정하셔서 복사 붙여 넣기 해주시면 상품 목록이 증가합니다.
<tr style="user-select: auto !important;">
<td style="user-select: auto !important;"><a href="샤넬 상품 상세페이지 URL" target="_blank" style="user-select: auto !important;"><img src="샤넬 상품목록 이미지URL" border="0" style="user-select: auto !important;"></a></td>
<td style="user-select: auto !important;"><a href="입생로랑 상품 상세페이지 URL" target="_blank" style="user-select: auto !important;"><img src="입생로랑 상품목록 이미지URL" border="0" style="user-select: auto !important;"></a></td>
</tr>
아래 코드를 확인하시고 정확한 위치에 붙여 넣기 하세요.
<tbody style="user-select: auto !important;"><tr style="user-select: auto !important;">
<td style="user-select: auto !important;"><a href="샤넬 상품 상세페이지 URL" target="_blank" style="user-select: auto !important;"><img src="샤넬 상품목록 이미지URL" border="0" style="user-select: auto !important;"></a></td>
<td style="user-select: auto !important;"><a href="입생로랑 상품 상세페이지 URL" target="_blank" style="user-select: auto !important;"><img src="입생로랑 상품목록 이미지URL" border="0" style="user-select: auto !important;"></a></td>
</tr>
<!--선택 002-->
<tr style="user-select: auto !important;">
<td style="user-select: auto !important;"><a href="샤넬 2 상품 상세페이지 URL" target="_blank" style="user-select: auto !important;"><img src="샤넬 2 상품목록 이미지URL" border="0" style="user-select: auto !important;"></a></td>
<td style="user-select: auto !important;"><a href="입생로랑 2 상품 상세페이지 URL" target="_blank" style="user-select: auto !important;"><img src="입생로랑 2 상품목록 이미지URL" border="0" style="user-select: auto !important;"></a></td>
</tr>
</tbody>
위 응용 코드를 활용한 샘플 모습입니다.
위 이미지는 이해를 돕기 위해 만들어진 것입니다. 상품 목록의 이미지를 클릭하시면 해당 게시글로 이동합니다.
상세페이지 마무리
이미지 호스팅을 이용하시면 좀 더 쉽게 작업이 가능합니다. 적용을 하는 부분에서 어렵거나 오류가 있으면 댓글 남겨주세요. 그럼 오늘도 작은 성공을 경험하시기 바랍니다.
반응형
'IT인터넷' 카테고리의 다른 글
스테이블 디퓨전 WEBUI VRAM 사용량 줄이기 (0) | 2023.07.26 |
---|---|
스테이블 디퓨전 WebUI 태그 자동완성 스크립트 (0) | 2023.07.26 |
Html 테이블 구조에 대한 간단 정리 (0) | 2020.12.16 |
이미지 GIF 움짤을 만드는 가장 쉬운 6가지 방법 (0) | 2020.11.27 |
카페24(쇼핑몰) 상품 상세 페이지에 동영상 반응형으로 추가 (0) | 2020.11.27 |
PC 모니터 불량화소 무결점 자가 테스트 (0) | 2018.11.02 |