HOME

Updated 1 month ago

1. Announcement bar

First, let’s start with what will happen if you drag and drop the announcement bar from the left to the right.

Action

Choose whether you want to target your announcement bar to the product page or the collection page.

Announcement bar settings

In the announcement bar settings, under Text Style, you can:

Edit the announcement text
Select the font
Adjust the size or weight
Set the line height
Change the letter spacing
Update the text color
Choose the alignment left, center, or right
Modify the capitalization

Under Animation, you can choose from five different animation styles to control how your text appears.

Under Layout Padding, you can customize the announcement bar’s color, adjust its radius, and set the padding.

You can enhance the appearance of your announcement bar by adding a background color. Choose a color that aligns with your brand, and customize its radius for rounded edges, adjust the padding for proper spacing inside the bar, and set the margin to control the spacing around it.

Under border customization, you can control how your announcement bar looks and behaves.

Decide which side the content should appear from
Set the overall width of the bar
Choose a color that matches your brand to create a polished and cohesive appearance.

2. Button

Action

Choose what the button should do. You can link it to a product or a collection based on your requirement.

Text - Update the button label with any text you want to display.
Font - Select the font style that matches your brand look.
Size/Weight - Adjust the font size and choose how bold or light the text should appear.
Line Height - Control the spacing between lines if your button text has multiple words or breaks.
Letter Spacing - Increase or decrease the space between each character.
Text Color - Pick a text color that fits your theme and keeps the button readable.
Alignment - Choose how the text should be positioned inside the button.
Capitalization - Decide whether the text appears in uppercase, lowercase, or sentence case

Border

Color - Choose the border color that matches your button style or theme.
Width - Adjust how thick or thin you want the border to appear.

Left Icon

Select or Upload - Choose an icon from the library or upload your own to match your branding.
Color - Set the icon color to blend with your button style.

Right Icon

Select or Upload - Choose an icon from the library or upload your own based on what fits your design.
Color - Set the icon color to match the rest of your button style.

Advanced Settings

Background Color - Choose the button background color to match your theme.
Radius - Adjust the corner roundness of the button.
Padding - Control the inner spacing around the button text and icons.
Relation - Set how elements sit inside the button. You can keep them side by side or spaced apart.
Format - Choose between a compact layout or a full width button.
Position - Decide where the button should appear within the section.

Background and Spacing

Set the background color for this block.
Adjust the radius to control how rounded the corners appear.
Update the padding to manage inner spacing.
Modify the margin in pixels to control the outer spacing around the block.

Border

Color - Pick a border color that fits your design.
Width - Adjust how thick the border should appear.
Sides - Choose which sides of the block should have a border.

3. Collections grid

Grid Settings
Adjust how your collection items are displayed.

Columns - Choose whether the grid shows 2, 3, or 4 columns.
Gap (px) - Set the spacing between each grid item.

Header Title

Text - Enter the title you want to display above the grid.
Font - Select the font style that fits your brand.
Size/Weight - Adjust the font size and choose how bold or light the text appears.
Line Height - Control the spacing between lines in the title.
Letter Spacing - Increase or decrease the space between each character.
Text Color - Pick the color for your title text.
Alignment - Set the position of the title within the header.
Capitalization - Decide how the text should appear

Image Attribute

Ratio - Choose the image ratio that works best for your layout.
Adjust Ratio - Fine tune the ratio to fit your collection images.
Radius (px) - Set how rounded the image corners should be.
Image Scale - Decide if the image should fit within the frame or fill the entire area.

Layout Padding and Position

Padding - Control the spacing inside the layout to maintain a clean structure.
Vertical Position - Adjust how high or low the content appears within the block.

Background and Spacing

Color - Choose a background color for the grid section.
Radius - Adjust how rounded the section corners appear.
Padding - Set inner spacing within the grid block.
Margin - Control the outer spacing around the entire section.

Border

Color - Pick a border color that matches your design.
Width - Adjust the thickness of the border.
Sides - Choose which sides of the section should have a border.

When you switch to the content tab, you can choose which collections you want to showcase. You can also add or remove collections as needed.

You can customize each collection by:

Choosing any image you want to upload in the given format for the collection display.
Adding an overlay to improve contrast and make the text easier to read.

Collection Title

Text - Enter the title you want shown for that collection.
Font - Select the font style that matches your brand.
Size/Weight - Control how large the title appears and how bold or light it should be.
Line Height - Adjust the spacing between lines if your title has more than one line.
Letter Spacing - Increase or reduce the space between individual characters.
Text Color - Pick a color that stands out on your image or overlay.
Alignment - Choose the position of the title within the collection block.
Capitalization - Set whether your text appears in uppercase, lowercase, or a natural sentence case.

4. Collection products

Content Settings

Select Collection - Choose which collection you want to display in this section.
Number of Items - Set how many products should appear from the selected collection.
Layout - Choose how the products are shown. You can display them in a slider or a grid.

Header

Text - Add the header title for the product section.
Font - Choose the font style that matches your design.
Size/Weight - Control how large the title appears and how bold it looks.
Line Height - Adjust the spacing between lines in the title.
Letter Spacing - Set the space between each character.
Text Color - Choose the title color.
Capitalization - Choose uppercase, lowercase, or sentence case.

Button - You can enable or disable the button using the eye icon.

Text - Enter the label you want on the button.
Font - Choose the font style for the button text.
Size/Weight - Adjust the size and boldness of the text.
Line Height - Control the spacing between lines if needed.
Letter Spacing - Adjust the spacing between characters.
Text Color - Choose the color of the button text.
Decoration - Choose whether you want the text to be bold, italicized, underlined, or or have a line
Capitalization - Choose how the text appears.

Border - Adjust the border color and width.

Icon - Choose or upload an icon for the button and set its color.

Advanced Settings

Background Color - Set a background color for the button area.
Radius - Adjust how rounded the corners should be.
Padding - Control the inner spacing of the section.

Product Card Settings

Image Attributes

Ratio - Choose the image ratio for product images.
Adjust Ratio - Fine tune the ratio based on your layout.
Radius - Set the roundness of image corners.
Image Scale - Choose whether the image should fill the space or fit within it.

Border

Set the border color and width for each product card.

Title

Font - Choose the font style for the product title.
Size/Weight - Adjust size and boldness.
Line Height - Control vertical spacing between lines.
Letter Spacing - Manage character spacing.
Text Color - Choose the title color.
Alignment - Set the title position.
Capitalization - Choose the text style.

Vendor

Customize the vendor text similar to the title settings.

Font - Choose the vendor text font.
Size/Weight - Control size and thickness.
Line Height - Adjust spacing.
Letter Spacing - Control spacing between letters.
Text Color - Set the vendor text color.
Alignment - Choose a position.
Capitalization - Select the preferred style.

Price

Font - Choose the price font.
Size/Weight - Adjust size and weight.
Line Height - Modify spacing.
Letter Spacing - Adjust character spacing.
Text Color - Pick the price color.
Alignment - Choose a position.
Capitalization - Choose style for how the numbers and symbols appear.

Compare Price

Font - Choose font style.
Size/Weight - Adjust weight and size.
Line Height - Control spacing.
Letter Spacing - Adjust character spacing.
Text Color - Choose color for compare price.
Capitalization - Set how the text appears.

Action Button

Enable or disable the action button using the eye icon.

Card Background

Radius - Adjust the corner roundness for product cards.
Padding - Control the spacing inside the card.

Card Border

Color - Choose the card border color.
Width - Set how thick or thin the border appears.

Background and Spacing

Color - Choose a background color for the entire section.
Radius - Adjust corner rounding.
Padding - Set inner spacing.
Margin - Control the spacing around the outside of the section.

Border

Color - Pick the border color.
Width - Adjust thickness.
Sides - Choose which sides of the section will have a border.

5. Countdown timer

Action

Select the target page where the button will redirect users. You can link it to a collection or a product.

Image

Upload the image you want to display alongside the countdown.

Image Attributes

Ratio - Choose the display ratio for the image.
Radius - Set how rounded the corners should be.
Image Scale - Choose whether the image fills the frame or fits inside it.

Text Content

Enable or disable the text content by clicking the eye button.

Heading
You can enable or disable the heading using the eye button.

If enabled, you can adjust:

Text - Enter the heading you want to show.
Font - Select the font style that matches your layout.
Size/Weight - Control the size and boldness.
Line Height - Adjust spacing between lines.
Letter Spacing - Manage spacing between characters.
Text Color - Choose the heading color.
Alignment - Position the heading.
Capitalization - Choose uppercase, lowercase, or sentence case.

The same options apply to Subheading as well.

Countdown

Timer Text

Font - Choose a font for the countdown numbers.
Size/Weight - Set the size and weight.
Line Height - Adjust vertical spacing.
Letter Spacing - Modify spacing between characters.
Text Color - Choose the color of the timer text.
Alignment - Position the countdown text.

Subheading

Text - Enter the subheading that appears below the timer.
Font - Choose the font style.
Size/Weight - Adjust size and thickness.
Line Height - Set spacing.
Letter Spacing - Control character spacing.
Text Color - Choose the subheading color.
Alignment - Position the subheading.
Capitalization - Select your preferred text style.

Countdown Timer

Timezone - Choose the timezone the countdown will follow.
End Time - Set the exact time when the countdown should end.

Button

Enable or disable the button using the eye button.

If enabled, you can customize:

Button Text

Text - Add the button label.
Font - Select the font style.
Size/Weight - Adjust size and boldness.
Line Height - Control spacing.
Letter Spacing - Modify spacing between letters.
Text Color - Choose the button text color.
Alignment - Position the text inside the button.
Capitalization - Choose text casing.

Border
Set the border color and width.

Left Icon - Choose or upload an icon and set its color.

Right Icon - Choose or upload an icon and set its color.

Advanced Settings

Background Color - Choose the background color.
Radius - Adjust corner roundness.
Padding - Control inner spacing.
Relation - Set how elements are arranged, either side by side or spaced apart.
Format - Choose the layout format.
Position - Decide where the countdown block will appear within the section.

Layout Padding

Color - Choose the background color for the layout area.
Radius - Adjust the corner roundness.
Padding - Set inner spacing.

Background and Spacing

Color - Choose a background color for the entire block.
Radius - Adjust how rounded the corners appear.
Padding - Control the inner spacing.
Margin - Set spacing around the outside of the block.

Border

Color - Select the border color.
Width - Set thickness.
Sides - Choose which sides have a border.

6. Feature grid

Grid Settings
Control how your features are arranged in the layout.

Columns - Choose whether the grid displays 2, 3, or 4 columns.
Gap - Set the spacing between each feature card.

Header Title
Use the eye button to enable or disable the header.

If enabled, you can edit:

Text - Enter the title you want to show above the feature grid.
Font - Choose the font style.
Size/Weight - Adjust how large or bold the title appears.
Line Height - Control spacing between lines.
Letter Spacing - Adjust the space between characters.
Text Color - Choose the title color.
Alignment - Position the title within the header.
Capitalization - Choose uppercase, lowercase, or normal case.

Feature Title
Enable or disable using the eye button.

If enabled, you can edit:

Text Style

Text - Enter the feature title you want to display.
Font - Choose the font.
Size/Weight - Adjust the size and weight.
Line Height - Control vertical text spacing.
Letter Spacing - Adjust spacing between letters.
Text Color - Set the title color.
Alignment - Choose the text position.
Capitalization - Select how the text appears.

Background

Adjust the background padding for the section.

Card Settings

Image Attributes

Ratio - Choose the ratio for the image.
Adjust Ratio - Fine tune the ratio as needed.
Radius - Set the image corner roundness.
Image Scale - Choose between fill or fit.

Border - Set the image border color and width.

Card Background

Choose the card background color, corner radius, and inner padding.

Card Border

Set the border color and width for each card.

Background and Spacing

Color - Choose the background color for the entire feature grid section.
Radius - Adjust the corner radius.
Padding - Set the inner spacing.
Margin - Control the spacing around the section.

Border - Choose the border color, set the width, and select which sides have borders.

When you open the content section, you can customize each collection individually.

For each collection, you can make the following changes:

Upload Image - Choose or upload the image you want to display for that collection.
Target Page - Decide where the collection card should redirect users.
Select Collection - Pick the specific collection you want to showcase.
Name of the Collection - Enter or edit the display name for that collection.

7. Feature shapes

Header Title
This controls the main title shown above the feature shapes.

Text - Add the heading you want to display.
Font - Choose the style of the heading.
Size/Weight - Adjust how large or bold it appears.
Line Height - Control the spacing between lines.
Letter Spacing - Adjust spacing between characters.
Text Color - Choose the heading color.
Alignment - Position the heading within the section.
Capitalization - Choose uppercase, lowercase, or sentence case.

Feature Title
You can enable or disable the feature titles using the eye button. These are the titles shown under each shape.

If enabled, you can edit:

Text Style

Font - Choose how the text should look.
Size/Weight - Control thickness and size.
Line Height - Adjust spacing between lines.
Letter Spacing - Change the spacing between characters.
Text Color - Set the color of the feature title.
Alignment - Position the title.
Capitalization - Choose how the text should appear.

Background

Padding - Adjust the inner spacing for the entire section.

Card Settings

These settings control how each feature shape appears.

Image Attributes
Manage how each image is displayed inside the shape.

Layout - Choose to show shapes in a slider or grid.
Shape - Decide whether the feature should appear round or square.
Height/Width - Set the size of each shape.
Radius - Control how rounded the corners are, especially for square shapes.
Image Scale - Choose whether the image should fill the shape or fit within it.

Border

Color - Choose the outline color around each shape.
Width - Set how thick the border appears.

Card Background

Color - Set the card’s background color.
Radius - Adjust how rounded the card edges are.
Padding - Control the spacing inside each card.

Card Border

Color - Choose the card border color.
Width - Set how thick the border should be.

Background and Spacing

These settings control the outer layout of the entire feature shapes section.

Color - Set the background color for the section.
Radius - Adjust the corner rounding.
Padding - Set inner spacing for the whole block.
Margin - Control the spacing around the outside of the block.

Border - Choose the border color, width, and which sides should have a border.

When you open the content section, you can customize each collection individually.

For each collection, you can make the following changes:

Upload Image - Choose or upload the image you want to display for that collection.
Target Page - Decide where the collection card should redirect users.
Select Collection - Pick the specific collection you want to showcase.
Name of the Collection - Enter or edit the display name for that collection.

8. Hero Carousel

Image Attribute
These settings control how each slide image appears.

Ratio - Sets the shape of the image area (like wide, square, tall).
Radius - Controls how rounded the image corners are.
Image Scale - Decides whether the image fills the entire area or fits within it.

Transitions
Controls how the carousel slides change.

Style - Choose if the carousel shows pause controls or navigational dots.
Color - Controls the color of the controls (dots or pause icon).
Autoplay Time - Sets how long each slide stays before switching automatically.
Position - Changes where the dots appear.

Layout Padding and Position
Adjusts the spacing and vertical placement of the whole carousel.

Padding - Controls the inner spacing around the carousel.
Vertical Position - Shifts the carousel up or down within its section.

Background and Spacing
Controls the outer wrapper around the entire hero carousel.

Color - Sets the background color behind the carousel.
Radius - Rounds the corners of the carousel section.
Padding - Adds inner spacing for the section.
Margin - Controls spacing outside the section.

Border
Customize the outline around the section.
• Color — the border color
• Width — thickness
• Sides — choose which sides show the border

When you open the content section, you can customize each collection individually.

For each collection, you can make the following changes:

Upload Image - Choose or upload the image you want to display for that collection.
Target Page - Decide where it should redirect users.
Select Collection - Pick the specific collection you want to showcase.
Overlay - Decide a percentage of overlay you want to display on the image

Text content -

For content inside the image, you can make the following changes in heading as well as subheadings. You can also click on the eye button to decide if you want to enable or disable this.

text
font,
size/weight
line height
letter spacing
text color
alignment
capitalization

Primary button and Secondary button -

You can make the following changes in the primary and secondary button. You can also click on the eye button to decide if you want to enable or disable this.

Text style
Border
Left icon
Right icon

For button settings, you have the option to customize its radius, padding, relation, format and position of the button.

9. Image block

Image

Upload an image in the recommended format to represent your section.
Select the target page where users will be redirected when they click the image.
Add an overlay if you want a tinted layer for contrast.

Image Attributes

These control how your image is displayed.

Ratio - sets the shape of the image area.
Radius - adjusts how rounded the corners are.
Image Scale (Fill/Fit) - choose whether the image fills the full space or fits inside without cropping.

Text Content
Use the eye button to enable or disable text layers.

Body Text
If enabled, customize:
Text, font, size/weight, line height, letter spacing, text color, alignment, and capitalization.

Heading
If enabled, customize the same text style options as the body text.

Button - Enable or disable the button using the eye icon.
Button Text - Customize the button label along with its font, size/weight, line height, letter spacing, color, alignment, and capitalization.
Border - Select the border color and width for the button.
Left & Right Icons - Choose or upload icons for the button and set their color.
Advanced Settings - Control the finer layout and positioning such as background color, corner radius, padding, relation, format, and overall position.

Layout Padding and Position

Adjust spacing inside the block and move content vertically within the layout.

Background and Spacing

These settings manage the wrapper around the image block.

Color - background color
Radius - rounded corners
Padding — inner spacing
Margin — outer spacing

Border

Set the section border color, width, and which sides it appears on.

10. Recently Viewed

Content settings

When you open the content settings of this block, you can control how the list of recently viewed products appears on your store.

For the number of items, choose how many products should be displayed at once. You can also set the layout as a slider or a grid depending on how compact or open you want the section to look.

The header can be fully customized. You can enable or disable the title using the eye button. Once enabled, you can edit the title text and adjust its font, size, weight, line height, letter spacing, text color, and capitalization so it blends smoothly with the rest of your design.

The same goes for the button. Enable or disable it, then style the text with full control over font, size, weight, spacing, color, decoration, and capitalization.

You also have a border option for the button where you can set the border color and width. For the icon, either choose one from the library or upload your own, and set the icon color.

Under advanced settings, you can fine tune the background color, adjust the radius, and modify padding for a more defined or softer look.

Now let’s talk about the product card settings.

You can control the image attributes, border, product title display, vendor name, price, compare price, and the action button. You can turn the action button on or off as needed.

You can also adjust the card background color, card radius, padding, and card border color and width.

Finally, in the background and spacing section, you can set the overall background color, radius, padding, margin, and border for the entire Recently Viewed block. This helps the section fit neatly within the rest of the page layout.

11. Search bar

Input Settings

Enter placeholder or default text and style it to match your layout.

Text - Set the placeholder or input text.
Font - Choose the font that fits your brand.
Size/Weight - Adjust font size and boldness.
Line Height - Control vertical spacing for multi line text.
Letter Spacing - Fine tune spacing between characters.
Text Color - Pick a color that keeps the text readable.
Capitalization - Choose uppercase, lowercase, or sentence case.

Border
Create an outline for the input field.

Color - Choose border color.
Width - Set border thickness.

Icon
Add a search icon to the field.

Choose or Upload - Select from the library or upload your own.
Relation - Place the icon left or right inside the field.

Advanced Settings
Refine the input look and spacing.

Bg Color - Set the input background color.
Radius - Adjust corner roundness.
Padding - Control inner spacing around the text and icon.

Background and Spacing

Color - Choose the section background color.
Radius - Set corner rounding for the wrapper.
Padding - Adjust inner spacing around the search block.

Margin
Set outer spacing in pixels.

Border

Color — choose border color.
Width — set border thickness.
Sides — choose which sides show the border.

12. Social Media Icons

Content Settings
Manage the title and appearance of the social icons section.

Title
Click the eye button to enable or disable the title.

Text - Set the placeholder or input text.
Font - Choose the font style for the title.
Size/Weight - Adjust how large or bold the title appears.
Line Height - Control the vertical spacing of the title.
Letter Spacing - Fine tune the spacing between characters.
Text Color - Select the color of the title text.
Alignment - Position the title left, center, or right.
Capitalization - Set the title to uppercase, lowercase, or sentence case.

Icons
Choose how your social media icons look and where they sit.

Color - Pick a color for the icons.

Positioning - Arrange the icons based on your layout style.

Background and Spacing
Customize the section containing the icons.

Color - Set the background color for the section.
Radius - Adjust corner roundness.
Padding - Control inner spacing around the icons.

Margin
Set the space outside the section.

Border

Color — choose border color.
Width — set border thickness.
Sides — choose which edges display a border.

13. Text Block

Action

Select the target page where users will be redirected when interacting with this block.

Text Content
Manage the heading and subheading displayed inside the block.

Heading and Subheading
Click the eye button to enable or disable each one.

If enabled, you can adjust:

Text — enter your content.
Font — choose a font style.
Size/Weight — set the text size and boldness.
Line Height — control vertical spacing.
Letter Spacing — adjust spacing between characters.
Text Color — choose the color of your text.
Alignment — position the text left, center, or right.
Capitalization — select uppercase, lowercase, or sentence case.

Left Icon and Right Icon
Add supporting icons for visual emphasis.

Choose or Upload — pick from existing icons or upload your own.
Color — set the icon color.

Layout Padding
Customize how the text block sits within the layout.

Color — set background color for the layout wrapper.
Radius — control roundness of the edges.
Padding — adjust inner spacing.
Relation — choose how inner elements are spaced or arranged.

Background and Spacing
Design the overall container that holds the text block.

Color — choose the background color.
Radius — set corner roundness.
Padding — control internal spacing.
Margin — create space outside the block.

Border

Color — choose border color.
Width — adjust thickness.
Sides — decide which edges have a border.

14. Video Block

Upload Video
Choose a video file that fits your layout or campaign.

Select Target Page
Decide where users will be redirected when they interact with the video.

Overlay
Add an optional overlay to improve contrast or readability.

Video Attributes - Control how your video appears visually.
Ratio - Set the aspect ratio of the video.
Radius - Adjust the corner roundness.
Image Scale - Choose whether the video frame should fill or fit the container.

Background and Spacing
Style the section surrounding the video.

Color - Choose the background color.
Radius - Modify the section’s corner roundness.
Padding - Adjust the inner spacing around the video.
Margin - Control the spacing outside the block.

Border

Color — select border color.
Width — choose border thickness.
Sides — pick which edges show a border.

15. Collections Slider

First, let’s talk about the Setting Tab

Header Title
Control the main title of your collections slider.

Enable or Disable
Click the eye button to show or hide the title.

If enabled, you can adjust:

Text — enter your title.
Font — choose a typeface.
Size/Weight — set the size and boldness.
Line Height — control vertical spacing.
Letter Spacing — fine tune spacing between characters.
Text Color — choose a color.
Alignment — position the title left, center, or right.
Capitalization — select how the title text appears.

Image Attribute
Manage how your collection images appear within the slider.

Ratio - Choose an image ratio for uniform sizing.
Adjust Ratio - Fine tune the ratio if needed.
Radius - Control how rounded the image corners are.
Image Scale - Choose whether the image fills or fits the container.

Layout Padding and Position
Tweak spacing and placement within the overall layout.

Padding - Adjust inner spacing for the slider block.
Vertical Position - Move the slider up or down within the section.

Background and Spacing
Design the visual container around the slider.

Color - Set the background color.
Radius - Adjust the corner roundness.
Padding - Control inner spacing.
Margin - Manage the spacing outside the section.

Border

Color — choose border color.
Width — pick border thickness.
Sides — select which edges show a border.

Now, the content tab

For each tab, you can change the following:

Image
Control the image displayed for each collection.

Upload Image - Add an image that represents the selected collection.
Select Collection - Choose which collection this tab should link to.
Overlay - Apply an overlay for better contrast or enhanced visual style.

Collection Title
Adjust how the collection name appears under the image.

Text - Enter or edit the collection title.
Font - Pick a font style.
Size/Weight - Modify the text size and thickness.
Line Height - Adjust vertical spacing around the title.
Letter Spacing - Control spacing between characters.
Text Color - Choose the color of the title text.
Alignment - Position the text left, center, or right.
Capitalization - Choose uppercase, lowercase, or sentence case.

16. Feature Slider

Header Title
Control the main heading for the feature slider.

Enable or Disable
Click the eye button to show or hide the header title.

If enabled, you can set:

Text — write your heading.
Font — select the font style.
Size/Weight — adjust size and boldness.
Line Height — manage vertical spacing.
Letter Spacing — control the space between characters.
Text Color — choose the title color.
Alignment — place the text left, center, or right.
Capitalization — choose how the text appears.

Feature Title
Customize the title that appears for each feature inside the slider.

Enable or Disable
Use the eye button to toggle the feature title.

If enabled, you can set:

Text — enter your feature title.
Font — choose your font.
Size/Weight — adjust thickness and sizing.
Line Height — control spacing.
Letter Spacing — fine tune spacing between letters.
Text Color — set the title color.
Alignment — align the text.
Capitalization — decide text style.

Background

Padding — adjust the inner spacing of the feature slider section.

Card Settings
Control how each feature card looks and behaves.

Image Attributes

Ratio — choose image proportion.
Adjust Ratio — fine tune the ratio.
Radius — modify corner roundness.
Image Scale — choose fill or fit based on your layout.

Border

Color — set border color.
Width — define border thickness.

Card Background

Color — choose a background color for each card.
Radius — adjust rounded corners.
Padding — control inside spacing.

Card Border

Color — choose the border color.
Width — set thickness.

Background and Spacing
Customize the outer container of the feature slider.

Color — background color of the whole block.
Radius — round the outer corners.
Padding — inner spacing around the slider.
Margin — outer spacing around the section.

Border

Color — border color.
Width — thickness.
Sides — select which edges show a border.

Now let’s talk about the content part.

For each collection, you can change the following -

Upload Image - Add an image that represents the selected collection.
Select Collection - Choose which collection this tab should link to.
Name - Add a name to your collection.

17. Offer Block

Image
Upload the main image that represents your offer.

Image Attributes
Control how the image appears inside the block.

Ratio — set the image proportion.
Radius — adjust corner roundness.
Image Scale — choose fill or fit depending on your layout.

Text Content

Click the eye icon to enable or disable text content inside the block.

Heading and Subheading
You can enable or disable each one separately using the eye icon.

If enabled, you can customize:

Text — write your heading or subheading.
Font — choose the font style.
Size/Weight — set the size and boldness.
Line Height — control vertical spacing.
Letter Spacing — adjust spacing between characters.
Text Color — choose the color.
Alignment — position your text left, center, or right.
Capitalization — decide how the text should appear.

Button
Add or style the button for your offer.

Button Text
Customize the button label.

Font — choose the style.
Size/Weight — control size and thickness.
Line Height — adjust spacing.
Letter Spacing — tune character spacing.
Text Color — select color.
Alignment — position the text.
Capitalization — choose uppercase, lowercase, or sentence case.

Border

Color — choose border color.
Width — set the border thickness.

Left Icon and Right Icon
Choose or upload an icon and set its color.

Advanced Settings

Additional layout and formatting controls.

BG Color — choose section background color.
Radius — round the container corners.
Padding — adjust internal spacing.
Relation — choose side by side or spaced apart layout.
Format — pick compact or full width.
Position — place the content within the block.

Layout and Padding

Color — background color for layout wrapper.
Radius — corner roundness.
Padding — internal spacing.

Background and Spacing
Style the outer block container.

Color — pick background color.
Radius — adjust corners.
Padding — inner spacing.
Margin — space outside the block.

Border

Color — choose border color.
Width — border thickness.
Sides — select which edges display a border.

18. Tabbed product

First let’s talk about the Settings tab

Tab

Customize how each tab looks and behaves inside the tabbed product section.

Text and Color

Set the appearance of the tab label.

Font — choose the font style.
Size/Weight — adjust size and thickness.
Line Height — manage vertical spacing.
Letter Spacing — fine tune spacing between characters.
Text Color — choose a color for the tab text.
Alignment — position the text inside the tab.
Capitalization — pick the text style (uppercase or normal).

Border

Adjust the border styling of each tab.

Color — select border color.
Width — define how thick the border should be.

Advanced Settings

Control the spacing and layout of each tab.

Radius — adjust tab corner roundness.
Padding — set inner spacing.
Position — place the tab content where you want it.
Space Between — adjust the spacing between individual tabs.

Tab Bar Settings
Style the container that holds all the tabs.

Background

Color — choose the tab bar background color.
Radius — round the corners of the bar.
Padding — adjust inner spacing within the bar.
Margin — control the spacing outside the bar.

Border

Color — set the border color.
Width — choose the border thickness.

Product

Display Settings

Control how many products appear and how the layout behaves.

No. of items — choose how many products to show.
Layout — pick slider or grid.
BG Color — set the background color of the product area.
Padding — adjust inner spacing.
Margin — control space around the entire block.

Product Card Settings

Customize each product card.

Image Attributes

Ratio — decide the shape of the image frame.
Adjust Ratio — fine-tune the frame height.
Radius — round the image corners.
Image Scale — choose how the image fits (fill, fit, etc.).

Border

Color — select the border color.
Width — adjust thickness.

Title

Font, Size/Weight, Line Height, Letter Spacing, Text Color, Alignment, Capitalization — You get full control over the product title styling.

Vendor

Same styling controls as the title.

Price

Same styling controls as the title.

Compare Price

Enable or disable using the eye button.
If enabled, you can set Font, Size/Weight, Line Height, Letter Spacing, Text Color, Capitalization.

Action Button

Enable or disable the product action button.

Card Background

Radius — round the card shape.
Padding — control inner spacing.

Card Border

Color — choose color.
Width — choose thickness.

Button

Toggle the button on or off using the eye button.

Text Style

Text, Font, Size/Weight, Line Height, Letter Spacing, Text Color, Alignment, Capitalization — complete control over button label style.

Border

Color, Width — customize the button border.

Left Icon & Right Icon

Choose or upload icons and set their color.

Advanced Settings

Fine-tune advanced layout behavior.

BG Color — adjust background color.
Radius — round the outer container.
Padding — inner spacing.
Relation — arrange items side by side or spaced apart.
Format — choose compact or full width.
Position — adjust how the block sits within the layout.

Now, let’s talk about the Content tab.

For each tab, you can decide the target collection and the name of the collection.

Now, let us talk about “ My Widgets”

This section contains all the custom-coded widgets you've built yourself.

Once you click on it, you'll be taken to a page where you can write and save your own code. After saving, all your custom widgets will appear here, ready to drag and drop onto the right panel to personalize your store experience.

ADD CUSTOM PAGE

EDIT AND PERSONALIZE EXISTING PAGES

MULTI TAB

Item added to your cart

HOME

Related Articles