Product Tab

Spark offers 2 ways to show the Product Tab:

Show the same tab content for all products
Show the different tab content for each product

Show the same tab content for all products

To show the same tab content for all products, please choose "Show For All Products". Then enter the content in the "Product Tab Content" text box. You can use your own html code to style your tab content as you want.

Show the different tab content for each product

To show the different tab content for each product, please choose "Only Show For This Product", no need to enter the content in the "Product Tab Content" text box.

Then, Please follow the instructions below to set up the different tab contents.

Setup Product Tabs by Metafields

Step 1 - Add a new Metafields for the Tab you want to create

From your Shopify admin, go to Settings -> Custom data.
Click Products → Add Definition.

Please enter a Namespace and Key as we noted below.

Name: Use the name of tab you want

Namespace and key: c_f.XXX

Select content type: Text -> Multi-line Text

(With c_f. is a code you MUST use correctly and XXX is the name of tab you want, no white space or if you want to have space, you will use "" to replace the white space. Example: c_f.customtab or c_f.custom_tab)
Remember the key after c_f. to paste it in theme editor of Step 2. Example. If your Namespace and key is c_f.customtab so the key you need to remember is customtab

Step 2: Fill Product Tab Metafield 'Key'

At the Product Tab Content 2 box, fill in the key from Step 1 above. Example as above is customtab.

Step 3: Insert the tab content for each product in the Product Metafields:

From your Shopify admin, go to Products -> All products.
Find and choose the product that you want to edit.
In Metafields area at the bottom, please enter the content in the "Custom Tab" field.

You can use HTML Formatting for Custom Tab content.

Because the FAQ tab has its own style, we will attach a sample HTML code below, you can refer to and use

<div id="accordion">
    <div class="card card-2">
        <div class="card-header" id="heading-1569828417275">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569828417275" aria-expanded="true" aria-controls="1569828417275">
                Will your template be fully compatible with Shopify?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569828417275" class="collapse" aria-labelledby="heading-1569828417275" data-parent="#accordion">
            <div class="card-body">
                <p>Yes it is.</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569828878550">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569828878550" aria-expanded="true" aria-controls="1569828878550">
                I cannot upload the theme to my Shopify store / Shopify alerts that the file is too big to upload, what is the problem?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569828878550" class="collapse" aria-labelledby="heading-1569828878550" data-parent="#accordion">
            <div class="card-body">
                <p>Please make sure that you follow below steps:</p>
<p>1/ Download the package from themeforest.net (the file is in zip format)<br><br>2/ Extract the file you've just downloaded.<br><br>3/ Find this file: Spark-1.0.0-sections-ready.zip in the folder Spark Sections Ready 1.0.0, then you just need to upload Spark-1.0.0-sections-ready.zip file to your Shopify store.<br></p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569828968822">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569828968822" aria-expanded="true" aria-controls="1569828968822">
                What I have to do when I need your support?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569828968822" class="collapse" aria-labelledby="heading-1569828968822" data-parent="#accordion">
            <div class="card-body">
                <p>To save your time and reach our support quickly, please follow below steps:</p>
<p>1/ Create a staff account for us (with Themes permission and Settings permission) <a href="http://docs.shopify.com/manual/settings/account/staff-members" title="http://docs.shopify.com/manual/settings/account/staff-members" aria-describedby="a11y-external-message">http://docs.shopify.com/manual/settings/account/staff-members</a></p>
<p>2/ Capture screenshot or video for the issue you get.</p>
<p>3/ Specify which template and version you are using.</p>
<p>4/ Describe clearly how to reproduce the issue.</p>
<p>5/ Send all information (staff account, screenshot, video, template name and version, description of the issues, link) to <a href="mailto:support@halothemes.com" title="mailto:support@halothemes.com" aria-describedby="a11y-external-message">support@halothemes.com</a></p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569829479298">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569829479298" aria-expanded="true" aria-controls="1569829479298">
                Would assistance be available to upload the template if needed?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569829479298" class="collapse" aria-labelledby="heading-1569829479298" data-parent="#accordion">
            <div class="card-body">
                
                <p>Yes, we will assist you to install the template if needed</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830261920">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830261920" aria-expanded="true" aria-controls="1569830261920">
                Do you guys offer customisation services for your themes?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830261920" class="collapse" aria-labelledby="heading-1569830261920" data-parent="#accordion">
            <div class="card-body">
                <p>Yes, we do. Please send your customisation requests to <a href="mailto:support@halothemes.com" title="mailto:support@halothemes.com" aria-describedby="a11y-external-message">support@halothemes.com</a>, we will give you our quote. Thank you.</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830303138">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830303138" aria-expanded="true" aria-controls="1569830303138">
                Can I turn on/off Lazy Loading Image / Item Animation / Fade Up on the page?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830303138" class="collapse" aria-labelledby="heading-1569830303138" data-parent="#accordion">
            <div class="card-body">
                <p>Yes. You can turn on/off the animation in the Setting page.</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830330055">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830330055" aria-expanded="true" aria-controls="1569830330055">
                Can I turn on/off some blocks on the page?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830330055" class="collapse" aria-labelledby="heading-1569830330055" data-parent="#accordion">
            <div class="card-body">
                
                <p>Yes. You can turn on/off almost any blocks on the page (featured products, slideshow, banners, related products, recent products,...).</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830354345">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830354345" aria-expanded="true" aria-controls="1569830354345">
                I want to have the dropdown cart displayed automatically every time clients hover over it (instead of clicking on it). Is it possible?
            </button>
            
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830354345" class="collapse" aria-labelledby="heading-1569830354345" data-parent="#accordion">
            <div class="card-body">
                
                <p>Yes, we have a setting for you to switch between these two options: Display on Hover and Display on Click.</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830380421">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830380421" aria-expanded="true" aria-controls="1569830380421">
                What is included in the theme package?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830380421" class="collapse" aria-labelledby="heading-1569830380421" data-parent="#accordion">
            <div class="card-body">
                <p>The theme package includes theme source, Photoshop design files, sample data and manual guide.</p>
            </div>
        </div>
    </div>
    <div class="card card-2">
        <div class="card-header" id="heading-1569830404635">
            <button class="title collapsed" data-toggle="collapse" data-target="#1569830404635" aria-expanded="true" aria-controls="1569830404635">
                I notice that the images used in the theme are all portrait. Will that be a problem if I use square images for our products? How will they be displayed in the theme?
            </button>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--wide icon-chevron-down" viewbox="0 0 498.98 284.49"><defs></defs><path class="cls-1" d="M80.93 271.76A35 35 0 0 1 140.68 247l189.74 189.75L520.16 247a35 35 0 1 1 49.5 49.5L355.17 511a35 35 0 0 1-49.5 0L91.18 296.5a34.89 34.89 0 0 1-10.25-24.74z" transform="translate(-80.93 -236.76)"></path></svg>
        </div>
        <div id="1569830404635" class="collapse" aria-labelledby="heading-1569830404635" data-parent="#accordion">
            <div class="card-body">
                
                <p>That is not a problem. You just need to modify the width/height ratio in theme settings.</p>
            </div>
        </div>
    </div>
</div>// Some code

PreviousProduct Bundle NextProduct Recommendations

Last updated 3 months ago