1. Home
  2. Docs
  3. Shopify Eurus Theme
  4. User Guide
  5. Section & Blocks

Section & Blocks

Promotion banner

Promotion banner section is where you highlight your promotional deals on the home page.

General

Promotion banner Heading Enter the name/title of the banner to track its performance with Google Analytics or Meta Pixel.
This heading will not be shown on the frontend.
First image / Second image / Third image Click the Select image button to choose the image from your library or free image resource.
For each promotion banner, you can add a maximum of 3 different images in it.
Banner link Enter the link that users will be redirected to when they click on the image.
Each banner can have a maximum of 3 links in accordance with 3 images.
Desktop height Adjust the height of the image on desktop devices (450 px, 550 px, 650 px, 750 px, Adapt to first image, Fullscreen).
Mobile height Adjust the height of the image on mobile devices (250 px, 300 px, 400 px, 500 px, Adapt to first image, Fullscreen).
Image overlay opacity Adjust the overlay opacity of the image (range from 0% to 100%).
The higher the value, the darker the image is.
Desktop position Adjust the position of the content on the promotion banner on desktop devices.
Custom horizontal position Adjust the position of the content on the entire length of the banner.
Range from 0% (on the left margin of the banner) to 100% (on the right margin of the banner).
Used with Custom position only
Custom vertical position Adjust the position of the content on the entire width of the banner.
Ranges from 0% (on the top margin of the banner) to 100% (on the bottom margin of the banner).
Used with Custom position only
Alignment Adjust the alignment of the content on the promotion banner.
Used as Hero Tick the checkbox to use the promotion banner as Hero of your website.
When enabled, the images will not be lazy loaded, which will not affect the user experience on your site.
Mobile Layout Mobile image Choose the image to display on the promotion banner on mobile devices only. 
Mobile position Adjust the position of the content on the promotion banner on mobile devices.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Text

Configure the text of the promotion banner.

Heading Enter the heading of the promotion banner, which will be shown on the banner.
Heading size Adjust the size of the heading (range from 50-200%).
Subheading Enter the subheading to display on top of the heading with a smaller size.
Text Enter the content of the promotion banner.
Text size Adjust the size of the text (range from 50-200%).
Content box type Choose the type of the text box.
Content box color (light/dark) Choose the color of the text box in light/dark mode. The default color is transparent.
Add frame Tick the checkbox to add a frame for the text box.

Button

Configure the button of the promotion banner.

Button First button label Enter the label of the first button. If left empty, the button will be hidden.
First button link Enter the link the users will be redirected to when they click the first button.
Second button label Enter the label of the second button. If left empty, the button will be hidden.
Second button link Enter the link the users will be redirected to when they click the second button.
Show as primary button Tick the checkbox to set the button's styles to be the same as the style of the primary buttons.
Otherwise, it will follow the outline button's style.
Styles  Button color Choose the color of the primary button (config Show as primary button is enabled), which will have hover effect
Button hover color Choose the color of the button when users hover on it.
Button text color Choose the color of the text on the primary button.
Button text hover color Choose the color of the text on the primary button when users hover on it.
Secondary button color Choose the color of the secondary button (if config Show as primary button is disabled), which will have no effect.

Countdown timer

Add a countdown timer to instill a sense of urgency among your customers and encourages them to buy a product.

Countdown timer Timezone Choose the timezone to schedule the announcement bar.
Year/month/day/hour/minute Choose the date and time for the timer to countdown to.
Styles  Timer color (light/dark) Choose the color of the timer.
Text color (light/dark) Choose the color of the text.
Background color (light/dark) Choose the color of the background.

Image with text

Image with text section section is where you can display images with long text.

General

Image with text First image / Second image Click the Select image button to choose the images from your library or free image resource.
Desktop image height Adjust the height of the image on desktop devices (450 px, 550 px, 650 px, 750 px, Adapt to first image, Fullscreen).
Mobile image height Adjust the height of the image on mobile devices (250 px, 300 px, 400 px, 500 px, Adapt to first image, Fullscreen).
Desktop image width Adjust the width of the image on desktop devices (Large, Medium).
Image layout Adjust the layout of the image (Normal, Stacked).
Corner radius Adjust the corner radius of the image in the section (range from 0 to 40 px).
Image alignment Adjust the alignment of the image in the section (Left, Right).
If you choose Left, on desktop devices the image is on the left section, on mobile devices the image is above the text.
If you choose Right, on desktop devices the image is on the right section, on mobile devices the image is under the text.
Content layout Adjust the layout of the content (Overlap, Not overlap).
Text position Adjust the position of the text section (Top, Center, Bottom). This setting is only applied for desktop devices.
Text alignment Adjust the alignment of the text and button (Left, Center, Right).
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices.
Disable it to set the section’s width to be the same as the page width set in the theme setting.
Background color (light/dark) Choose the background color in the light/dark mode.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Content

Configure the content of the section.

Subheading Enter the subheading to display on top of the heading with a smaller size.
Heading Enter the heading of the promotion banner, which will be shown on the banner.
Heading size Adjust the size of the heading. Ranges from 50-200%.
Text Enter the content of the section.

Button

Configure the button of the section.

Button label Enter the label of the first button. If left empty, the button will be hidden.
Button link Enter the link users will be redirected to if they click on the button.

Slideshow

Slideshow section is where you can add a slideshow to your home page.

General

Slideshow Desktop height Adjust the height of the slideshow section on desktop devices (450 px, 550 px, 650 px, 750 px, Adapt to first image, Fullscreen).
Mobile height Adjust the height of the slideshow section on mobile devices (250 px, 300 px, 400 px, 500 px, Adapt to first image, Fullscreen).
Enable auto-play Tick the checkbox to enable auto-play for slides.
Change slides every If you enable auto-play function, set the switching time for slides (range from 5 to 10 seconds).
Next/Previous arrows Tick the checkbox to show navigation arrows for the slides.
Pagination Set the pagination format as Dots or Bars, or set None to hide the pagination.
Transition style Set the transition style for the slides ( Fade, Default).
Used as Hero Tick the checkbox to use the section as Hero.
When enabled, the images will not be lazy loaded, which will not affect the user experience on your site.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Slideshow

Configure each slide of the slideshow.

Slide Image Click the Select image button to select an image from your library or the free image resource.
Mobile image Click Select image button to select an image from your library or free image resources to show in the slide on mobile devices.
Overlay opacity Adjust the overlay opacity of the image in the slide (range from 0 to 100).
The higher the value, the darker the image is.
Subheading Enter the subheading to display on top of the heading with a smaller size.
Heading Enter the heading of the slide.
Heading size Adjust the size of the heading (range from 50-200%).
Text Enter the content of the section.
First button label Enter the label of the first button. If left empty, the button will be hidden.
First button link Enter the link the users will be redirected to when they click the first button.
Second button label Enter the label of the second button. If left empty, the button will be hidden.
Second button link Enter the link the users will be redirected to when they click the second button.
Show as primary button Tick the checkbox to set the button's styles to be the same as the style of the primary buttons.
Otherwise, it will follow the outline button's style.
Position Adjust the alignment of the text and button on the entire slide.
Custom horizontal position Adjust the position of the text and button on the entire length of the banner.
Range from 0% (on the left margin of the banner) to 100% (on the right margin of the banner).
Used with Custom content position only.
Custom vertical position Adjust the position of the text and button on the entire width of the banner.
Ranges from 0% (on the top margin of the banner) to 100% (on the bottom margin of the banner).
Used with Custom content position only.
Styles Button color Choose the color of the primary button (config Show as primary button is enabled), which will have hover effect
Button hover color Choose the color of the button when users hover on it.
Button text color Choose the color of the text on the primary button.
Button text hover color Choose the color of the text on the primary button when users hover on it.
Secondary button color Choose the color of the secondary button (if config Show as primary button is disabled), which will have no effect.

Rich text

Rich text section is used to add one full-width block of text.

General

Desktop content position Adjust the content position on desktop devices (Left, Center, Right).
Content alignment Adjust the content alignment (Left, Center, Right).
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Background color (light/dark) Choose the background color of the menu to display in light/dark mode.
Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Heading

Configure the heading of the rich text.

Heading Enter the heading of the text block.
Heading base size Adjust the size of the heading (range from 50% to 200%).

Text

Configure the text of the rich text.

Text Enter the content of the section.

Button

Configure the button of the rich text. 

First button label Enter the label of the first button. If left empty, the button will be hidden.
First button link Enter the link the users will be redirected to when they click the first button.
Second button label Enter the label of the second button. If left empty, the button will be hidden.
Second button link Enter the link the users will be redirected to when they click the second button.
Show as primary button Tick the checkbox to set the button's styles to be the same as the style of the primary buttons.
Otherwise, it will follow the outline button's style.

Caption

Configure the caption of the rich text.

Text Enter the tagline. If left empty, the caption section will disappear.
Text style Adjust the size of the tagline (Subtitle, Uppercase).
Text size Adjust the size of the text (range from 50% to 200%).

Map

Mapsection is where you can display the map that show the store location.

General

Map Store address Enter the exact address of your business that exists on Google Maps. The theme will then find the address on Google Maps and show it in the section.
Desktop height Adjust the height of the map section on desktop devices (450 px, 550 px, 650 px, 750 px, Adapt to first image, Fullscreen).
Mobile height Adjust the height of the map section on mobile devices (250 px, 300 px, 400 px, 500 px, Adapt to first image, Fullscreen).
Image Choose an image to display instead of the map if needed. Click the Select image button to choose an image from your library or free image resources.
Content position Adjust the position of the text and button in the map section (Left, Right, Layered).
Left - The store information is displayed on the left side and the map is on the right side.
Right - The store information is displayed on the right side and the map is on the left side.
Layered - The map is displayed fullwidth in the section and the store information is displayed on a frame over the map.
Content alignment Adjust the alignment of the text and button in the map section.
Make section full width Tick the checkbox to set the map section’s width to be the same as full width of users’ devices.
Disable it to set the map section’s width to be the same as the page width set in the theme setting.
Styles Background color (light/dark) Choose the background color of the map section in the light/dark mode.
Text color (light/dark) Choose the text color of the map section in the light/dark mode.
Heading and title color (light/dark) Choose the heading and title color of the map section in the light/dark mode.
Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Store name

Configure the store name.

Heading Enter the store name on display in the map section.
Heading size Adjust the size of the heading (range from 50-200%).

Address and hours

Configure the address and hour.

Text Enter the address, business hours and any additional information to display in the map section.
Text size Adjust the size of the text (range from 50-200%).

Button

Configure the button.

Button label Enter the label of the first button. If left empty, the button will be hidden.
*Note: When users click on the button, they will be redirected to Google Maps with the address you set.

Text columns with icons

This section allows you to display text with icons in columns.

General

Text columns with icons Heading Enter the heading of the section.
Heading size Adjust the size of the heading (range from 50-200%).
Secondary background Adjust the background color of the columns in the section (None, Column Background, Section Background).
None - The section and column background is the background color in theme settings.
Column Background - The column background is the accent color in theme settings.
Section Background - The section and column background is the accent color in theme settings. 
Column content alignment Adjust the alignment of the text in the columns (Left, Center, Right).
Make section full width Tick the checkbox to set the multicolumn section’s width to be the same as full width of users’ devices.
Disable it to set the map section’s width to be the same as the page width set in the theme setting.
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Column layout on desktop Adjust the number of columns displayed in the desktops devices (1 to 4 columns).
Icon position Adjust the position of the icon (Above text, Next to text).
Icon size Adjust the size of the icon (range from 20px to 48px).
Mobile layout Column layout on mobile Adjust the number of columns (1 or 2 columns) displayed in the mobile devices.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Column

Configure each column.

Icon Choose an icon from our 21 premade icons.
Heading Enter the heading of the column.
Heading size Adjust the size of the heading (range from 50-200%).
Text Enter the content of the column.

Text columns with images

This section allows you to display text with images in columns.

Text columns with images Heading Enter the heading of the section.
Heading size Adjust the size of the heading (range from 50-200%).
Secondary background Adjust the background color of the columns in the section (None, Column Background, Section Background).
None - The section and column background is the background color in theme settings.
Column Background - The column background is the accent color in theme settings.
Section Background - The section and column background is the accent color in theme settings. 
Column content alignment Adjust the alignment of the text in the columns (Left, Center, Right).
Make section full width Tick the checkbox to set the multicolumn section’s width to be the same as full width of users’ devices.
Disable it to set the map section’s width to be the same as the page width set in the theme setting.
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Column layout on desktop Adjust the number of columns displayed in the desktops devices (1 to 4 columns).
Mobile layout Column layout on mobile Adjust the number of columns (1 or 2 columns) displayed in the mobile devices.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Column

Configure each column.

Image Click the Select image button to select an image from your library or free image resources.
Heading Enter the heading of the column.
Heading size Adjust the size of the heading (range from 50-200%).
Text Enter the content of the column.
Button label Enter the label of the button. If left empty, the button will be hidden.
Button link Enter the link the users will be redirected to when they click the button.
Show as primary button Tick the checkbox to set the button's styles to be the same as the style of the primary buttons.
Otherwise, it will follow the outline button's style.

Blog post

Blog post section is where you share your blog articles to your audience.

Blog post Heading Enter the heading of the blog post section.
Heading size Adjust the size of the heading (range from 50-200%).
Heading alignment Adjust the alignment of the heading (Left, Center, Right).
Blog Choose the blog whose posts you want to display in the section.
Blog posts Choose the total number of blog posts to be displayed in the section (range from 2 to 8 posts).
Number of columns on desktop Adjust the number of columns to be displayed in desktop devices.
Mobile layout Adjust the appearance of blog posts on mobile devices (Image top, Image left).
Show 'View all' button Tick the checkbox to show the “View all” button.
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Blog items Show featured image Tick the checkbox to show the featured image of the blog post.
Image ratio Adjust the featured image.
Only works when enabling the featured image function.
Items secondary background Tick the checkbox to set the background color of each blog post as the accent color of theme settings. 
Show author Tick the checkbox to show the author of the blog post.
Show blog Tick the checkbox to show the blog post’s name.
Show date Tick the checkbox to show the published date of the blog post.
Show excerpt Tick the checkbox to show the excerpt of the blog post.
Show tags Tick the checkbox to show the tags of the blog post.
Show comment counts Tick the checkbox to show the number of comments of the blog post.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

FAQ

FAQ section shows your FAQs in collapsible form.

General

Heading Enter the heading of the FAQ section.
Heading size Adjust the size of the heading (range from 50-200%).
Heading alignment Adjust the alignment of the heading (Left, Center, Right).
Rows secondary background Tick the checkbox to display the secondary background for each row in the section.
Desktop layout Choose the layout to display on desktop devices (1 column, 2 columns).
Collapsible Enable to show the questions in collapsible.
Show ''View all'' button Tick the checkbox to show the “View all” button.
''View all'' button link Enter the link the users will be redirected to when they click the View all button.
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Frequently asked question

Configure each FAQ item.

*Note: By default, there are 4 FAQs in the section. You can click the block and click Remove block button to reduce it or click Add Frequently asked question to add more.

Icon Choose the FAQ icon from 21 premade icons.
Question Enter the question content.
Answer Enter the answer content.

Collection list

Collection list section will automatically list all the current collections in your store.

General

Collection list Heading Enter the heading of the collection list section.
Heading size Adjust the size of the heading (range from 50-200%).
Heading alignment Adjust the alignment of the heading (Left, Center, Right).
Image style Choose the style of product image in the section: Square (1:1), Rectangle (2:3), Round and Natural.
Show 'View all' button Tick the checkbox to show the “View all” button.
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices.
Disable it to set the section’s width to be the same as the page width set in the theme setting.
Background color (light/dark) Choose the background color in light/dark mode.
Show item count Tick the checkbox to show the number of products in the collection under the heading.
Grid Number of columns on desktop Adjust the number of columns to display on desktop devices.
Number of columns on mobile Adjust the number of columns to display on mobile devices.
Add spacing Tick the checkbox to show spacing between blocks in the section on both desktop and mobile devices.
Carousel

*Note: If you don’t enable carousel setting, by default the collection list will be displayed as a grid.

Enable carousel on desktop Tick the checkbox to show blocks in slide type on desktop devices.
Enable swipe on mobile Enable to show blocks in slide type on mobile devices.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Collection

Configure each collection block.

Select collection Click the Select collection button to select one of your available collections to display.

Promotion block

Promotion block section is where you can display text and a button for promotion purposes.

*Note: You can add a maximum of 16 collection and promotion blocks.

Heading Enter the heading of the section.
Content Enter the text of the section that will be displayed under the heading.
Background image Click the Select image button to select an image to set as background of the order summary page from your library or free image resources.
Image overlay opacity Adjust the overlay opacity of the background image (range from 0% to 100%).
The higher this value, the darker the image is. 
Button label Enter the label of the button. If left empty, no button will be displayed.
Button link Enter the link users will be redirected to if they click on the button.
Alignment Adjust the alignment of all elements (heading, text, button) in the promotion block: Left, Center, Right.
Background color (light/dark) Choose the background color in light/dark mode.
Text color (light/dark) Choose the text color of the promotion block in the light/dark mode.

Contact form

Contact form is used to let your users send their information to you.

General

Heading Enter the heading of the contact form section.
Heading size Adjust the size of the heading (range from 50-200%).
Text Enter the text to show under the heading or leave it blank.
Background color (light/dark) Choose the background color in the light/dark mode.
Button label Enter the label of the button. The default text is “Send”.
Success message Enter the message to display after the user finishes the form.
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Name

Configure the name field.

Label Enter the label of the field. The default text is Name.
Mark as required Enable to make this field required to submit the form.

Email

Configure the email field.

*Note: This field is always required to submit, even if the Email block is hidden or removed from the form.

Label Enter the label of the field. The default text is Email.

Phone number

Configure the phone number field.

Label Enter the label of the field. The default text is Phone number.
Mark as required Enable to make this field required to submit the form.

Message

Configure the message field.

Label Enter the label of the field. The default text is Message.
Mark as required Enable to make this field required to submit the form.

Form item

You can use the form item to add a custom field.

Label Enter the label of the field. The default text is Name.
Mark as required Enable to make this field required to submit the form.
Form input type Choose the input type for this field (Text, Dropdown, Radio Button, Checkbox)
Options Enter the input values of dropdowns, radio buttons and checkboxes. Options are separated by a semicolon.
Note that this setting only works if you choose the input type as Dropdown, Radio Button or Checkbox.

Custom Liquid

Custom Liquid section is where you can use to add custom liquid code, like app snippets for creating advanced customizations for your store.

We highly recommend hiring an expert in case you’re not comfortable editing Custom liquid code.

General

Custom Liquid Add app snippets or other Liquid code to create advanced customizations.
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices.
Disable it to set the map section’s width to be the same as the page width set in the theme setting.
Show section divider Tick the checkbox to show a divider divides this section with the section above.

Email signup/Newsletter

Email signup section shows newsletter form with added text.

General

Background color (light/dark) Choose the background color in the light/dark mode.
Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Heading

Configure the heading.

Heading Enter the heading of the email signup section.
Heading size Adjust the size of the heading (range from 50-200%).

Text

Configure the text.

Text Enter the message users will see under the heading.

Email form

Configure the email form field.

Button label Enter the label of the button. The default text is “Subscribe”.

Featured collections

Featured collections section is used to display collections you want to highlight.

General

Featured collections Heading Enter the heading of the section.
Heading size Adjust the size of the heading (range from 50-200%).
Heading alignment Adjust the alignment of the heading (Left, Center, Right).
Enable carousel on desktop Tick the checkbox to enable the slider function on desktop devices. 

If enabled, all collections are shown as one in the slider type, the first collection created will show first and follow that order from the left to the right. 

If disabled, the products will be shown in grid view.

Show section divider Tick the checkbox to show a divider divides this section with the section above.
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices.
Disable it to set the section’s width to be the same as the page width set in the theme setting.
Products per row on desktop Adjust the number of products on each row shown on desktop devices (range from 2 to 5).

This function can be applied to both the grid and carousel view.

Number of rows Adjust the number of product rows shown on desktop devices (range from 1 to 4). 

If the carousel function is disabled, the products will be shown according to this setting. 

For example, if you set the Products per row on desktop configuration as 4 and the Number of rows as 2, there will be 8 products displayed in the section.

Show 'View all' button Tick the checkbox to show the “View all” button.
"View all" button position Adjust the position of the “View all” button (Top, Bottom).
Mobile layout Products per row on mobile Adjust the number of products on each row shown on mobile devices. If the carousel function is disabled, the product will be shown according to this setting. This function can be applied to both the grid and carousel view.
Enable swipe on mobile Tick the checkbox to enable the slider function on mobile devices. 

If enabled, all collections are shown as one in the slider type.

If disabled, the products will be shown in grid view.

Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Collection

Configure the collection.

*Note: You can also add up to 3 collections.

Collection Collection Click the Select collection button to choose a collection in your store to display in the section.
Show description Tick the checkbox to show the collection’s description.
Description Enter the custom description for the collection. Content input in this section will be prioritized over the collection's description.
Product cards Show vendor Tick the checkbox to show the vendor name above the product title and under the product image.
Show product rating Tick the checkbox to show the product rating under the product title.
Note that to display product ratings, you need to add a product rating app.
Title card Enable title card Tick the checkbox to enable title card.
Enable text overlay Tick the checkbox to enable text overlay.
Card image Click the Select image button to select an image from your library or free image resources.
Overlay opacity Adjust the overlay opacity of the card image (range from 0 to 100%).
The higher this value, the darker the image is. 
Heading Enter the heading of the section. The default is “Featured collection”.
Heading size Adjust the size of the heading (range from 50-200%).
Text Enter the custom text to display under the heading (Left, Center, Right).
Content alignment Adjust the alignment of the content (Top left, Top center, Top right, Center left, Center, Center right, Bottom left, Bottom center, Bottom right).
Title card position Adjust the position of the title card compared to the product list (Left, Right).
Content alignment Adjust the alignment of the content (Left, Center, Right).
Button label Enter the label of the button. If left empty, the button will be hidden.
Button link Enter the link the users will be redirected to when they click the button.
Background color Choose the background color.
Text color  Choose the color of the text.
Button color Choose the color of the button.
Button text color Choose the color of the text on the button.
Button hover color Choose the color of the button when users hover on it.
Button hover text color Choose the color of the text on the button when users hover on it.
Secondary button color Choose the color of the secondary button (if config Show as primary button is disabled), which will have no effect.

Featured product

Featured product section shows the best products in the store as a mini page on the front of the store.

General

Featured product Product Click the Select product button to choose a product in your store to display in the section.
Show vendor Tick the checkbox to show the vendor name above the product title and under the product image.
Background color (light/dark) Choose the background color in the light/dark mode.
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices. Disable it to set the section’s width to be the same as the page width set in the theme setting.
Show section divider Tick the checkbox to show a divider that divides this section with the section above.
Media Desktop layout Choose to display the image on the left side or right side of the section, and the other side will display the product information.
Image ratio Adjust the ratio of the product images.
Show product media thumbnails Tick the checkbox to show other images of the product. Only apply to products with multiple images.
Thumbnail position Adjust the position of the thumbnail (Below media, Next to media).
Enable image zoom Tick the checkbox to allow users to zoom in the product image.
Enable video autoplay Tick the checkbox to automatically play the video if there is any video in the media.
Enable video looping Tick the checkbox to loop the video if there is any video in the media.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Price

Configure the product price display.

Show tax status and shipping policy Tick the checkbox to show if the product price includes tax or not and show the shipping policy. 

This setting only works for products that enable the ‘Include tax in prices’ function and have shipping policy content in the backend. 

Description

Configure the product description.

*Note: If you add the description block, the product description will automatically be displayed, and you can choose to display it in a collapsible tab or not.

Show in tab Tick the checkbox to show the product description in collapsible tab. 

Quantity selector

Eurus theme allows displaying the quantity in the cart of the product the user is viewing.

Variant picker

Configure the variant picker.

Variant style Choose the style of the variant picker (Button or Dropdown).
Show variant options Tick the checkbox to show the variant options such as Color, Size, etc.
Enable color swatches Tick the checkbox to show the swatches for color variant (if needed).

Buy buttons

Configure the buy buttons.

Buy button Show dynamic checkout button Tick the checkbox to show the checkout button of third-party payment methods available on your store (for example: Paypal).
Enable pickup availability feature Tick the checkbox to show the information of pickup location for customers to pick up their orders. 
Pre-order Enable Choose how you want to enable the Pre-order button (Yes, No, When product is out of stock)
Button label Enter the label of the button.
The default text is “Pre-order”
Message Enter the message that show under Pre-order button.
Show dynamic checkout buttons for pre-orders Tick the checkbox to show the checkout button of third-party payment methods available on your store (for example: Paypal).
Style Show background Tick the checkbox to show the background.
Content box type Choose the type of the button (Square, Round).
Background color (light/dark) Choose the background color of the button in the light/dark mode.
Text color (light/dark) Choose the text color of the button in the light/dark mode.

Inventory status

There are no customizable settings available for the inventory status, as it will show “In stock/Low stock” notification based on the inventory status of that product at the time and the low stock threshold in Theme settings > Products.

Collapsible tab

Configure the collapsible tab.

Heading Enter the heading of the tab.
Tab content Enter the content of the tab.

Social sharing

There are no customizable settings available for social sharing. Choose which social media your store allows customers to share the product on in Theme settings > Social media > Sharing options.

Text

Configure the text.

Text Enter the content of the section.

Size chart

Configure the size chart.

Select page Click the Select page button to choose which page to display the size chart. When customers click onto the size chart link, they will see the content of the chosen page in a popup on the screen.:

Separator

There are no customizable settings available for the seperator.

HTML

Configure the HTML block.

Custom HTML Enter your custom HTML code.

Product rating

There are no customizable settings available for the product rating. A review app will need to be installed and the products must have at least one review for this block to show.

Trust badge

Configure the trust badge.

Badge Click the Select image button to select an image from your library or free image resources as the trust badge.

View product details

There are no customizable settings available for this block.

Testimonial

Testimonial section is where you can show customers’ reviews to build trust with your visitors.

General

Testimonial Heading Enter the heading of the section.
Heading size Adjust the size of the heading (range from 50-200%).
Text alignment Adjust the text alignment (Left, Center, Right).
Testimonial items view Choose the display style of the review (Multiple, Single).

Multiple to show 3 items at a time on screen. 

Single to show only 1 item at a time on screen.

Background color (light/dark) Choose the section’s background color in the light/dark mode.
Item background color (light/dark) Choose the testimonial block’s background color in the light/dark mode.
Heading and title color (light/dark) Choose the heading and title color of the section in the light/dark mode.
Item text color (light/dark) Choose the testimonial’s text color in the light/dark mode.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Testimonial

Configure each review.

*Note: You can click Add Testimonial to add as many reviews as you want.

Icon Choose the icon for the review (Quote or 1-2-3-4-5 stars).
Title Enter the review’s title.
Text Enter the review.
Author's image Click the Select image button to select an image from your library or free image resources.
Author Enter the author’s name.
Author's note Enter additional information about the author, for example address, order or characteristics.

Video Hero

Video Hero section is where you display a video with overwritten text and button on it.

Video Hero Subheading Enter the subheading to display on top of the heading with a smaller size.
Heading Enter the heading of the promotion banner, which will be shown on the banner.
Heading size Adjust the size of the heading (range from 50-200%).
Shopify-hosted video Click the Select video button to choose a video on your store data.
Embed Video From URL Enter the URL of the video. Only support YouTube and Vimeo videos.
Video alt text Enter the alt text for the video.
Make section full width Tick the checkbox to set the video’s width to be the same as full width of users’ devices. Disable it to set the video’s width to be the same as the page width set in the theme setting.
Button label Enter the label of the button.
Show as primary button Tick the checkbox to set the button's styles to be the same as the style of the primary buttons. Otherwise, it will follow the outline button's styles.
Button link Enter the link the users will be redirected to when they click the button.
Alignment Adjust the alignment of the button.
Styles  Button color Choose the color of the primary button (config Show as primary button is enabled), which will have hover effect.
Button hover color Choose the color of the button when users hover on it.
Button text color Choose the color of the text on the primary button.
Button text hover color Choose the color of the text on the primary button when users hover on it.
Secondary button color Choose the color of the secondary button (if config Show as primary button is disabled), which will have no effect.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Video 

Video section is where you display a video.

Video Heading Enter the heading of the video section.
Heading size Adjust the size of the heading (range from 50% to 200%).
Text Enter the subheading to display under the heading with a smaller size.
Cover image Click the Select image button to select an image to set as the cover of the video.
Shopify-hosted video Click the Select video button to choose a video from your store’s data.
Embed Video From URL Enter the URL of the video. Only support YouTube and Vimeo videos.
Video alt text Enter the alt text for the video.
Make section full width Tick the checkbox to set the video’s width to be the same as full width of users’ devices. Disable it to set the video’s width to be the same as the page width set in the theme setting.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Shop the look

The Shop the look section creates hotspots of products on an image, and each hotspot represents the product.

General

Shop the look Heading Enter the heading of the section.
Heading size Adjust the size of the heading (range from 50-200%).
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices.
Disable it to set the section’s width to be the same as the page width set in the theme setting.
Show section divider Tick the checkbox to show a divider that divides this section with the section above.
Image Click the Select image button to select an image to display in the Shop the look on desktop devices. 
Mobile image Click the Select image button to select an image to display in the Shop the look on mobile devices. 
Desktop image alignment Adjust the alignment of the image in the section (Left, Right).
Left - on desktop devices the image is on the left section.
Right - on desktop devices the image is on the right section.
Product cards Image ratio Adjust the ratio of the featured image.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Product

Configure each product that corresponds to a hotspot.

Product Choose a product to show over the hotspot.
Hotspot color  Choose the color of the hotspot.
Hotspot desktop horizontal position Scroll the range slider (range from 0% to 100%) to adjust the horizontal position of the hotspot on desktop devices.

0 as close to the left border. 100 as close to the right border.

Hotspot desktop vertical position Scroll the range slider (range from 0% to 100%) to adjust the vertical position of the hotspot on desktop devices.

0 as close to the top border. 100 as close to the bottom border.

Hotspot mobile horizontal position Scroll the range slider (range from 0% to 100%) to adjust the horizontal position of the hotspot on mobile devices.

0 as close to the left border. 100 as close to the right border.

Hotspot mobile vertical position Scroll the range slider (range from 0% to 100%) to adjust the vertical position of the hotspot on mobile devices.

0 as close to the top border. 100 as close to the bottom border.

Collage

This section shows products/collections/images/videos in a collage.

General

Collage Heading Enter the heading of the collage section, which will be shown on the banner.
Heading size Adjust the size of the heading (range from 50-200%).
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices.
Disable it to set the section’s width to be the same as the page width set in the theme setting.
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Spacing Scroll the scrollbar (range from 0 to 40px) to adjust the spacing between blocks in the section.
Desktop layout Choose the layout to display on desktop devices (Left large block, Right large block).
Mobile layout Choose the layout to display on mobile devices (Collage, Column).
Background color (light/dark) Choose the background color in light/dark mode.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Image

Configure the image.

Image Click the Select image button to select an image from your library or free image resources.
Link Enter the link the users will be redirected to when they click the image.
Use original image ratio Tick the checkbox to display the image in its original ratio.

Video

Configure the video.

Shopify-hosted video Click the Select video button to choose a video from your store’s data.
Embed Video From URL Enter the URL of the video. Only support YouTube and Vimeo videos.
Video alt text Enter the alt text for the video.

Product

Configure the product.

Product Click the Select product button to choose a product in your store to display in the section.

Collection

Configure the collection.

Collection Click the Select collection button to choose a product in your store to display in the section.

Logo list

Logo list section allows you to display multiple logos.

General

Logo list Heading Enter the heading of the section.
Heading size Adjust the size of the heading (range from 50-200%).
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices.
Disable it to set the section’s width to be the same as the page width set in the theme setting.
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Corner radius Adjust the range slider (range from 0 to 100px) to adjust the corner radius of all logo images.
Number of columns on desktop Adjust the number of columns to be displayed in desktop devices.
Background color (light/dark) Choose the background color of the logo list in the light/dark mode.
Carousel Enable carousel on desktop Tick the checkbox to show blocks in slide type on desktop devices.
Auto-switch logo Tick the checkbox to enable the auto-switch function for the logo list.
Change bar every Adjust the range slider (range from 3 to 9 seconds) to set the auto-switching time.
*Note: This setting only works if you enable Auto-switch logo setting. 
Show navigation Tick the checkbox to show navigation arrows.
Only applies to desktop devices.
Mobile  Mobile layout Choose the layout to display on mobile devices (Carousel, Stacked).
Number of columns on mobile Set up the number of columns (1 column or 2 columns) to show in the recommendation section on mobile devices.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

Configure each logo.

Logo Click the Select image button to select an image for the logo.
Link Enter the link the users will be redirected to when they click the logo.

Recently viewed products

This section will automatically show products that the visitors recently viewed.

Recently viewed products Heading Enter the heading of the section.
The default is “Recently viewed products”
Heading size Adjust the size of the heading (range from 50-200%).
Enable clear history Tick the checkbox to enable users to clear their product viewing history.
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Maximum products to show Set up the maximum number of products to show in the section (range from 2 to 10).
Number of columns on desktop Adjust the number of columns to display on desktop devices (range from 1 to 5).
Enable carousel on desktop Tick the checkbox to enable the carousel function on desktop devices.
Background color (light/dark) Choose the background color of the section in light/dark mode.
Product card Show vendor Tick the checkbox to show the vendor name above the product title and under the product image.
Show product rating Tick the checkbox to show the product rating under the product title.
Note that to display product ratings, you need to add a product rating app.
Mobile layout Number of columns on mobile Adjust the number of columns (1 column or 2 columns) to display on mobile devices.
Enable swipe on mobile Tick the checkbox to enable slider for the product recommendation section on mobile devices.
If it is disabled, the number of products and columns in the recommendation section will be as set in the column configuration above.
If it is enabled, the recommendation section will be displayed in the slider type.
Section padding Top padding Adjust the padding on top of the section (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the section (range from 0 to 100 px).

Media gallery

This section allows you to showcase images/videos with brief descriptions.

General

Media gallery Heading Enter the heading of the media gallery.
Heading size Adjust the size of the heading (range from 50-200%).
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices.
Disable it to set the section’s width to be the same as the page width set in the theme setting.
Layout Number of columns on desktop Adjust the number of columns to display on desktop devices (range from 1 to 5).
Number of columns on mobile Adjust the number of columns to display on mobile devices (1 or 2).
Row height on desktop Adjust the row height of the section to display on desktop devices (range from 200px to 500px).
Row height on mobile Adjust the row height of the section to display on mobile devices (range from 200px to 500px).
Section padding Top padding Adjust the padding on top of the section (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the section (range from 0 to 100 px).

Media heading

Configure each media block.

Media Image Click the Select image button to select an image from your library or free image resources. After selecting an image, you can click Change to change, remove the image or connect dynamic source.
Link Enter the link the users will be redirected to when they click the image.
Overlay opacity Adjust the overlay opacity of the image (range from 0% to 100%).
The higher the value, the darker the image is.
Video Click the Select video button to choose a video from your store’s data.
Embed Video From URL Enter the URL of the video. Only support YouTube and Vimeo videos.
Enable video autoplay Tick the checkbox to automatically play the video if there is any video in the media.
Video alt text Enter the alt text for the video.
Layout Number of columns wide Adjust the width of the media block (range from 1 to 6).
Number of rows tall Adjust the height of the media block (range from 1 to 6).
Title Enter the title of the media block.
Title size Adjust the size of the title (range from 50-200%).
Text Enter the content of the media block.
Content alignment Adjust the content alignment (Left, Center, Right).
Button label Enter the label of the button on the media block. If left empty, no button will be displayed.
Button link Enter the link users will be redirected to if they click on the button on the media block.
Text color Choose the text color of the media block.

Promotion grid

This section allows you to showcase your promotions with images/videos and brief descriptions.

General

Promotion grid Heading Enter the heading of the promotion grid.
Heading size Adjust the size of the heading (range from 50-200%).
Show section divider Tick the checkbox to show a divider divides this section with the section above.
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices.
Disable it to set the section’s width to be the same as the page width set in the theme setting.
Layout Number of columns on desktop Adjust the number of columns to display on desktop devices (range from 1 to 5).
Number of columns on mobile Adjust the number of columns to display on mobile devices (1 or 2).
Row height on desktop Adjust the row height of the section to display on desktop devices (range from 200px to 500px).
Row height on mobile Adjust the row height of the section to display on mobile devices (range from 200px to 500px).
Section padding Top padding Adjust the padding on top of the section (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the section (range from 0 to 100 px).

Promotion block

Configure each promotion block.

Media Image Click the Select image button to select an image from your library or free image resources. After selecting an image, you can click Change to change, remove the image or connect dynamic source.
Link Enter the link the users will be redirected to when they click the image.
Overlay opacity Adjust the overlay opacity of the image (range from 0% to 100%).
The higher the value, the darker the image is.
Video Click the Select video button to choose a video from your store’s data.
Embed Video From URL Enter the URL of the video. Only support YouTube and Vimeo videos.
Enable video autoplay Tick the checkbox to automatically play the video if there is any video in the media.
Video alt text Enter the alt text for the video.
Layout Number of columns wide Adjust the width of the media block (range from 1 to 6).
Number of rows tall Adjust the height of the media block (range from 1 to 6).
Title Enter the title of the media block.
Title size Adjust the size of the title (range from 50-200%).
Text Enter the content of the media block.
Content alignment Adjust the content alignment (Left, Center, Right).
Button label Enter the label of the button on the media block. If left empty, no button will be displayed.
Button link Enter the link users will be redirected to if they click on the button on the media block.
Text color Choose the text color of the media block.
Sale label Line 1 Enter the content of the first line on the sale label.
Line 1 font size Adjust the font size of the first line on the sale label, range from 50% to 200%.
Line 2 Enter the content of the second line on the sale label.
Line 2 font size Adjust the font size of the second line on the sale label, range from 50% to 200%.
Line 3 Enter the content of the third line on the sale label.
Line 3 font size Adjust the font size of the third line on the sale label, range from 50% to 200%.
Sale label position Choose the position of the sale label (Top left, Top right, Bottom left, Bottom right).
Sale label style Choose the style of the sale label (Square, Circle, Flag, Angle).
Style Background color Choose the background color of the sale label.
Text color Choose the text color of the sale label.

Scrolling promotion

This section allows you to show your promotion texts in a scrolling bar.

General

Layout Block spacing Adjust the spacing of each elements on the scrolling bar (range from 10px to 150px).
Show section borders Tick the checkbox to show borders around the scrolling bar.
Scrolling Speed Adjust the scrolling speed to run the a full round of content (range from 6s to 50s).
Direction Adjust the scrolling direction (Left to right or Right to left).
Pause on hover Tick the checkbox to pause the scrolling bar when the user hovers over it.
Style Background color (light/dark) Choose the background color of the scrolling bar to display in light/dark mode.
Text color (light/dark) Choose the text color of the scrolling bar to display in light/dark mode. 
Section padding Top padding Adjust the padding on top of the section (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the section (range from 0 to 100 px).

Text

Configure a text line.

Text Enter the text to display on the scrolling bar.
Text size Adjust the size of the text (range from 50% to 200%).

Icon

Configure a icon.

Icon Choose from the list an icon to display on the scrolling bar.
*Note: We provide 21 premade icons to help you easily customize.
Icon height Adjust the height of the icon (range from 20px to 150px).

Button

Configure a button.

Button label Enter the label of the button on the scrolling bar. If left empty, the button will be hidden.
Button link Enter the link the users will be redirected to when they click the button.
Show as primary button Tick the checkbox to set the button's styles to be the same as the style of the primary buttons.
Otherwise, it will follow the outline button's style.

Image

Configure an image.

Image Choose an image to display on the scrolling bar. Click the Select image button to choose an image from your library or free image resources.
Image height Adjust the height of the image (range from 20px to 150px).

 

 

Was this article helpful to you? Yes No

How can we help?