쇼핑몰 오픈마켓 상품 모음 html 만들기

쇼핑몰 오픈마켓 상품모음

오픈마켓에서 상품을 판매하면서 사용하면 좋은 상품 모음 코드입니다. 가로 사이즈는 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>

위 응용 코드를 활용한 샘플 모습입니다.

위 이미지는 이해를 돕기 위해 만들어진 것입니다. 상품 목록의 이미지를 클릭하시면 해당 게시글로 이동합니다.

상세페이지 마무리

이미지 호스팅을 이용하시면 좀 더 쉽게 작업이 가능합니다. 적용을 하는 부분에서 어렵거나 오류가 있으면 댓글 남겨주세요. 그럼 오늘도 작은 성공을 경험하시기 바랍니다.