Frequently Asked Questions About Website Building and Design

SHOPLINE provides flexible website building tools to help you create and customize your storefront's design and functionality. This FAQ answers common questions about website building, storefront design, metafields, custom code, and other storefront features.

Storefront Design FAQs

Q1: How do I change the copyright text on the storefront?

You can update the copyright text from your theme's default text settings.

To change the copyright text:

1. Go to SHOPLINE Admin > Online Store > Design.
2. Under My theme, click ⋯ (More actions) next to your current theme, then select Edit default text.

3. Search for Copyright.

   

4. Update the text, then click Update.

Q2: How do I change fonts across my entire storefront?

You can change the font used throughout your storefront from the Typography section in the Theme Editor's Global Settings. For more information, refer to "Configuring Global Settings Across Your Store Pages (OS 3.0 Themes)," specifically the "Customizing Colors and Typography" section. 

If the available fonts do not meet your needs, you can further customize your storefront using custom CSS. If you need assistance implementing custom fonts with custom CSS, please contact SHOPLINE Support.

Q3: How do I add a favicon to my storefront?

Your favicon appears in browser tabs and Google Search results. You can upload or update it from your theme settings. 

To add or update your favicon:

1. Go to SHOPLINE Admin > Online Store > Design, then click Design for your current theme.
2. In the Theme Editor, click the Global Settings icon. 
3. Expand the Favicon section.

4. Under Site icon, click + Add image and upload your favicon.

   

5. Click Save.

Q4: How do I create anchor links in a blog post?

Anchor links allow customers to jump directly to specific sections of a blog post, making long articles easier to navigate.

To create anchor links in a blog post:

1. In the blog editor, format each section title using Heading 1–Heading 6. Only headings can be used as anchor targets.

2. Highlight the text you want to use as the anchor link (for example, a Table of Contents item), then click the Link icon.

   

3. In the URL field, enter #. A list of available headings in the blog post will appear.

   

4. Select the heading you want to link to, choose Current window under Open link in..., then click Save.

   

Customers can click the anchor link on your storefront to jump directly to the selected section of the blog post.

Metafield FAQs

Q5: How do I display a YouTube video on specific product pages?

You can display a different YouTube video on each product page by storing the embed code in a Product metafield.

To set this up:

1. Go to SHOPLINE Admin > Settings > Custom data. Under Metafields, create a Product metafield with the Multi-text type. For detailed instructions on creating a metafield, refer to "Customizing Your Store Content with Metafields."

2. Open each product's edit page and paste the YouTube embed code into the Product metafields section.

   

3. In the Theme Editor, add a Custom HTML block and insert the following code: 

   {{{product.metafields.my_fields.Video.value}}}

Q6: How do I display the product "Summary" field on the product detail page in OS 2.1?

The Summary component is not available in OS 2.1 themes — it is only supported in OS 2.0. As a workaround, you can store the summary text in a product metafield and display it using a Text component.

To display a product summary in OS 2.1:

1. Go to SHOPLINE Admin > Settings > Custom data and create a Product metafield. For detailed instructions on creating a metafield, refer to "Customizing Your Store Content with Metafields."

2. Open each product's edit page and enter the summary text in the Product metafields section.

   

3. In the Theme Editor, open the product detail page, add a Text component, and set its Dynamic Source to the Product metafield you created.

   

Q7: How do I display Rich Text metafield values on the storefront?

The method for displaying Rich Text metafields depends on your theme version.

OS 3.0 themes: Use SLINE syntax with metafield_tag to display Rich Text metafields. Refer to the SHOPLINE Developer Documentation for complete syntax details.

OS 2.0 and OS 2.1 themes: Rich Text metafields are not fully supported. Use a Multi-line text metafield instead, then display it with the following code:

Custom Code FAQs

Q8: How do I make a phone number clickable on mobile devices?

You can make a phone number clickable using an HTML tel: link. When customers tap the link on a mobile device, it opens the device's phone app with the number pre-filled.

In the Theme Editor, add the following code to a Custom HTML block or a Rich text field, replacing the sample phone number with your own: