Melbourne ecommerce theme - displaying tabs on product pages

From Spiffy Stores Knowledge Base

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.

Tab 1 - Product specific information

In the demo store, you can see a tab on the product page titled "More Information". To display this tab, we make use of the <!--more-->  tag that can also be used in Blog Articles to cut the content up into smaller chunks.

We recommend making use of this feature in particular, as separating your content into smaller chunks is especially beneficial for a couple of reasons...

  • The "Add to cart" button appears higher on the page, so customers don't need to scroll so much.
  • 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...

Jelly chupa chups donut croissant I love jelly cupcake I love. Bear claw lollipop I love lemon drops chocolate cake I love.

Macaroon cotton candy dragée dessert cheesecake pudding liquorice I love tiramisu.

Jelly-o gummi bears gingerbread chocolate cake. Croissant powder wafer fruitcake candy.

Then we add in the more tag in the source code view...

<!--more--> 

And then the remainder of the product information is displayed in a tab titled "More Information". We recommend that any videos that you wish to include in your product description be included in this tab. They will otherwise be cut off on mobile devices, as they are often too large to display in a small area.

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.

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.

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.

Tab 2 - General information

In the demo store, you can see a tab on the product page titled "Delivery Information". To display this tab, please follow the instructions below.

  1. Go to the Pages & blogs section of your store’s Toolbox.
  2. 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.
  3. Click the Create Page button to save your page.
  4. Edit the page, and click the handle link.
  5. Change the handle of the page to tab-2.
  6. On the right, set Page Visibility to hidden.
  7. This tab should then show up on all product pages.

Tab 3 - General information

In the demo store, you can see a tab on the product page titled "Size Information". To display this tab, please follow the instructions below.

  1. Go to the Pages & blogs section of your store’s Toolbox.
  2. 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.
  3. Click the Create Page button to save your page.
  4. Edit the page, and click the handle link.
  5. Change the handle of the page to tab-3.
  6. On the right, set Page Visibility to hidden.
  7. This tab should then show up on all product pages.

Tab 3 - Product Reviews

In the [demo store], you can see a "Reviews" tab. To enable this tab, please follow the instructions on how to enable Yotpo reviews in your store.



« The Melbourne theme guide