# Blocks

Follow the standard Shopify procedure to modify or manage any block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FsGJ6tpGjjLYHkQe9J935%2Fadd_block.png?alt=media&#x26;token=494afba4-47e7-429b-b15c-80a11c87ee69" alt=""><figcaption></figcaption></figure>

## Menu <a href="#layout" id="layout"></a>

{% hint style="info" %}
For guidance on adding and editing menu items, refer to [this resource](https://help.shopify.com/en/manual/online-store/legacy/menus-and-links/editing-menus).
{% endhint %}

**Heading**

Set the title for the menu section.

**Menu**

Select the menu created in Admin: Navigation -> Menu.

#### Colors

Available color options to be changed include: Heading, Link, Link hover.

Example configuration for the theme block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FJRVRzrpfOUmqMyw6fVrw%2Fblogs_menu.png?alt=media&#x26;token=df862b81-431c-452b-ba0e-7008c053c19c" alt=""><figcaption></figcaption></figure>

***

## Grid of products

**Show heading**

If this option is not checked, you will see the heading in the heading of the accordion tab on mobile.

**Heading**

Set the title for the products section.

**Collection**

Select the collection created in Admin: Products-> Collection.

**Number of columns**

Select the number of columns on the desktop: either 1 or 2

**Number of columns tablet**

Select the number from 1 -3

#### Link

Select the **Link name** or left the field empty

#### Products

Select **Products** number from 2 to 15

**Align text relative to image**

Configurable as **top** or **center** placement

**Image ratio**

The option allows you to adjust the width-to-height proportion of an image. The theme provides seven options to fit your image to the desired size: **Auto**, **Portrait (3:4)**, **Landscape (4:3)**, **Square (1:1)**, **Round (1:1)**, **Social Story (9:16)**, and **Widescreen (16:9)**.

**Roundness of the image**

If you choose the **Custom** option, you can set the image roundness radius between 0 and 20 or keep the **Default** theme's roundness.

Options for controlling the visibility of elements in each product card include:

* Show second image on hover
* Show vendor
* Show price
* Enable review stars
* Truncate product name
* Underline on hover
* Show badge "Sale"
* Show badge "Sold Out"
* Show badge "Feature"

#### Colors

You can alter the **Heading** color in the product grid block.

#### Product card color

Alter the colors of elements within a product card block: Vendor, Vendor hover

* Product name
* Product name hover
* Regular Price
* Sale Price
* Old price
* Link
* Link hover

#### Review stars:

To specify the color for a particular element:

* Stars active
* Stars base

Example configuration for the theme block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FK3fwqA0Frr6yheVKivfU%2Fblogs_grid.png?alt=media&#x26;token=92741681-ab74-4ab9-96d7-e36a3e6fdb3b" alt=""><figcaption></figcaption></figure>

***

## Gallery

**Heading**

Set the title for the products section.

**Show heading**

If this option is not checked, you will see the heading in the heading of the accordion tab on mobile.

**Number of columns**

Select the number of columns on the desktop: either 1 to 6

**Image ratio**

The option allows you to adjust the width-to-height proportion of an image. The theme provides seven options to fit your image to the desired size: **Auto**, **Portrait (3:4)**, **Landscape (4:3)**, **Square (1:1)**, **Round (1:1)**, **Social Story (9:16)**, and **Widescreen (16:9)**.

**Roundness of the image**

If you choose the **Custom** option, you can set the image roundness radius between 0 and 20 or keep the **Default** theme's roundness.

The block contains individual images subblocks that share the same options:&#x20;

* **Image -** an image which can be added to individual banner
* **Tooltip -** the hint which shows above the image while hovering
* **Link -** can be set to each image

Include up to 18 subblocks.

#### **Colors**

Available color options to be changed include:

* Heading
* Tooltip background
* Tooltip text

Example configuration for the theme block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FYkWOp8vMP9MJFYkRK3iz%2Fblogs_gallery.png?alt=media&#x26;token=89cd6c21-ad26-4e4c-9ac7-bcb2b7fe4ea2" alt=""><figcaption></figcaption></figure>

***

## Banner

The block comprises an arrangement of various parts.

#### Image

**Image/Image hover**

Upload the main image and an optional alternate image to display on mouse hover.

**Image ratio/Image ratio mobile**

The option allows you to adjust the width-to-height proportion of an image. The theme provides seven options to fit your image to the desired size: **Auto**, **Portrait (3:4)**, **Landscape (4:3)**, **Square (1:1)**, **Round (1:1)**, **Social Story (9:16)**, and **Widescreen (16:9)**.

**Image mobile**

Upload a different image for the mobile version if necessary.

**Roundness of the image**

If you choose the **Custom** option, you can set the image roundness radius between 0 and 20 or keep the **Default** theme's roundness.

**Image overlay opacity**

Can be set from 0 to 100%. If it is set not 0 the option **Image overlay fill** is available.

#### Content

Modify the appearance and text within the banner image block.

**Link**

The link of the whole banner.

**Heading**

The title of the content block.

**Description**

The text of the content block below the title.

**Heading after description**

If enabled, you can add an additional text below the description.

**Button**

When text is entered, the button will be visible.

#### Settings

Provides standard configurations for the banner text.

**Heading size**

You can set the sizes:

* **Large**
* **Extra large**
* **Medium**
* **Small**
* **Extra small**.

**Underline on hover**

Tick the option to underline the heading on mouse hover.

**Text position/Text position mobile**

Choose from the following text positions for desktop and mobile:&#x20;

* **Top left**
* **Top**
* **Top right**
* **Center left**
* **Center**
* **Center right**
* **Bottom left**
* **Bottom**
* **Bottom right**

**Text align**

You can set the text to align either **Left** or **Center**.

**Description width/Description width tablet**

The desktop/tablet width can range from 0% to 100%.

**Description width mobile**

The desktop width can range from 40% to 100%.

**Show text box**

If the option is enabled the option **Text box opacity** can be chosen from 0 to 100%

#### Colors

Available color options to be changed include:

* Link
* Link hover
* Description

#### Button

**Show background**: enable/disable background visibility.

Available color options for the button to be changed include:

* Background
* Background gradient
* Border
* Text
* Show background on hover: toggling the background when mouse hover is done
* Background hover
* Background gradient hover
* Border hover
* Text hover
* Enable shadow. If the options is enabled you can change the Shadow and Shadow hover here.

#### Box

You can change the **background** for the whole box.

#### Other

Option is linked to the image overlay color.

Example configuration for the theme block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FM4ZRRB0zaMKhf4XvJOkT%2Fblogs_banner.png?alt=media&#x26;token=4799c099-4ddd-4f9b-a995-8ce05db094e8" alt=""><figcaption></figcaption></figure>

***

## Recent post

**Heading**

Set the title for the products section.

**Show heading**

If this option is not checked, you will see the heading in the heading of the accordion tab on mobile.

**Number of columns**

Select the number of columns on the desktop: either 1 or 2

**Number of columns tablet**

Select the number from 1 -3

**Blog**

Select the **Blog** created in admin.

To create blogs and articles for your Shopify store, navigate to Shopify admin -> Content -> Blog posts. For more details, consult the [Shopify documentation](https://help.shopify.com/en/manual/online-store/blogs/writing-blogs).

**Blog posts**

The number of posts can be set from **1 -16**

**Align text relative to image**

Can be set as **Top** or **Center**

**Image ratio**

The option allows you to adjust the width-to-height proportion of an image. The theme provides seven options to fit your image to the desired size: **Auto**, **Portrait (3:4)**, **Landscape (4:3)**, **Square (1:1)**, **Round (1:1)**, **Social Story (9:16)**, and **Widescreen (16:9)**.

**Show featured image**

Enable the option in order to display an image for each article. Assign pictures to the blog articles in your Shopify admin.

**Roundness of the image**

If you choose the **Custom** option, you can set the image roundness radius between 0 and 20 or keep the **Default** theme's roundness.

**Truncate post heading**

This option enables you to shorten the titles of blog posts.

**Underline on hover**

Tick the option to underline the titles of articles on mouse hover.

**Show tags**

This option enables showing the tags of blog posts.

**Show date**

This option enables showing the publication date of blog posts.

**Show author**

Enable the option to display an author.

**Show comment count**

Enable the option to display a comment count.

**Excerpt**

Available in variants: Hide, Show, Show truncated content.

**Colors**

Alter the colors of elements within a block:

* Heading
* Link
* Link hover
* Description

Example configuration for the theme block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FVVFivfS0yQL5eLf57cFs%2Fblogs_recent.png?alt=media&#x26;token=a30e58f1-cceb-48a2-8cc1-072ce5df35b1" alt=""><figcaption></figcaption></figure>

***

## Tags

To display tags in the sidebar, add the **“Sidebar Tags”** block.

**Heading**

Set the title for the products section.

**Show heading**

If this option is not checked, you will see the heading in the heading of the accordion tab on mobile.

The block contains individual tags that share the same options:&#x20;

* **Button name -** the title of corresponding tag&#x20;
* **Link -** the title of corresponding tag

You can include as many as 18 subblocks.

#### **Colors**

You can alter the **Heading** color in the block.

#### Button

**Show background**: enable/disable background visibility.

Available color options to be changed include:

* Background
* Background gradient
* Border
* Text
* Show background on hover: toggling the background when mouse hover is done
* Background hover
* Background gradient hover
* Border hover
* Text hover
* Enable shadow. If the options is enabled you can change the Shadow and Shadow hover here.

Example configuration for the theme block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FiClUJtn5Do5oLOslcSJi%2Fblogs_tags.png?alt=media&#x26;token=5ebe43b7-7c53-4a93-834c-e4b26238af55" alt=""><figcaption></figcaption></figure>

***

## Socials

If you need the subscription to be displayed as a content block in the sidebar, you need to add this block.

**Heading size**

You can set the sizes:

* **Large**
* **Biggest**
* **Medium**
* **Small**
* **Extra small**.

**Heading**

Enter the simpe text for heading above the form

**Description**

To display this block, insert text or HTML code here. By default it it empty and not shown.

**Show email signup**

If the option is enabled you will see the **Terms and conditions message** field and the newsletter  form.

#### Social media icons

{% hint style="info" %}
To display your social media accounts, link them in your theme settings.
{% endhint %}

**Show social media icons, Enable Follow on Shop**: enable if you need these options.

#### Colors

Available color options to be changed include: Heading, Description, Text link, Text link hover, Social icons, Social icons on hover

#### Input

For the input field you can change such colors options: Background, Border, Text, Icon, Background hover, Border hover, Outline hover, Text hover, Icon hover.

Example configuration for the theme block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fe9XLqrp5Ot8tS6eMFs12%2Fblogs_social.png?alt=media&#x26;token=42aa8574-e46d-417a-a561-0f39454cf720" alt=""><figcaption></figcaption></figure>

***

## Media with text

**Image display**

Toggle image visibility using this option.

**Image ratio**

The option allows you to adjust the width-to-height proportion of an image. The theme provides seven options to fit your image to the desired size: **Auto**, **Portrait (3:4)**, **Landscape (4:3)**, **Square (1:1)**, **Round (1:1)**, **Social Story (9:16)**, and **Widescreen (16:9)**.

**Image**

Select a picture.

**Link**

Past a link or search.

**Heading**

Set the title for the products section.

**Show heading**

If this option is not checked, you will see the heading in the heading of the accordion tab on mobile.

**Align text relative to icon**

Align the text to the top or center.

The block contains individual subblocks with text+icon that share the same fields: **Preset icon name** and **Description.**

Include up to 5 subblocks.

Example configuration for the theme block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FYtxVORwYYKZbQmOOFzSh%2Fblogs_media_text.png?alt=media&#x26;token=1c5d00ce-aa7c-44b6-98be-3c0702083bd2" alt=""><figcaption></figcaption></figure>

***

## Featured collection

**Show heading**

If this option is not checked, you will see the heading in the heading of the accordion tab on mobile.

**Heading**

Set the title for the products section.

**Collection**

Select the collection created in Admin: Products-> Collection.

{% hint style="info" %}
You can view, create, and edit collections from the [**Collections**](https://admin.shopify.com/collections) page of your Shopify admin.
{% endhint %}

#### Slider settings

**Navigation** can be disabled or set as: Dots and arrows, Dots or Arrows.

#### Products

**Number of columns**

Select the number of columns on the desktop: either 1 or 2

**Number of columns tablet**

Select the number from 1 -3

**Image ratio**

The option allows you to adjust the width-to-height proportion of an image. The theme provides seven options to fit your image to the desired size: **Auto**, **Portrait (3:4)**, **Landscape (4:3)**, **Square (1:1)**, **Round (1:1)**, **Social Story (9:16)**, and **Widescreen (16:9)**.

**Roundness of the image**

If you choose the **Custom** option, you can set the image roundness radius between 0 and 20 or keep the **Default** theme's roundness.

Select **Products** number from 2 to 50.

**Customize**

If selected, the following options are available: Text align - Left or Center, Underline on hover, Show badge "Sale", Show badge "Sold Out", Show badge "Feature", Show "Countdown", Show vendor, Show price, Truncate product name, Enable review stars.

**Colors**

Available color options to be changed include: Heading.

**Product card color** options include such colors: Vendor, Transparent, Vendor hover, Product name, Product name hover, Regular Price, Sale Price, Old price.

**Badges** options include such colors: Sale badge, Sale badge text, Featured badge, Featured badge text, \
Sold out badge, Sold out badge text, Countdown background, Countdown text.

**Media button** options include such colors: Slider arrows, Slider dots.

**Review stars** options include such colors: Stars active, Stars base.

Example configuration for the theme block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fc1Y1tR19elhUVLGo7J3T%2Fblogs_feat_col.png?alt=media&#x26;token=bb22be5c-74e0-48b0-8935-283e73a8e6d7" alt=""><figcaption></figcaption></figure>

***

## Banner with text outside

**Image**

**Image/Image hover**

Upload the main image and an optional alternate image to display on mouse hover.

**Image ratio/Image ratio mobile**

The option allows you to adjust the width-to-height proportion of an image. The theme provides seven options to fit your image to the desired size: **Auto**, **Portrait (3:4)**, **Landscape (4:3)**, **Square (1:1)**, **Round (1:1)**, **Social Story (9:16)**, and **Widescreen (16:9)**.

**Image mobile**

Upload a different image for the mobile version if necessary.

**Roundness of the image**

If you choose the **Custom** option, you can set the image roundness radius between 0 and 20 or keep the **Default** theme's roundness.

**Content**

Modify the appearance and text within the banner image block.

**Link**

The link of the whole banner.

**Heading**

The title of the content block.

**Description**

The text of the content block below the title.

**Button**

When text is entered, the button will be visible.

**Settings**

Provides standard configurations for the banner text.

**Heading size/Heading size tablet/Heading size mobile**

You can set the sizes from 0 to 200 - for desktop version, from 0 to 100 for tablet/mobile.

**Underline on hover**

Tick the option to underline the heading on mouse hover.

**Text align**

You can set the text to align either **Left** or **Center**.

**Colors**

Available color options to be changed include: Link, Link hover, Description.

**Button**

**Show background**: enable/disable background visibility.

Available color options for the button to be changed include: Background, Background gradient, Border, Text, Show background on hover: toggling the background when mouse hover is done, Background hover, Background gradient hover, Border hover, Text hover, Enable shadow. If the options is enabled you can change the Shadow and Shadow hover here.

Example configuration for the theme block:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FhXLeUbeE8cbedjxhZNWG%2Fblogs_ban_out.png?alt=media&#x26;token=8fe2d638-ef18-4914-b0ab-93f3f00eeaa0" alt=""><figcaption></figcaption></figure>
