Viola Documentation
Submit a TicketLiveChat
  • Webibazaar Support
  • Shopify Viola
  • Header
    • Announcement bar
    • Header section
    • Mega menu
  • Overlay Group
    • Newsletter Popup
    • Promotional Popup
  • Theme Settings
    • Colors
    • Typography
    • Layout
    • Buttons
    • Variant pills
    • Inputs
    • Cards
    • Product card review
    • Content containers
    • Media
    • Dropdowns and pop-ups
    • Drawers
    • Badges
    • Social media
    • Search behavior
    • Favicon
    • Currency format
    • Cart
    • Checkout
    • Custom CSS
  • Sections
    • Rich text
    • Video
    • Page
    • FAQ
    • Image gallery
    • Custom Liquid
    • Contact form
    • Collapsible content
    • Multicolumn
    • Email signup
    • Collage
    • Slideshow
    • Scrolling bar
    • Collection list
    • Featured collection
    • Image Banner
    • Featured Product
    • Countdown with product
    • Tab Products
    • Countdown
    • Video with text
    • Image with text
    • Product with image
    • Text with icons
    • Lookbook
    • Testimonials
    • Blog Posts
    • Logo list
    • Social media gallery
    • Image comparison
  • Footer
  • Age verification popup
  • Product page
    • Product tab
    • Quick order list
    • Recently viewed product
  • Color swatches
  • Collection Page
    • Collection banner
    • Meta collection list
    • Product Grid
  • Pages
    • How to create page template?
  • Languages and Currency
  • Additional Settings
  • Dynamic source of color swatch variant image
  • how can reset all the changes I made?
  • Turning your website layout from right to left
  • Use of 'Translate & Adapt' App
  • Continue selling when out of stock
  • Collection filter color swatch from metaobject
  • Quick Links
  • Change Log
    • Version 2.0.0
    • Version 1.0.13
    • Version 1.0.12
    • Version 1.0.11
    • Version 1.0.10
    • Version 1.0.9
    • Version 1.0.8
    • Version 1.0.7
    • Version 1.0.6
    • Version 1.0.5
    • Version 1.0.4
    • Version 1.0.3
    • Version 1.0.2
    • Version 1.0.1
    • Version 1.0.0
  • Importing our demos
Powered by GitBook
On this page
  • Add Tab
  • To create metafield for tab content, follow the steps below.
  • Adding metafield definition
  • Add the Product details
  1. Product page

Product tab

PreviousProduct pageNextQuick order list

Last updated 7 months ago

In the Viola theme product template, includes 'Product tab' section that displays the product details.

Setting
Description

Color scheme

The product tab section background color appears behind the text:

  • Accent 1

  • Accent 2

  • Accent 3

  • Background 1

  • Background 2

Spacing around tab

Use the bar to set the spacing around tab. You can set a minimum of “0px” and a maximum of “30px”.

Add Tab

Click on "Add Tab" and its customization is as follows.

Block
Description

Heading

Enter text to display as a title in the section.

Content

Enter text to display as a content in the section.

To create metafield for tab content, follow the steps below.

Adding metafield definition

  1. From your Shopify admin, go to Settings > Custom data > Products

  1. Click Add definition

  1. In the Name field, enter Product details

  1. Click Select type then select Rich text.

  2. Click Save to save the definition.

  1. You should see the Product details in the list of definitions by now.

Add the Product details

  1. In your admin, within Products, click on the product you want to add the Product details.

  1. Scroll down to the Metafields. You should see the Product details here.

  1. To add the content, click on the Product details field.

  2. Click Save to save your changes.

  3. Then go to the customization and select the metafield.

Live Chat Support | Webibazaar Template
Logo