Here are some examples of how tabs are displayed in each of our themes.Thinking of upgrading your Shopify store with a paid theme and wondering if Turbo from Out of The Sandbox is worth the investment? In this Shopify Turbo Theme Review, you will know more about this particular theme and you will find out if it deserves your money, and how to check the availability of the 15% temporary discount. Automatically selecting a tabĪt this time, it is not possible to automatically make a different tab's content be visible when the page loads based on the link the user clicks. On mobile devices, the theme will attempt to keep all of the tabs on the same line, but, depending on the exact amount of space needed, it may go to another line. This will achieve a look similar to this image:
OUT OF THE SANDBOX TURBO CODE
In the following code example, each tab contains a three-item bulleted list: To create bullet lists within the tabs of a product description, you can use ordered list elements with bullet list item elements ( and ) in the HTML section of each product (top right corner of the product description).
However, keep in mind that your tabs will eventually jump to a second line which can have undesirable results. You can repeat this, increasing the number in the "id" tag (shown in bold above) each time. Then, add this code below the code for Tab 3 content in the second part of the code: Tab 4 content You can add additional tabs as needed by mimicking the code above and increasing the numbers in the code.įor example, to add a fourth tab, add this line below the code for Tab 3 in the first block of code: Tab 4 Then, the last six lines control the actual content that users see when clicking a specific tab. The first part, which is the first six lines, is used to create the labels that users see on the tabs. Note that there are two distinct sections of the code above. In the example code, the bold text should be customized to your specific content: You can create tabs by following this HTML example. Please note: you must paste the code in the HTML mode for this to work.
You can also add tabs to sections such as Custom Liquid and Custom HTML to enhance templates Step 7 In the Product admin page, click the Show HTML button in the rich text editor to enter HTML mode. Navigate to your Product in the Shopify Admin. Step 3Ĭlick the Get Code button at the top of the editor Step 4Ĭlick the Copy to Clipboard button to copy all of the tabs code. Use the live Tabs Editor to easily generate your tabs.Įnter the tab titles and insert the text you'd like to appear in each tab. Tabs also help your customers easily find specific information quickly by clicking on the related tab.Ĭommon topics for tabs include product description, ingredients, nutritional information, instructions or how to use, information about the brand, reviews, feature or product specifications, shipping, and returns.
They can be a great way to reduce visual clutter while also showing much more detail without having to send a customer to a different page. Tabs are often used to break up different information/topics that you want your customers to be aware of when reading about the product or service. Adding tabs to product descriptions is a good way to add more details about products in a small amount of space.
0 kommentar(er)
