查看: 1812|回复: 8

Shopify免费主题 Debut 修改 Add to Cart 按钮尺寸

[复制链接]

72

主题

490

帖子

1599

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1599
QQ
发表于 2017-11-23 13:02:11 | 显示全部楼层 |阅读模式
研究了一些老外的网站,发现他们的购物车按钮都有一个特点,就是很大很宽,客户体验应该会好一些。自己的免费主题默认的很小,如果你和我一样使用的是Debut主题,那么你可以按照下面的操作修改你的购物车按钮的尺寸。

点击Online Store项下的Themes按钮,然后点击当前主题的Actions按钮,下拉选择Edit Code



然后打开文件夹Assets下的theme.scss.liquid文件,搜索 Add to cart form


然后下拉找到代码
  1. @include media-query($medium-up) {
  2.       .product-form__cart-submit--small {
  3.          max-width: 300px;  将这里的300px修改成为100%
  4.       }
  5. }
复制代码
如下图

然后点击右上角的Save按钮就可以了!
去产品页面预览下你的购物车按钮是不是有什么变化吧。

如果不喜欢,可以修改回300px,修改之后记得保存!
这里的300px就是购物车按钮的宽度,你可以修改成为任意宽度,不过建议使用100%,意思就是自适应宽度。

本帖子中包含更多资源

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

x
回复

使用道具 举报

2

主题

48

帖子

109

积分

注册会员

Rank: 2

积分
109
发表于 2018-3-28 19:04:47 | 显示全部楼层
不同的主题文件不同吧?我先去找找我主题的文件,试着操作一下
回复 支持 反对

使用道具 举报

1

主题

50

帖子

143

积分

注册会员

Rank: 2

积分
143
发表于 2018-5-7 18:44:30 | 显示全部楼层
谢谢群主分享,先收藏,后续测试下。
回复 支持 反对

使用道具 举报

1

主题

29

帖子

112

积分

注册会员

Rank: 2

积分
112
发表于 2018-5-11 10:08:06 | 显示全部楼层
补充一下:
px 和 % 的区别

1. px 是像素,300px 就是300个像素,600px就是翻倍。但是这是固定的大小,电脑看起来正常的,手机可能就太大了。
2. % 是在当前母容器(比如div)的占比,100%就是全部占满,50%就是占一半,如果母容器根据电脑手机自动变化大小,那么你的50%也会自动变化成50%
回复 支持 反对

使用道具 举报

72

主题

490

帖子

1599

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1599
QQ
 楼主| 发表于 2018-5-12 00:41:41 | 显示全部楼层
yabu007 发表于 2018-5-11 02:08
补充一下:
px 和 % 的区别

很专业!
回复 支持 反对

使用道具 举报

1

主题

43

帖子

125

积分

注册会员

Rank: 2

积分
125
发表于 2018-5-31 22:31:29 | 显示全部楼层
楼主建站用的Debut?
回复 支持 反对

使用道具 举报

0

主题

7

帖子

51

积分

注册会员

Rank: 2

积分
51
发表于 2018-6-7 14:26:15 | 显示全部楼层
我现在用的也是debut,但代码好像跟楼主的不太一样,可能是主题版本有更新过。
楼主我想问下,Debut主题的首页大图,image with overlay, slideshow这样的,怎么在图片上加超链接哇,我在theme.liquid那页里没找到插入代码的位置。
回复 支持 反对

使用道具 举报

1

主题

385

帖子

824

积分

高级会员

Rank: 4

积分
824
发表于 2018-9-10 11:26:32 | 显示全部楼层
qjsephy 发表于 2018-6-7 14:26
我现在用的也是debut,但代码好像跟楼主的不太一样,可能是主题版本有更新过。
楼主我想问下,Debut主题的 ...

问题解决了吗?
回复 支持 反对

使用道具 举报

1

主题

385

帖子

824

积分

高级会员

Rank: 4

积分
824
发表于 2018-9-10 11:27:31 | 显示全部楼层
谢谢站长分享
回复 支持 反对

使用道具 举报

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

本版积分规则

热门推荐

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 )
快速回复 返回顶部 返回列表