Show an icon in a tab title

You can show an icon in the title of the default tab, in the title of a tab created from a heading, and in the title of a ProTab.

In each case, showing the icon is as easy as adding an HTML img tag for the icon image in front of the tab title text.

In the title of the default tab

To show an icon in the title of the default tab:

  1. From your Shopify admin, go to Settings > Files.

  2. In the row of the image that you want to show, click Copy link.

  3. From your Shopify admin, go to Apps.

  4. Click the Tabs Studio app.

  5. From the main menu in the Tabs Studio app, click Tabs.

  6. Click Edit settings.

  7. In the Default tab title field, before the title text, enter an HTML img tag.

    For example:

    <img src="" />
  8. In the src attribute of the img tag, paste the copied image URL, like this:

    <img src="https://cdn.shopify.com/s/files/1/0000/0000/files/image.svg?v=1646841301" />
  9. Click Save and close.

In the title of a tab created from a heading

To show an icon in the title of a tab created from a heading:

  1. From your Shopify admin, go to Settings > Files.

  2. In the row of the image that you want to show, click Copy link.

  3. From your Shopify admin, go to Products.

  4. Click the name of the product that you want to edit.

  5. In the rich text editor, click Show HTML, .

    The Show HTML button
  6. Inside the heading element that the tab is created from, before the heading text, enter an HTML img tag.

    For example:

    <h3><img src="" />Features</h3>
  7. In the src attribute of the img tag, paste the copied image URL, like this:

    <h3><img src="https://cdn.shopify.com/s/files/1/0000/0000/files/image.svg?v=1646841301" />Features</h3>
  8. Click Save.

In the title of a ProTab

To show an icon in the title of a ProTab:

  1. From your Shopify admin, go to Settings > Files.

  2. In the row of the image that you want to show, click Copy link.

  3. From your Shopify admin, go to Apps.

  4. Click the Tabs Studio app.

  5. From the main menu in the Tabs Studio app, click Tabs.

  6. Create a new ProTab or click the title of the ProTab that you want to edit.

  7. In the Title field, before the title text, enter an HTML img tag.

    For example:

    <img src="" />
  8. In the src attribute of the img tag, paste the copied image URL, like this:

    <img src="https://cdn.shopify.com/s/files/1/0000/0000/files/image.svg?v=1646841301" />
  9. Click Save.

Still need help? Contact Us Contact Us