查看: 75|回复: 1

分享Brooklyn 变体和数量并排显示代码

[复制链接]

2

主题

6

帖子

44

积分

新手上路

Rank: 1

积分
44
QQ
发表于 2019-7-4 20:05:25 | 显示全部楼层 |阅读模式
本帖最后由 yongfang06511 于 2019-7-4 20:20 编辑

研究了一下午才搞定这个效果,分享出来一起交流交流。
修改前效果:

修改后效果:

将代码粘贴到timber.scss.liquid文件最下面,修改之前做好主题备份,以防出问题
此代码针对的Brooklyn当前版本进行更改,如果以后Brooklyn有更新的话,可能会不适用。

代码如下:

  1. .product-single__form{
  2.     display:-webkit-flex;
  3.     display:-ms-flexbox;
  4.     display:flex;
  5.     width:100%;
  6.     -webkit-flex-wrap:wrap;
  7.     -moz-flex-wrap:wrap;-ms-flex-wrap:wrap;
  8.     /* flex-wrap:wrap; */
  9.     -ms-flex-align:end;
  10.     /* -webkit-align-items:flex-end; */
  11.     -moz-align-items:flex-end;
  12.     -ms-align-items:flex-end;
  13.     -o-align-items:flex-end;
  14.     /* align-items:flex-end; */
  15.     width:auto;
  16. }

  17. .product-single__form>.product-form__item{
  18.     -webkit-flex:1 1 160px;
  19.     -moz-flex:1 1 160px;
  20.     -ms-flex:1 1 160px;
  21.     /* flex:1 1 160px; */
  22.     /* margin-bottom:10px;*/
  23.     padding-right:5px;
  24.     text-align:left;
  25.    // margin-bottom:5px !important;

  26. }
  27. .product-single__form>.product-form__item>.product-form__input{
  28.           width:100%;
  29. }


  30. .product-single__form>.product-single__quantity{
  31.     text-align:left;
  32.     margin-top:0px !important;
  33.     -webkit-flex:0 0 100px;
  34.     -moz-flex:0 0 100px;
  35.     -ms-flex:0 0 100px;
  36.     flex:0 0 100px;

  37. }

  38. .product-single__form>.product-single__quantity>.js-qty{

  39.   margin-bottom:0px !important;
  40.   border:1px solid #000000;  
  41.   border-radius:$radius;
  42. }
  43. .product-single__form>.product-single__quantity input{
  44.   
  45.    font-size:16px !important;
  46. }

  47. .product-single__form>.product-single__quantity>.product-single__quantity-label{
  48.     display:block !important;
  49.     margin-bottom:0px;
  50.     font-size:0.875em !important;
  51. }
  52. .radio-wrapper .single-option-radio__label{
  53.     margin-bottom:0px !important;
  54.     font-size:0.875em !important;
  55. }
  56. .radio-wrapper .product-form__input{
  57.    padding:6px 10px !important;
  58. }

  59. .product-single__form select{
  60.     border-color:#000000;
  61.     margin:0px;
  62.     font-size:16px;
  63. }

  64. .product-single__meta{
  65.     text-align:left;
  66. }
复制代码

代码中有一些颜色,和字体大小的设置,不需要的话可以删除。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

2

主题

6

帖子

44

积分

新手上路

Rank: 1

积分
44
QQ
 楼主| 发表于 2019-7-4 20:24:03 | 显示全部楼层
另外求分享Brooklyn手机端产品图片下面怎么显示缩略图。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

热门推荐

Shopify联系我们页面的表单如何设置
Shopify联系我们页面的表
最近群里有几个朋友问到了这个同样的问题,如下图所示,联系我们的页面表单是怎么做出
视频制作软件 Camtasia 破解程序
视频制作软件 Camtasia 破
做FB广告怎么能少了视频制作软件呢? 用了几款免费付费软件,最后还是觉得Camtasia最
新手分享操作经验-如何通过Oberlo实现Dropshipping
新手分享操作经验-如何通
去年就看过一个外国人分享自己通过Oberlo做dropshipping的视频,简单的操作和可观的收
Help shopify 信用卡支付通道
Help shopify 信用卡支付
Shopify 提供的三个信用卡通道,你们用的哪个。怎样去注册?哪个好用?
求教高手
求教高手
在注册2checkout时册,填写了免费注册的申请后,按“开始吧”按钮时页面就不动了,这
shopify链接Instagram
shopify链接Instagram
我想用shopify去链接Instagram,但是Instagram是限制国家的,所以我想用shopify链接In
shopify的google Merchant Center产品审核问题
shopify的google Merchant
为什么从shopify导入的feeds一直审核不通过,现在出现价格警告问题,一直没有办法解决

Archiver|手机版|小黑屋|

  • Copyright   ©2015-2016  Shopify论坛 | WaimaoB2C.cn   Powered by©Discuz!   ( 冀ICP备15011551号-4 )
快速回复 返回顶部 返回列表