Support
BigCommerce

BigCommerce store (Roots Theme): How to move product details to a separate tab.

Are you using the Roots Theme for your website and wondering how to move product details like UPC, SKU, Availability, Weight, Dimensions, and Warranty? Look no further! In this step-by-step guide, we’ll show you how to move these essential product attributes either below the product description or into the custom field section.

Step 1: Locate the Relevant Template

To get started, you’ll need to locate the template that contains the product details. In this case, we’ll be working with the Roots Theme, so the template you’re looking for is “tabs.html.” This file is included in the “product.html” template and contains various tabs, including the description tab.

Step 2: Cut and Paste the Information

Now that you’ve found the right template, follow these simple steps:

  • Open the “tabs.html” file in the editor.
  • Locate the section where the product details are currently displayed.
  • Cut the code that corresponds to the desired product attributes (UPC, SKU, Availability, Weight, etc.)
  • Navigate to the section where you want the product details to be moved (below the product description or custom field section).
  • Paste the code into the new location.

Step 3: Place Information in the Desired Tab

To organize your product details neatly, consider placing them in the “Additional information” tab, along with any custom fields if applicable. This tab can serve as a convenient location for essential data.

BigCommerce store (Roots Theme): How to move product details to a separate tab. 1

Step 4: Ensure Responsiveness to Variants

If you’ve moved the SKU and UPC to a tab and noticed that it’s no longer responsive to product variants, don’t worry. Here’s how to fix it:

  • Locate the portion where you pasted the SKU and UPC in the “tabs.html” file.
  • Wrap this portion with the following code:
<div class="productView">
    <!-- Your SKU and UPC code here -->
</div>

This code will ensure that the product details remain responsive to variants, maintaining a seamless shopping experience for your customers.

Step 5: Save and Test

After making these changes, be sure to save the “tabs.html” file. Then, test your website to confirm that the product details are now displayed in the desired location and that they remain responsive to variants.

That’s it! You’ve successfully moved product details in the Roots Theme. We hope this guide has been helpful in customizing your website’s product pages. If you have any more questions or need further assistance, feel free to ask. Happy website building!

Tagged In

Related Posts