[Rakuten RMS] 自​​定义“添加到购物车”按钮

这是一份商业备忘录。

在电子商务网站上，“添加到购物车”和“添加到购物车”等按钮在引导购买者方面发挥着极其重要的作用。

在雅虎和亚马逊上的可见度相当高，但由于某种原因，乐天将其保留为默认值，看起来很糟糕......

因此，我尝试自定义“添加到购物车”按钮。
下面是我如何做到这一点的备忘录。

如何自定义“添加到购物车”按钮

默认看起来像这样。 ↓

定制这个。

如果你查看 HTML 的相关部分，它将如下所示： ↓

<input value="添加到购物车" type="submit" id="" data-timesale-id="">

使用 CSS 来设计它是一个好主意。

input[value="添加到购物车"] { /*在此描述您要自定义的内容*/ }

将以上内容插入到“页眉/页脚/左侧导航模板设置”中的“插入 HTML 标签”中，或者如果您使用 Rakuten GOLD，请将以下内容添加到 CSS 文件中。

下面是抢修过程中制作的样品。

input[value="添加到购物车"] { 背景颜色：#ff6767 背景图像：-webkit-gradient(线性，左上，左下，from(#ff6767)，to(#BE0000));图像：-webkit-线性渐变（顶部，#ff6767，#BE0000）；背景图像：-moz-线性渐变（顶部，#ff6767，#BE0000）； , #ff6767, #BE0000); 背景图像: -o-线性渐变(顶部, #ff6767, #BE0000); 背景图像: 线性渐变(到底部, #ff6767, #BE0000);filter:progid } /*点击 */ input[value="添加到购物车"]:active { background-color: #BE0000 background-image: -webkit-gradient(线性, 左上, 左下, from(#BE0000), to( # ff6767)); 背景图像：-webkit-线性渐变（顶部，#BE0000，#ff6767）；背景图像：-moz-线性渐变（顶部，#BE0000，#ff6767）； ms -线性渐变（顶部，#BE0000，#ff6767）；-o-线性渐变（顶部，#BE0000，#ff6767）；背景图像：线性渐变（到底部，#BE0000，# ff6767 );过滤器:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#BE0000, endColorstr=#ff6767);

预览时↓

它看起来像这样。

后记

这使得自定义按钮变得容易。

除了上述方法之外，我认为使用 Illustrator 等创建原始按钮图像并使用背景图像属性指定它是一个好主意。