무엇을 도와드릴까요?

make shop make signature

개별디자인 TIP

개별디자인 TIP 상품관련

상품 색상목록 태그 입력 방법

글번호 : 1135

https://www.makeshop.co.kr/newmakeshop/home/faq_view.html?uid=1135
상품 목록에 색상목록 태그 입력 방법에 대해 안내 드립니다. ※ 판매상품 색상 표시란? 판매중인 상품에 대한 여러가지 색상을 상품 리스트 화면에 표시하여 다양한 색상의 상품이 있다는 것을 미리 보여줄 수 있는 기능입니다. ※ 사용 방법 * 기능 설정은 "개별디자인 > 디자인 부가 설정 > 쇼핑몰 화면 부가 설정"에서 판매상품 색상 표시를 참고하세요. 색상등록 및 상품에 적용하셨다면 이제 쇼핑몰 화면에 노출될 수 있도록 적용해 주셔야 하는데요. 간단한 주의 사항만 확인하시면 적용하시는데 어려움은 없으십니다. 그럼 메인의 신규상품을 예로 적용방법을 알려드리겠습니다. 메인 편집 화면의 태그 목록에서 아래의 신규상품 색상 목록 노출 태그가 제공됩니다. - 신규 상품 > 색상 목록 반복문(LOOP) <!--/loop_new_product@color/--> - 신규 상품 > 색상 > 색상코드 <!--/new_product@color@code/--> - 신규 상품 > 색상 > 색상명 <!--/new_product@color@name/--> 이 태그들을 사용하여 완성된 소스를 신규상품 이미지 태그의 위쪽이나 아래에 입력하시면 되는데요. 상품 목록 반목문(LOOP)태그 안에 입력될 수 있도록 합니다. 신규상품 이미지 아래에 ■모양으로 노출할 경우 적용 예) <li> <div class="thumb"><a href="<!--/new_product@link/-->"><img src="<!--/new_product@image_m/-->" alt="상품 섬네일" title="상품 섬네일" /></a></div> </li>

<!--/if_new_product@color/--> <li> <!--/loop_new_product@color/--> <font title="<!--/new_product@color@name/-->" color="<!--/new_product@color@code/-->">■</font> <!--/end_loop/--> </li > <!--/end_if/-->

 * ■를 다른 특수기호 ★,♥등으로 바꾸어 노출하실 수 있습니다. 상품 목록에 적용되는 방식은 모두 동일하오니 다른 상품 목록에도 태그명만 바꾸어 적용하시면 됩니다. << 배경색과 색상이 동일하여 보여지지 않을때 해결방법 ①>> 만약 배경색이 흰색인 상태에서 흰색의 색상을 등록하면 아래와 같이 흰색이 보여지지 않게 됩니다. 이때 흰색도 보여지도록 하시려면 테두리를 입력해주시면 되며 소스를 아래와 같이 작업해주시면 됩니다.

<!--/if_new_product@color/--> <li> <!--/loop_new_product@color/--> <span style=" background-color: #<!--/new_product@color@code/-->;border:1px solid #c3c3c3;"><font title="<!--/new_product@color@name/-->" color="<!--/new_product@color@code/-->" size=1>■</font></span> <!--/end_loop/--> </li > <!--/end_if/-->

<< 결과 >> << 배경색과 색상이 동일하여 보여지지 않을때 해결방법 ②>> 1번 방법을 이용하실 경우 ■ 이 문자열이라 사이즈 조정이 어려울 수 있습니다. 이 경우에는 아래의 방법을 이용해보세요~

<!--/if_new_product@color/--> <li class="abcd"> <!--/loop_new_product@color/--> <span style="background: #<!--/new_product@color@code/-->;" title="<!--/new_product@color@name/-->"></span> <!--/end_loop/--> </li > <!--/end_if/-->

위와 같이 입력 후 아래의 css를 선언해주시면 됩니다.

.abcd span {display:inline-block; width:10px; height:10px; border:1px solid #dddddd;}

목록 1:1 문의