查看: 2162|回复: 8

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

[复制链接]

72

主题

490

帖子

1622

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1622
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

帖子

1622

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1622
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 | 显示全部楼层
谢谢站长分享
回复 支持 反对

使用道具 举报

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

本版积分规则

热门推荐

请教如何去掉网站底部的powered by shopify 字句
请教如何去掉网站底部的po
请教如何去掉网站底部的powered by shopify 字句
Shopify建站运营推广相关问题征集
Shopify建站运营推广相关
承蒙各位Shopify卖家朋友们的支持和厚爱,在运营WaimaoB2C.com博客和WaimaoB2C.cn论坛
提高转化率的一个小提示
提高转化率的一个小提示
最近测试,在Checkout按钮下面添加了一次些促销信息,转化率稍稍有些提升,但是因为数
购物按钮下的 购物安全保证图片 怎么添加
购物按钮下的 购物安全保
购物按钮下的 购物安全保证图片 怎么添加
Shopify产品页面插入视频方法
Shopify产品页面插入视频
在Shopify网站的产品页面插入视频的两种方法: 这两种方法的前提都是你首先要将视频上
网站不做广告,Google analytics数据分析怎么有部分流量是paid...
网站不做广告,Google ana
如题, 我们的shopify网站目前主要引流方式还是引导一些其他平台的客户过来购买,平时
删除buy on amazon
删除buy on amazon
群主大人,我想删除这个按钮,比较稳妥的做法是什么? 因为之前修改代码忘记备份,产

Archiver|手机版|小黑屋|

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