makeshopのカートのカスタマイズについて

Question

ECマスターズご担当者様

表題の件で質問です。

添付画像のように数量を入れた時の
スマホの入力を変更したいのですが可能でしょうか？

makeshopのデフォルトだと
数量を入れるときに利便性が低いので
添付画像のように数量を選びやすく変更したいです。

url
https://www.orlo-matsuge.com/smartphone/detail.html?id=000000000091

他社
https://www.lashdoll.com/products/detail.php?product_id=100098

ご確認宜しくお願い致します。
スマホにて閲覧下さい。###HR######IMG07b4250f28641403ad65d401f2e658c2a.pngIMG0### ###IMG1c7ef68e84b8b288413c5ae51748bd76c.pngIMG1###

Accepted Answer

ECマスターズの田中です。

いただいたソースの中で、
 
の部分が数値の入力部分に相当しますので、
これを先述のに置き換えていただく形になりますが、

システムと連動しなくなるため、
在庫が残りわずかの場合や売り切れの場合も
そのまま表示される可能性がございますので
予めお含みおきいただきますようお願いします。

Answer

ECマスターズの田中です。

数量の入力欄を編集できる状態であれば可能です。
入力欄を、タグからタグにご変更ください。

例）

↓

1
2
3
（中略）

Answer

ECマスターズ　田中様

商品詳細の画面のソースは以下のようになりますが可能でしょうか？

html

          
                
                

                    前の商品へ


                    次の商品へ

                
                
                    

                    
                        
                    

                    
                        
                            

                                

                                

                            
                        
                        
                    
                    

                        セール期間：


                        ：円


                        通常価格：円

                        価格：円(税込)

                        (%OFF)


                        ショップポイント：pt


                        
                            
                            
                            

                                
                                    製造元
                                    
                                


                                
                                    原産地
                                    
                                

                            
                        

                        

                        

                            
                                
                            


                        
                            
                        

                            
                                数量

                                残りあと個


                                在庫確認

                            

                            
グルーには30日間の返金保証が付いています



    この商品についてのレビュー

    
        

        
        （件）

        

    
        レビューはまだありません
        

    レビューを書く













                            

                            売り切れ

                        
                    
                
                
                    商品詳細情報


                    
                        
                    



                    




            ▲ページの先頭へ戻る
        







                    
                        PC版の商品詳細ページを見る
                    
                    
                        
                            
                            
                            
                            
                        
                        商品についてのお問い合わせ
                    
                



try{
_rcmdjp.
_displayRecommend({template: 'smp-recommend02'});_rcmdjp.
_displayHistory({template: 'smp-history02'});_rcmdjp.
_displayRanking({span: 'week',template: 'smp-ranking02'})
;} 
catch(err) {}





                




カテゴリ一覧

        すべての商品
まつげエクステ 国産グルー
リムーバー
ツィーザー
施術備品
レーザーエクステ Jカール
レーザーエクステ Cカール
レーザーエクステ Lカール
レーザーエクステ MIX
ベルベットミンク Jカール
ベルベットミンク Cカール
ベルベットミンク MIX
ミンクラッシュ Jカール
ミンクラッシュ Cカール
ミンクラッシュ Lカール
ミンクラッシュ MIX

        






                     
                     
                 
 




                
                    キーワードで検索する
                    
                        
                            
                                
                                
                                
                            
                            検索
                        
                    
                
            


--------------------------------

css


/* Detail CSS Document */

/* 前の商品へ　次の商品へ */
#controlBtn{
    overflow:hidden;
    padding:0 10px;
}

#controlBtn a.btn{
    float:left;
    width:30%;
    font-size:12px;
    margin:0;
    padding:2px 0;
}

#controlBtn a.next{
    float:right;
}

/* 商品詳細内容 */
#headDescription{
    padding:0 10px;
}

#headDescription p{
    font-size:13px;
    padding:0 10px 10px;
}

/* 商品詳細 */
#itemOl{
    margin:10px auto;
    border-top:3px solid #bbb;
}

#itemContainer{

    padding:10px;
}

#itemContainer p{
    text-align:right;
}

/* 商品名 */
h3#itemName{
    font-size:16px;
    padding:10px;
}

/* メイン商品画像 */
#imgWrap{
    width:300px;
    margin:0 auto;
}

#itemImg{
    text-align:center;
    padding:0 10px 10px 10px;
    position:relative;
    border-bottom: 1px solid #CCC;
}

#itemImg #large{
    width:300px;
    height:300px;
    display: table-cell;
    vertical-align:middle;
    background:url(/smartphone/images/loading.gif) no-repeat center center;
}

/* 商品画像サムネイル */
#itemImg ul{
    overflow:hidden;
    margin-right:-6px;
}

#itemImg ul li{
    float:left;
    margin:6px 6px 0 0;
}

#itemImg ul li img{
    width:45px;
    height:45px;
}

/* 打ち消し線 */
.lineThrough{
    text-decoration:line-through;
}

/* 価格 */
.off,.price{
    color:#333;
    font-weight:bold;
}

.price{
    font-size:15px;
}

.price span.normalTxt{
    font-size:13px;
    color:#000;
    font-weight:normal;
}
.memberOnly span.normalTxt{
	color:#ff0000;
}
.price span#taxPrice{
  font-size: 30px;
letter-spacing: -0.5px;
font-family: sans-serif;
font-weight: normal;
    line-height:1.2;
}
.price span#taxMemberPrice{
	font-size:27px;
	line-height:1.2;
}
.regularPrice,.markedPrice,.shopp{
    font-size:13px;
}

/* ポイント */
.shopp span{
    font-size:16px;
}

/* セール期間 */
.saleTerm{
    font-size:13px;
}

/* とくとくポイント */
.tokup img{
    vertical-align:middle;
    margin-right:6px;
}

/* 製造元・原産地 */
#itemContainer table{
    border-spacing: 2px 2px;
    border-collapse: separate;
    display: table;
    margin:10px 0;
    width:100%;
}

#itemContainer tbody{
    border-color: inherit;
    display: table-row-group;
    vertical-align: middle;
}

#itemContainer th{
    background:#ddd;
    vertical-align:middle;
    font-size:13px;
}

#itemContainer td{
    background:#eee;
}

#itemContainer th,#itemContainer td{
    padding:4px;
}

/* オプション */
.option select{
    font-size:14px;
    width:70%;
    vertical-align:top;
    margin-bottom:10px;
    padding:4px 2px;
}

/* 数量 */
.amount a{
    color:#cc0000;
    text-decoration:underline;
}

.amount input{
    padding:0 4px;
    margin:0 4px;
    width:30%;
    font-size:16px;
}

.amount img{
    vertical-align:middle;
    margin-right:2px;
}

/* 名入れ */
#nameCustom{
	margin:10px auto 0;	
	font-size:13px;
}
#nameCustom p{
	text-align:left;	
}
#nameCustom .nameTxt{
	margin-bottom:5px;
}	
#nameCustom .nameList li{
	margin-bottom:10px;	
	text-align:left;
}
#nameCustom .nameList li.lastChild{
	margin-bottom:0;	
}
#nameCustom .nameItem{
	margin-bottom:5px;	
}
#nameCustom .nameLimit{
	text-align:right;
	font-size:11px;
	color:#999;	
	margin-top:2px;
}
#nameCustom .nameInput,#nameCustom .nameTextarea{
	width:100%;
	font-size: 15px;
	padding: 4px 0;	
}
#nameCustom .nameRequired{
    background: #C00;
	color: white;
	font-size: 11px;
	padding: 1px 3px 0 3px;
	margin-right: 4px;
	display: inline-block;
}
#nameCustom .errorMessage{
	background: url("https://www.makeshop.jp/SSL/images/errorIcon.png") no-repeat left top;
	color: red;
	margin-bottom:5px;
	padding-left: 20px;	
	font-size:12px;
}

/* ボタン */
#itemBtn{
    padding:10px;
    margin-top:15px;
  background: white;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
}

#cart input.btn{
 　 font-size: 18px;
    color:#fff;
    margin:10px auto 0;
    padding: 10px 5px;
    text-align: center;
 
    width:100%;
}

#cart input.gre {
padding: 20px 15px;
font-size: 21px;
line-height: 1.285714286;
width: 100%;
font-family: sans-serif;

color: #fff;
margin: 10px auto 0;
 
text-align: center;

  
    font-weight: normal;
    background:#4A84EB;
    border-radius: 4px;
   -webkit-appearance: none;
    border: none;
}




#cart input.restock{
    -webkit-box-shadow: #DDD 0px 2px 1px;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.32, #0e5898),color-stop(0.83, #1473c1));
    background-image: -moz-linear-gradient(center bottom,#0e5898 32%,#1473c1 83%);
    text-shadow: #0e5898 0px -1px;
}
#option_sold_out_msg{
    margin:10px auto;   
}
#option_sold_out_msg .sold_out_text{
    color:#ff0000;
    text-align:left;    
}

/* 売り切れ */
#soldout{
    background:#ff0000;
    color:#fff;
    font-weight:bold;
    text-align:center;
    line-height:28px;
    margin-top:8px;
    font-size:12px;
    letter-spacing:0.5em;
    text-shadow: -1px -1px 0px #b90101;
}
/* 商品詳細情報タイトル */
h4{
    margin-bottom:10px;
    background:-webkit-gradient(linear,left top, left bottom,from(#8a8c8a),to(#9c9e9c));
    background:-moz-linear-gradient(top,#8a8c8a 0%,#9c9e9c 100%);
    padding:3px 10px;
    text-shadow: #333 0px -1px;
    color:#fff;
}

/* 商品詳細文 */
#description{
    padding:0 10px;
}

#description p{
    font-size:13px;
    padding:0 10px 10px;
}

/* 追加商品画像 */
#add_img{
	padding:0 10px 10px 10px;
	text-align:center;
}

#add_img p{
	margin:5px auto 10px;
	font-size:13px;
	text-align:left;
}

#add_img img{
	max-width:100%;
	max-height:300px;
}

#btnWrap{
	padding:0 10px 10px;
}

#btnWrap .btn{
	padding:4px 0;
}

#btnWrap span.outerLink{
    background:url(/smartphone/images/icon_popup_gray.png) no-repeat left center;
    -webkit-background-size: 13px 13px;
    -moz-background-size: 13px 13px;
    padding-left:20px;
    margin:0 auto;
}

#add ul,#add p{
    padding-left:10px;
    padding-right:10px;
}

/* SNS */
#add ul{
    margin-bottom:10px;
}

#add ul li{
    margin-right:4px;
}

#add ul li.facebook{
    margin-top:7px;
}

#add ul li.mixiIine{
    margin-top:10px;
}

.contact a{
    color:#044f9d;
    text-decoration:underline;
}

#itemDl{
    padding-bottom:20px;
}

/**********************************************定期購入用*/

#itemContainer #repeatItem{
    margin-bottom:16px;
}

/* 定期購入タイトル */
#itemContainer h5{
    text-align:center;
    border-bottom:1px dashed #999;
    padding-bottom:4px;
    margin-bottom:4px;
}

#itemContainer .repeatPrice{
    overflow:hidden;
}

/* 価格表 */
#itemContainer .repeatPrice table{
    float:right;
    width:70%;
    margin:5px 0;
    border:1px solid #999;
}

#itemContainer .repeatPrice th{
    background:#ffcccc;
}

#itemContainer .repeatPrice td{
    text-align:right;
}

/* お届けサイクル */
#itemContainer #itemBtn .cycleTxt{
    font-size:13px;
    text-align:left;
    margin-bottom:4px;
}

/* 景品 */
#itemContainer #repeatGift{
    margin:8px auto;
    background:#eee;
    overflow:hidden;
    _zoom:1;
}

#itemContainer #giftList li{
    overflow:hidden;
    _zoom:1;
    margin:8px;
    background:#fff;
    border:1px solid #ccc;
}

#itemContainer .giftWrap{
    margin:8px;
    overflow:hidden;
    _zoom:1;
}

#itemContainer .giftName{
    text-align:left;
    font-weight:bold;
    font-size:13px;
    margin-bottom:4px;
}

#itemContainer .giftImg{
    float:left;
    width:100px
}

#itemContainer .giftDetail{
    float:right;
    width:160px;
}

#itemContainer .giftDetail p{
    text-align:left;
    font-size:12px;
}

/* 商品グループ */
#group{
    padding-bottom:20px;
}
#group ul{
    display:-webkit-box;
    display:-moz-box;
    width:100%;
}
#group ul li{
    width:100px;
}

ul.item{
    font-size:12px;
    margin-bottom:5px;
}

ul.item.lastChild{
    margin-bottom:0;
}

ul.item li{
    margin-left:5px;
    word-break:break-all;
    font-family: monospace;
}

ul.item li a{
    display:block;
}

.itemImg{
    width:100px;
    height:100px;
    background:url('/smartphone/images/loading.gif') no-repeat center center #ebebeb;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

#itemImg #bigimg{
    max-width:100%;
    max-height:300px;
}



/*****************************************************

	レビュー用

*****************************************************/

/* レビューを書く */
.reviewContent{
        text-align:left;
        margin:0 10px 24px;
}

.reviewForm dl {
    margin-bottom: 10px;
}
.reviewForm dd {
    margin-bottom: 15px;
}
.reviewForm dt {
        margin-bottom:4px;
        font-weight:bold;
}
.reviewForm dl input {
    padding: 6px 0;
    width: 99%;
}
.reviewForm dl textarea {
    padding: 6px 0;
    width: 99%;
}

.reviewForm .reviewRateStar{
        width:43px;
        height:43px;
        background-size:43px 43px;
}

.reviewContent .required {
        background: #C00;
        color: white;
        display: inline-block;
        font-size: 11px;
        margin-left: 8px;
        padding: 1px 3px;
        font-weight: normal;
}

.reviewItem{
    margin: 16px auto;
        width: 100%;
        box-sizing: border-box;
        padding:16px;
        background:#eee;
        box-sizing:border-box;
        display:table;
}

.reviewItemUnit{
        display:table-cell;
        vertical-align: middle;
        text-align:left;
}
.reviewItemName{
        padding-left:8px;
        font-size:13px;
}

.reviewItemImg{
        width:80px;
}

.reviewItemImg img{
        border: solid 1px #ccc;
        box-sizing: border-box;
        max-width:100%;
        height:auto;
}

.errorTxt{
        color:#cc0000;
        margin-bottom:5px;
}

.captionTxt{
        color:#888;
        text-align:right;
        font-size:12px;
}

.reviewText{
        border: 1px solid #808080;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
        height:120px;
}

.btnPost{
        background:#999;
        text-align:center;
        color:#fff !important;
        width:100%;
        padding:15px 0;
        font-size:16px;
}

#review #back .btn{
        width:auto;
        font-size:13px;
        padding:10px 30px;
        background:#eee;
}

/* 価格 */
.itemInfo .reviewCount{
        vertical-align:middle;
}

.itemInfo .reviewCount a{
        text-decoration:underline;
}
/* レビュー */
.itemReview{
        text-align:left;
        padding-top:50px;
}

.reviewWrap{
        padding:10px 10px 20px 10px;
}

.reviewAverage{
        font-weight:bold;
        font-size:19px;
        display:inline-block;
        vertical-align:middle;
        margin-left:4px;
}

.reviewCount{
        color:#999;
        display:inline-block;
        vertical-align:middle;
}

.list_review{
        margin:16px auto -1px;
}

.btnReview{
        display:inline-block;
        width:100%;
        text-align:center;
}

.list_review{
        border:1px solid #ccc;
}

.list_review li{
        border-bottom:1px dotted #ccc;
        padding:16px;
}

.list_review li:last-child{
        border-bottom:none;
}

.reviewInfo{
        overflow:hidden;
        margin-bottom:4px;
}

.reviewName {
    float:left;
}

.reviewDate {
    color:#999;
    float:right;
    font-size:13px;
}

.list_review .reviewRate{
        margin-top:0;
}

.list_review .reviewRateStar{
        width:15px;
        height:15px;
        background-size:15px 15px;
}

.reviewComment{
        font-size:13px;
        color:#666;
        background:#eee;
        padding:10px;
}

.reviewMore .btnMore{
        border:1px solid #ccc;
        border-top:none;
        text-align:center;
        border-radius:0;
        width:100%;
        padding:14px 0;
        margin-left:0;
        color:#666;
        font-weight:bold;
}

.reviewBtn .btnReview{
        margin-top:16px;
        background:#999;
        color:#fff;
        padding:12px 0;
        margin-left:0;
}

.reviewNullText{
        text-align:center;
        padding:16px 0 24px;
}



/*****************************************************

	返金保証の文言

*****************************************************/


#itemContainer p.henkin
{
text-align: center;
margin-top: 5px;
font-size: 12px;
color: #666;
}


ご確認宜しくお願いします。

Answer

ECマスターズ 田中様

ありがとうございます。
在庫システムと連動しないのは困るので
makeshop側に改善希望案として伝えてみます。

以上ご確認宜しくお願い致します。

今後とも宜しくお願い致します。