Welcome To Our Help Center 👋

Product Badges & Layout Section

Learn how to configure and customize the type/position of product badges & change the product layout options (product overlays).
Written by PJ Guerrero
Updated 9 months ago

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.

Step 1 image

2 Now click Arrow style and select the style of arrows to display on your carousels sitewide.

Step 2 image

3 Left-Right arrows shown here.

Step 3 image

4 Bottom-Centered will achieve this result. 

Step 4 image

5 You can also decide if you would like to hide the bottom border on the carousels.

Step 5 image

6 You can enable the option to show all products inside of boxes.

Step 6 image

7 Boxes shown here.

Step 7 image

8 We can enable No boxes, but on hover over the box appears then the boxes will display on mouse hover only.

Step 8 image

9 You can completely disable the border boxes by checking this option.

Step 9 image

10 Enable the display of 2.5 products per row here.

Step 10 image

11 Shows 2 and half product in mobile view. 

Step 11 image

12 You can also enable a product title length limit. Using this option will limit the product title to any number of words.

Step 12 image

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.

Step 13 image

14 Select ATC/Quick buy button color

Step 14 image

15 Select your ATC/QUICKBUY Border Color

Step 15 image

16 Select your ATC/QUICKBUY Font Color

Step 16 image

17 Select any ATC/QUICKBUY Hover Background Color

Step 17 image

18 Select your ATC/QUICKBUY Hover Font Color

Step 18 image

19 You can also select Font size of ATC/QUICKBUY Buttons

Step 19 image

20 You can also select a Font style of ATC/QUICKBUY Buttons

Step 20 image

21 Quick buy button and styling shown here.

Step 21 image

22 Select "Sale" button design.

Step 22 image

23 Option 1

Step 23 image

24 Option 2

Step 24 image

25 Option 3 Shows "On Sale" in a box as a label. 

Step 25 image

26 Option 5

Step 26 image

27 Select your "Product layout Option" design.



Step 27 image

28 None option - no product save details shown.

Step 28 image

29 Option 1

Step 29 image

30 Option 3

Step 30 image

31 Option 3

Step 31 image

32 Option 4

Step 32 image

33 Enable product badges if you would like to display badges on products via a tag.

Step 33 image

34 Enable this option to also show product badges on product pages. (rather than just collection pages)

Step 34 image

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

Step 35 image

36 Free shipping badge shown here on a product.

Step 36 image

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

Step 37 image

38 Free shipping badge shown here on the bottom right position. 
That's it you're done

Step 38 image

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

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

As an example:

Once more, be sure to click “Save” to activate the changes.

That’s all there is to the tags and badges section!

Did this answer your question?