Customize the Products Tab

Modified on Tue, 13 Jul 2021 at 06:08 PM


TABLE OF CONTENTS


PRODUCTS TAB


When you need to create a custom section for a specific usage, the custom content section will help you with your job. To create a new Products Tab, click Add Section > find Products Tab  > Click Add button.

I. CONTENT

    To add a new item, click the Add Collection button.

  • Insert an available collection or create a new one (leading to Shopify admin page)
  • Tab title: Change the title of the current tab.


II. SETTINGS

1. Layout

  • Boxed layout: Add a padding around the main wrapper. 


  • Style: Scroll down to choose a style of product tab: Tab default/ Tab with image


  • Section margin: Input the margin in order of Top Right Bottom LeftEg: 5px 10px 5px 10px


  • Section padding: Insert values in order of clockwise motion starting from Top padding., Eg: 30px 20px 0 


  • Title: Insert a title name in the box. (doesn't work on "Style 2")


2. Background

    Tick to enable Full section background

    To modify the Background: 

  • Color: you can choose any color to display by using the color picker
  • Background image: you can choose to use image for section background instead of background color
  • Size: Scroll down to choose the size of the banner to display: Auto/ Cover/ Contains
  • Position: Scroll down to select the position: Left Top/ Right Top/ Center Center/etc.
  • Repeat: Scroll down to change the background repeat: No Repeat/ Repeat/ Repeat X/ Repeat Y

3. Layout Content

  • Tab total items: Maximum number of items in a tab.


  • Max number of content per row: The total items on a row.


  • Spacing between items: To adjust the space between 2 text boxes, fill in the Item spacing field. Eg: 10px


4. Slider Settings

  • Controls: Show arrow to move easier.
  • Dots: Show available pages with dots at the section bottom.


5. Banner

    Do Work on 'Style 2'

    To modify the banner:

  • Image: Select an image to display
  • Heading and Subheading: Name your section with a Heading and Subheading.
  • Font size: The font-size property sets the size of a font, enter the font size into the box. Eg: 56px,36px,24px     corresponding with the Desktop, Mobile and Tablet.
  • Text color: Choosing Heading & Subheading color with the color picker.
  • Button label: Insert a name of button label into the box. Eg: Show all

Button link: Paste or Search a link to display

Button margin: Input the margin in order of Top Right Bottom Left, Eg: 5px 10px 5px 10px.


III. THEME SETTINGS

  • Show vendor: check on the tick-box to show vendor names on products


  • Image ratio: choose the ratio for the image from available options
  • Image auto crop
  • Title line limit


  • Customize image ratio: select available image or upload your own one 
  • Hover style: choose a style of hover effect on the image of items


  • Enable Wishlist 
  • Enable Compare




Note: Please click Save on the Top right of the screen to save the step by step that you just input.


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article