We’ve included product badges and simple layout options to help you display on sale items, free shipping and much more. You can also use custom badges, but be sure they’re transparent PNGs, similar to icons.
The use of product badges requires specific tags on the item in the tag section to see the badges on your products.
38 STEPS
1 The first step is to open the theme settings section of your Shoptimized theme config and go into the Product Badges & Layout Settings.
2 Now click Arrow style and select the style of arrows to display on your carousels sitewide.
3 Left-Right arrows shown here.
4 Bottom-Centered will achieve this result.
5 You can also decide if you would like to hide the bottom border on the carousels.
6 You can enable the option to show all products inside of boxes.
7 Boxes shown here.
8 We can enable No boxes, but on hover over the box appears then the boxes will display on mouse hover only.
9 You can completely disable the border boxes by checking this option.
10 Enable the display of 2.5 products per row here.
11 Shows 2 and half product in mobile view.
12 You can also enable a product title length limit. Using this option will limit the product title to any number of words.
13 Enable the option 'Use fixed swipe on mobile' This will allow you to control the number of items that swipe each time on mobile carousels.
14 Select ATC/Quick buy button color.
15 Select your ATC/QUICKBUY Border Color
16 Select your ATC/QUICKBUY Font Color
17 Select any ATC/QUICKBUY Hover Background Color
18 Select your ATC/QUICKBUY Hover Font Color
19 You can also select Font size of ATC/QUICKBUY Buttons.
20 You can also select a Font style of ATC/QUICKBUY Buttons.
21 Quick buy button and styling shown here.
22 Select "Sale" button design.
23 Option 1
24 Option 2
25 Option 3 Shows "On Sale" in a box as a label.
26 Option 5
27 Select your "Product layout Option" design.
28 None option - no product save details shown.
29 Option 1
30 Option 3
31 Option 3
32 Option 4
33 Enable product badges if you would like to display badges on products via a tag.
34 Enable this option to also show product badges on product pages. (rather than just collection pages)
35 The tag variables for the different kinds of badges are as follows -
badge-bestseller
badge-new
badge-onsale
badge-performance
badge-savenow
badge-toprated
badge-preorder
badge-instock
badge-custom1
badge-custom2
36 Free shipping badge shown here on a product.
37 You can also select a badge position with the following tags-
badgestyle-topright
badgestyle-topleft
badgestyle-middleleft
badgestyle-middleright
badgestyle-center
badgestyle-bottomright
badgestyle-bottomleft
38 Free shipping badge shown here on the bottom right position.
That's it you're done
Here's an interactive tutorial for the visual learners
https://www.iorad.com/player/1603967/Demostore---Product-page-settings----product-badge-and-layout
Sale Button Style Option – Changes the style of the on sale badge. This is the badge that displays on any items that are on sale.
Product Layout Option
Product Layout Option – Changes product overlays, this includes details like saving amount that will show when you hover over products in collection or sliders.
Make sure to click “Save” to save your changes.
Tag List
The following tags enable the different styles of badge on a per product basis:
- badge-freeshipping
- badge-bestseller
- badge-new
- badge-onsale
- badge-performance
- badge-savenow
- badge-toprated
- badge-preorder
- badge-instock
- badge-custom1
- badge-custom2
To position the badges the following tags can also be applied to products:
- badgestyle-topright
- badgestyle-topleft
- badgestyle-middleleft
- badgestyle-middleright
- badgestyle-center
- badgestyle-bottomright
- badgestyle-bottomleft
That’s all there is to the tags and badges section!
