Difference between revisions of "Adelaide ecommerce theme - displaying tabs on product pages"

From Spiffy Stores Knowledge Base
 
Line 1: Line 1:
−
You can display up to 4 tabs on your product page.  The first tab is specific to the product, and other tabs can include information that you want to appear on all product pages.
+
Display tabs with extra info on your product page.  This allows you to break up the page into different sections.  We recommend making use of this feature in particular, as separating your content into smaller chunks is especially beneficial for a few reasons...
  
−
== Tab 1 - Product specific information ==
+
# The "Add to cart" button appears higher on the page, so customers don't need to scroll so much.<br><br>
 +
# Pertinent information about the product is displayed right next to the product image, with more detailed information further down the page.  This also entices customers to explore other areas of your store, and also to see reviews if enabled.<br><br><br>
 +
# Images attached to product variants can be seen to change when you select a variant.  if your product description is too long, your customers cannot see what product they have selected.<br><br><br>
  
−
In [https://adelaide-ecommerce-theme.spiffystores.com/collections/packs/products/osprey-aether-ag-70-pack this example product page], you can see a tab on the product page titled "More Information".  To display this tab, we make use of the '''&lt;!--more--&gt;'''&nbsp; tag that can also be used in Blog Articles to cut the content up into smaller chunks.
+
== Product specific information ==
 +
<gallery heights="200px" widths="200px" class="right">
 +
File:Simple-ecommerce-theme-creating-tabs-on-product-pages.png|Adding tabs to product pages
 +
</gallery>
 +
The tags for creating tabs are entered directly into the "Source Code" of your product description.  To access the source code, click the "< >" icon in the toolbar.
  
−
We recommend making use of this feature in particular, as separating your content into smaller chunks is especially beneficial for a couple of reasons...
+
In [https://simple-ecommerce-theme.spiffystores.com/collections/clearance/products/osprey-aether-ag-70-pack this example product page], you can see multiple tabs on the product page.  To display tabs, we make use of the <br>'''&lt;!--more--&gt;'''&nbsp; tag that can also be used in Blog Articles to cut the content up into smaller chunks.
  
−
* The "Add to cart" button appears higher on the page, so customers don't need to scroll so much.
+
We then specify that we want a tab titled "More Info", so the tag ends up looking like this... <br>'''&lt;!--more--&gt;''' '''&lt;!--tab="More info"--&gt;'''
−
* Pertinent information about the product is displayed right next to the product image, with more detailed information further down the page. This also entices customers to explore other areas of your store, and also to see reviews if enabled.
 
  
−
For example, we introduce the product with a few lines of text...
+
In addition to this, there are other tabs on the page done the same way...
  
−
<span style="color: gray; font-style: italic;">Jelly chupa chups donut croissant I love jelly cupcake I love. Bear claw lollipop I love lemon drops chocolate cake I love.<br><br>Macaroon cotton candy dragée dessert cheesecake pudding liquorice I love tiramisu.<br><br>Jelly-o gummi bears gingerbread chocolate cake. Croissant powder wafer fruitcake candy.</span>
+
'''&lt;!--more--&gt;''' '''&lt;!--tab="Video"--&gt;'''
  
−
Then we add in the more tag...
+
'''&lt;!--more--&gt;''' '''&lt;!--tab="Features"--&gt;'''
  
−
'''&lt;!--more--&gt;'''&nbsp;
+
'''&lt;!--more--&gt;''' '''&lt;!--tab="Specifications"--&gt;'''
 +
<br><br>
  
−
And then the remainder of the product information is displayed in a tab titled "More Information".
+
== Product Reviews ==
  
−
<span style="color: gray; font-style: italic;">Donut candy tiramisu. I love cotton candy sesame snaps toffee candy canes sweet roll ice cream. Macaroon gummies cotton candy I love tiramisu chocolate cake. Jelly dessert wafer bear claw ice cream cotton candy. Lollipop lollipop gummies oat cake tootsie roll I love chocolate cake gingerbread.<br><br>Cookie chocolate bar I love tiramisu macaroon jelly-o icing. I love tart tart. Toffee sugar plum marshmallow cotton candy. Tootsie roll cake chupa chups cake dragée cupcake lemon drops carrot cake I love. Brownie brownie unerdwear.com gingerbread. Croissant apple pie halvah gingerbread I love I love. Bonbon dragée muffin icing chocolate bar.<br><br>Croissant dessert tart sugar plum wafer tart I love tiramisu. Lemon drops brownie pastry I love chupa chups sweet roll cheesecake unerdwear.com topping. Carrot cake sesame snaps sweet croissant caramels toffee pie dessert I love. Donut macaroon apple pie ice cream tart cake wafer chupa chups.</span>
+
Product reviews help store owners generate a ton of product reviews which help you to drive new traffic and sales through social, email and other channels. Product reviews is free and can be activated in your store's admin in the ''Products'' section.
  
−
== Tab 2 - General information ==
+
This tab is displayed automatically if reviews are enabled.
  
−
In the [https://adelaide-ecommerce-theme.spiffystores.com/collections/packs/products/vaude-vaude-women-s-astrum-pack demo store], you can see a tab on the product page titled "Delivery Information".  To display this tab, please follow the instructions below.
+
<br>
−
 
 
−
# Go to the Pages & blogs section of your store’s Toolbox.
 
−
# Create a new page, entering your title and text. The title of your page is what will appear as the title of this tab. You should keep it as short as possible as it will not display well on mobile devices.
 
−
# Click the Create Page button to save your page.
 
−
# Edit the page, and click the handle link.
 
−
# Change the handle of the page to tab-2.
 
−
# On the right, set Page Visibility to hidden.
 
−
# This tab should then show up on all product pages.
 
−
 
 
−
== Tab 3 - General information ==
 
−
 
 
−
In the [https://adelaide-ecommerce-theme.spiffystores.com/collections/packs/products/vaude-vaude-women-s-astrum-pack demo store], you can see a tab on the product page titled "Size Information".  To display this tab, please follow the instructions below.
 
−
 
 
−
# Go to the Pages & blogs section of your store’s Toolbox.
 
−
# Create a new page, entering your title and text. The title of your page is what will appear as the title of this tab. You should keep it as short as possible as it will not display well on mobile devices.
 
−
# Click the Create Page button to save your page.
 
−
# Edit the page, and click the handle link.
 
−
# Change the handle of the page to tab-3.
 
−
# On the right, set Page Visibility to hidden.
 
−
# This tab should then show up on all product pages.
 
−
 
 
−
== Tab 3 - Product Reviews ==
 
−
 
 
−
In the [https://adelaide-ecommerce-theme.spiffystores.com/collections/packs/products/vaude-vaude-women-s-astrum-pack demo store], you can see a "Reviews" tab.  To enable this tab, please follow the instructions on [[Adelaide ecommerce theme - setting up Yotpo reviews|how to enable Yotpo reviews in your store]].
 
  
−
<br>
 
  
 +
<br><br><br><br>
  
 
[[The Adelaide ecommerce theme guide|&laquo; The Adelaide theme guide]]
 
[[The Adelaide ecommerce theme guide|&laquo; The Adelaide theme guide]]

Latest revision as of 13:06, 19 May 2023

Display tabs with extra info on your product page. This allows you to break up the page into different sections. We recommend making use of this feature in particular, as separating your content into smaller chunks is especially beneficial for a few reasons...

  1. The "Add to cart" button appears higher on the page, so customers don't need to scroll so much.

  2. Pertinent information about the product is displayed right next to the product image, with more detailed information further down the page. This also entices customers to explore other areas of your store, and also to see reviews if enabled.


  3. Images attached to product variants can be seen to change when you select a variant. if your product description is too long, your customers cannot see what product they have selected.


Product specific information

  • Adding tabs to product pages

The tags for creating tabs are entered directly into the "Source Code" of your product description. To access the source code, click the "< >" icon in the toolbar.

In this example product page, you can see multiple tabs on the product page. To display tabs, we make use of the
<!--more-->  tag that can also be used in Blog Articles to cut the content up into smaller chunks.

We then specify that we want a tab titled "More Info", so the tag ends up looking like this...
<!--more--> <!--tab="More info"-->

In addition to this, there are other tabs on the page done the same way...

<!--more--> <!--tab="Video"-->

<!--more--> <!--tab="Features"-->

<!--more--> <!--tab="Specifications"-->

Product Reviews

Product reviews help store owners generate a ton of product reviews which help you to drive new traffic and sales through social, email and other channels. Product reviews is free and can be activated in your store's admin in the Products section.

This tab is displayed automatically if reviews are enabled.







« The Adelaide theme guide

Retrieved from "http://www.spiffystores.com.au/kb/index.php?title=Adelaide_ecommerce_theme_-_displaying_tabs_on_product_pages&oldid=9789"