Taiga
documentation

Featured article

Featured Article section allows you to effectively showcase selected articles, making them stand out and encouraging visitors to engage with your content.


 

✅ Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Featured Article Section.
    Click on 'Add section' and select 'Featured Article' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Featured Article section, click 'Save' to implement your adjustments.

Edit Settings: 

Featured Article Picker: Select the article you wish to feature directly from your content.

Color Scheme: Customize to align with your brand and site aesthetics.


Desktop Layout:

Full Width: Toggle this option to extend the article's layout across the full width of the page.
Media Position: Choose to place media elements either before (Media first) or after (Media last) the article text, affecting the visual flow of the section.
Text Content Width: Adjust the width of the text area to be "Wide," "Default," or "Narrow," according to your design preference.
Text Alignment: Align the article text to the left, center, or right, matching your overall aesthetic.
Button Width: Set the button to full width to span the entire content width area previously defined.
Margins: Customize both the top and bottom margins to ensure proper spacing within the layout.


Mobile Layout:

Text Alignment: Align the text to the left, center, or right, optimizing readability on smaller screens.
Button Width: Extend buttons to fill the text container, enhancing mobile interaction without affecting desktop button size.
Margins: Adjust the top and bottom margins to ensure the article is well-presented on mobile devices.

Customize Blocks

Image Block:

Aspect Ratio: Customize the aspect ratio of the featured article image to ensure it fits well with your site's design.

Heading Block:

Heading Hierarchy: Manually set the hierarchy of the heading to structure the content effectively.

Desktop Layout:
Heading Size Modifier: Choose from tiny, small, default, large, huge, gigantic, or outrageous to adjust the size according to your design preference.
Margin Top Slider: Customize the top margin to create the desired space above the heading.
Mobile Layout:
Heading Size Modifier: Choose from tiny, small, default, large, huge, gigantic, or outrageous to adjust the size according to your design preference.
Margin Top Slider: Adjust the top and bottom margins to ensure the article is well-presented on mobile devices.

Details Block:

Show Article Author: Checkbox to toggle the display of the article's author.
Show Published Date: Checkbox to toggle the display of the article's publication date.
Desktop & Mobile Layout for Details:
Margin Top Slider: Adjust the top margin for both desktop and mobile views to space the details block appropriately.

 

Excerpt Block:

Desktop & Mobile Layout for Excerpt:
Heading Size Modifier: Choose the size for the excerpt's presentation, with options ranging from tiny to outrageous.
Margin Top Slider: Customize the top margin for both desktop and mobile layouts to align with the overall design.

 

Button Block:

Button Label: Define the text that appears on the button.
Button Style: Select from Primary, Secondary, or Link styles to match the button with your site's theme.
Desktop & Mobile Layout for Button:
Heading Size Modifier: Adjust the button's size for both desktop and mobile layouts, with the same range of size options.
Margin Top Slider: Set the top margin to position the button perfectly within the section.