Omitir el contenido

Home Page

Dynamic Sections

Unlike Static Sections, the Dynamic Sections on the Home Page can be rearranged and made visible or hidden. Shopify made these templates like that by design to prevent storefront owners from placing Top-of-Funnel (TOFU) promotional content near the end of the funnel, on the Product Page. While the Static Sections on the Product Page can be enabled or disabled, you will need Custom Development if you want to rearrange them.




Customization

At NerdlySolutions, we do our best to stay up to date with the latest features. If you would like to add sections from this template into any of the other templates, and your support plan is current, schedule a consultation and we'll be more than happy to take care of that for you.

Item support includes:

  • Availability of the author to answer questions
  • Get assistance with reported bugs and issues
  • Help with included 3rd party assets

Item support does not include:

  • Customizations and installations



If your preview is not updating, or your images are flowing off the page, press 'Save' to update your preview.

Content

Images for the carousel. You can optionally place a caption or a CTA on top of the images, like an overlay.

default: Array of 5 images

Settings

Layout
Full-height carousel

Sets the height of the carousel to the height of the viewport. When enabled, overrides the maximum height setting.

default: false

Place full-height carousel behind navbar

Version 1 of Conversio placed the carousel behind the navbar when "Full-height carousel" was enabled. This allows you to use that same configuration for backward-compatibility. Only works when 'Full-height carousel' is enabled.

default: false

Margin top

Based on Bootstrap spacing.

default: 0

Margin bottom

Based on Bootstrap spacing.

default: 8

Wrap in container

Prevents the carousel from touching the edges of the viewport. Set to false for a fluid layout.

default: false

Minimum Height (px)

The minimum height of the carousel in pixels.

default: 444

Maximum Height (px) (default)

The maximum height of the carousel in pixels.

default: 444

Image(s)
Image resolution

The image resolution defaults to 1600px (Desktop) or 800px (Mobile). Use a higher value if you have enabled the 'Zoom effect'. Image resolution directly impacts the performance of the carousel, and therefore the page — especially when that content is above the fold. Use a lower resolution if your images don't load quick enough or if you are experiencing slow loading speeds.

default: 1.2x

Carousel
Show Controls

Prev/Next buttons

default: true

Show Indicators

Small dots at the bottom

default: true

Indicator type

Dots or dashed

default: Dot

Animations
Type

Select from a list of animations. Animations are provided by Animate.css

default: Slide

Enable zoom effect

Description

default: true

Speed

The amount of time between transitions.

default: Faster

Interval

The amount of time that a single slide is displayed. Set to `0sec` to disable.

default: 12sec

Show progress bar

Enables/disables the progress bar at bottom of carousel.

default: true

Performance
Enable lazy-loading

Optimizes the carousel for performance. If you are experiencing a small delay while your slides are loading, you may want to lower the 'Image resolution' setting.

default: true


Displays a range of products from a collection.

Content

Collection

The collection to be shown

default: Featured

Settings

Header
Heading text

default: Featured collection

Heading size

default: h2

Heading alignment

default: Left

Heading margin bottom

default: 0

Heading letter spacing

default: 0

Subeading text

default: Inspired by simplicity, driven by performance.

Subheading margin bottom

default: 0

Subheading letter spacing

default: 3

Layout
Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 6

Wrap in container

Prevents the content from touching the edges of the viewport.

default: true

Total number of products to display

default: 4

Responsive grid

See the docs on Bootstrap Layout for more details

Extra small screens

Number of columns on each row for devices <576px wide (most mobile devices)

default: 2

Small screens

Number of columns on each row for devices ≥576px wide

default: 2

Medium screens

Number of columns on each row for devices ≥768px wide

default: 3

Large screens

Number of columns on each row for devices ≥992px wide

default: 4

Extra large screens

Number of columns on each row for devices ≥1200px wide

default: 4

Gutters

See the docs on Bootstrap Layout for more details

Horizontal gutter

The space between columns or inside of the row

default: 2

Vertical gutter

The space between rows

default: 2

Image(s)
Image width (resolution) (px)

Resolution of the image's width in pixels

default: 360

Image height (resolution) (px)

Resolution of the image's height in pixels

default: 360

Product image crop

Point-of-origin for cropping images. Cropping images helps with load optimization, it prevents the page from loading full resolution

default: Center

Border

Places a border (and a small amount of padding) on the product images

default: false

Circle

Places the image into a circular container.

default: false

Product(s)
Product title size

The HTML element used to create the title of the product. See the Bootstrap docs on Typography for more details.

default: h6

Product title margin bottom

The amount of space beneath the product's title. Based on Bootstrap (BS) spacing.

default: 3

Align text to center

Align text to center

default: true

Show product title

default: true

Show discount badge

Display full price (with strikethrough) above the discounted prices.

default: true

Show price

default: true

Show "From" text

When you have multiple variants for a product, this will show the lowest value (or "minimum price") associated with any of your product's variants.

default: true

Price margin bottom

default: 0

Show Add to Cart button

default: true

Use color swatches

When a product has variants that come in different colors, enable or disable swatches that display the color of the product. This defaults to use the browser's native CSS colors, but can be modified to include more colors, or even use texturized images, with Custom Development. The system knows that your products comes in different colors by using the name of the attribute. Contact a NerdlySolutions Expert for more info.

Accepted values: "Color", "Colors", "Colour", or "Colour(s)" (case insensitive)

default: true

Use images for swatches

This is a feature that comes with Custom Development. If you have images for your swatches, you can place them in your `/assets` folder prefixed with the string `swatch-` using the colors' names in all lowercase (no spaces or hyphens) as the filename. (must be in .png format)

default: false

Show quantity

Enables or disables the quantity counter, allowing your customer to place more than one product in the cart at a time. Your customer will have another opportunity to change the quantity inside of their Cart.

default: false

Show inventory

Enables or disables the Inventory progress bar on the product card

default: false

Functionality
Enable Quick View

Enables or disables the Quick View, allowing your customer to open the Product page for that product inside of a portal without ever leaving the current page. It's recommended to use this in conjunction with the Add to Cart button.

default: true

Animations
Hover effect

Hover-state visual effect that occurs when the user mouses over a product.

default: Shine


Collection list

Dispay a list of collections.

Content

The collections to include in your list

Settings

Header
Heading text

default: Collection list

Heading size

default: h6

Heading alignment

default: Left

Subheading text

default: Write something catchy here

Layout
Wrap in container

Prevents the content from touching the edges of the viewport

default: true

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 6

Responsive grid

See the docs on Bootstrap Layout for more details

Extra small screens

Number of columns on each row for devices <576px wide (most mobile devices)

default: 2

Small screens

Number of columns on each row for devices ≥576px wide

default: 2

Medium screens

Number of columns on each row for devices ≥768px wide

default: 3

Large screens

Number of columns on each row for devices ≥992px wide

default: 4

Extra large screens

Number of columns on each row for devices ≥1200px wide

default: 4

Gutters

See the docs on Bootstrap Layout for more details

Horizontal gutter

The space between columns or inside of the row

default: 2

Vertical gutter

The space between rows

default: 2

Collection(s)
Align text to center

default: true

Show collection title

default: true

Collection title size

default: h6

Show number of products

Display the number of products in the collection at the end of the title

default: true

Show collection description

default: false

Collection description truncate (deprecated)

Deprecated in favor of the CSS `line-clamp` setting (click to see caniuse)

default: 200

Image(s)
Image width (resolution) (px)

Resolution of the image's width in pixels

default: 360

Image height (resolution) (px)

Resolution of the image's height in pixels

default: 360

Border

Places a border (and a small amount of padding) on the collection images

default: false

Circle

Places the image into a circular container.

default: true

Hover effect

Hover-state visual effect that occurs when the user mouses over a product.

default: Scale in


Display a single product.

Settings

Content
Product

Set the product to be displayed.

Product

The product to be displayed

default: null

Responsive breakpoint

Set a breakpoint for the columns on this row. The images and the description are in 1 column by default. This breakpoint sets the minimum size for screens that will display the images and the description in two (2) columns.

default: Medium (md)

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 6

Product

default: 6

Show product title

default: true

Product title size

default: h6

Show Image Gallery

Display images for the product

default: true

Show product description

default: true

Product description truncate (deprecated)

Deprecated in favor of the CSS `line-clamp` setting (click to see caniuse)

default: 175

Show product price

default: true

Show discount badge

Display full price (with strikethrough) above the discounted prices.

default: true

Show Add to Cart button

default: true

Show quantity

Enables or disables the quantity counter, allowing your customer to place more than one product in the cart at a time. Your customer will have another opportunity to change the quantity inside of their Cart.

default: true

Show Share buttons

Set the links for this feature inside of Theme Settings > Social Media

default: true


Featured Blog (Blog posts)

Display a blog category (such as Announcements)

Settings

Header
Heading text

default: Featured blogs

Heading size

default: h6

Heading alignment

default: Left

Subheading text

default: Our featured blogs

Layout
Wrap in container

Prevents the content from touching the edges of the viewport

default: true

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 6

Total number of blog posts to display

default: 3

Responsive grid

See the docs on Bootstrap Layout for more details

Extra small screens

Number of columns on each row for devices <576px wide (most mobile devices)

default: 2

Small screens

Number of columns on each row for devices ≥576px wide

default: 2

Medium screens

Number of columns on each row for devices ≥768px wide

default: 3

Large screens

Number of columns on each row for devices ≥992px wide

default: 3

Extra large screens

Number of columns on each row for devices ≥1200px wide

default: 3

Gutters

See the docs on Bootstrap Layout for more details

Horizontal gutter

The space between columns or inside of the row

default: 3

Vertical gutter

The space between rows

default: 3


Newsletter

Settings

Header
Heading text

default: Newsletter

Heading size

default: h2

Subheading text

default: Be the first to get notified about our latest offers.

Layout
Padding top

Amount of space from the top of the container to the content.

default: 6

Padding bottom

Amount of space from the top of the container to the content.

default: 6

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 0

Content
Align text to center

default: true

Bottom text

default: We usually send once a week

Style
Background color

default: Dark

Button color

default: Primary

Button variant

default: Normal

Button size

default: Normal


Instagram Feed   

Experimental. Recent changes to Instagram's CORS policy have broken a previous version of this feature. Complete documentation coming soon

You may find docs on how this will work in the future in the Debutify docs for Instagram integration. Developers, see the Integration Helper or Dashboard story for more details.

Brands

Content

Settings

Header
Heading text

default: Newsletter

Heading size

default: h2

Layout
Wrap in container

Prevents the content from touching the edges of the viewport

default: true

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 6

Images
Image height (resolution) (px)

Resolution of the image's height in pixels

default: 360

Animations
Speed

The speed of the animation

Note: There aren't any settings low enough and the higher settings are too high

default: 50


Youtube/Vimeo Video

Settings

Content
Youtube/Vimeo video ID

The ID for the video.

default: fA551WpQaO4

Short description

default: Write something to shortly describe your video.

Layout
Wrap in container

Prevents the content from touching the edges of the viewport

default: true

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 6

Max width (px)

Enter 0 to take all available space

default: 960

Style
Border radius (px)

default: 8


Not included by default

Custom HTML

Complete documentation coming soon.


Icon blocks

For more information on using icons, click on an Icon block or see the Overview.

Content

default: An array of icons

Settings

Layout
Wrap in container

Prevents the content from touching the edges of the viewport. Set to false for a fluid layout.

default: true

Amount of space from the top of the container to the content.

default: 3

Padding bottom

Amount of space from the top of the container to the content.

default: 3

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 0

Style
Background color

default: White


Page Content

Insert a Page from your Shopify Admin

Settings

Header
Heading text

default: Talk about your brand

Heading size

default: h2

Alignment

default: Left

Button label

default: null

Button link

Paste a link or search

default: null

General Settings
Wrap in container

Prevents the content from touching the edges of the viewport. Set to false for a fluid layout.

default: true

Button color

default: Primary

Button variant

default: Normal

Button size

default: Normal

Spacing
Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 6


Image with text

Complete documentation coming soon.


Testimonials

Content

Testimonials

default: Array of 3 Testimonials (manual)

Settings

Content Settings
Wrap in container

default: true

Alignment

default: Center

Heading text

default: What they had to say

Heading size

default: h2

Subheading text

default: Dr. Johnathan Doe, MD

Image
Border

default: false

Circle

Sets the image

default: false

Heading size

default: h5

Background color

default: White

Spacing
Padding top

Amount of space from the top of the container to the content.

default: 6

Padding bottom

Amount of space from the top of the container to the content.

default: 3

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 0


Image Blocks

General Settings
Background color

default: White

Wrap in container

Prevents the content from touching the edges of the viewport

default: true

Spacing
Padding top

Amount of space from the top of the container to the content.

default: 6

Padding bottom

Amount of space from the top of the container to the content.

default: 3

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 0


Accordion (FAQ)

Content

default: Array of 1 Item

Settings

Header
Heading text

default: Featured collection

Heading size

default: h2

Heading alignment

default: Left

Subeading text

default: Inspired by simplicity, driven by performance.

Layout
Wrap in container

Prevents the content from touching the edges of the viewport

default: true

Padding top

Amount of space from the top of the container to the content.

default: 6

Padding bottom

Amount of space from the top of the container to the content.

default: 3

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 0

Style
Background color

default: White


Pricing Cards   

Experimental. This section is not production-ready yet.

Roadmap: Use the name "Coupons" instead of "Pricing Cards". Make the CTA add a Discount Code to checkout. If the user clicks the CTA, they get a discount on the product. The CTA should be the image itself.

Content

default: An array of products

Settings

Header
Heading text

default: Featured collection

Heading size

default: h2

Heading alignment

default: Left

Layout
Wrap in container

Prevents the content from touching the edges of the viewport.

default: true

Padding top

Amount of space from the top of the container to the content.

default: 6

Padding bottom

Amount of space from the top of the container to the content.

default: 6

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 0

Style
Background color

default: Light


Separator

Border color

default: #EEEEEE

Wrap in container

Prevents the content from touching the edges of the viewport

default: true

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 6


Announcement banner

Complete documentation coming soon.


Heading

Content
Heading

default: null

Style
Heading size

default: h2

Heading alignment

default: Center


Newsletter popup

Settings

General Settings
Time to show in seconds

Amount of time between page load and popup.

default: 0

Portal
Portal header

Sign up

Image
File

Background for the newsletter message area

Image Style
Image width (resolution) (px)

Resolution of the image's width in pixels

default: 600

Image height (resolution) (px)

Resolution of the image's height in pixels

default: 600

Image crop position

default: Center

Border

default: true

Newsletter Content
Newsletter content heading

default Newsletter popup

Newsletter content heading size

default: h2

Newsletter content heading font color

default: White

Newsletter content subheading

default: Be the first to get notified about our latest products.

Newsletter content sub heading font color

default: White

Form
Form size

default: Normal

Button color

default: Primary

Button variant

default: Normal

Animations
Button hover effect

default: Disabled

Cancellation
Cancel message (at the bottom)

default: Maybe next time


Rich text

Settings

Header
Heading

default: Featured collection

Alignment

default: Left

Heading size

default: h2

Content
Content

default: Use this text area to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

Button label

default: null

Button link

default: null

Layout
Wrap in container

Prevents the content from touching the edges of the viewport

default: true

Margin top

Amount of space above the section content.

default: 0

Margin bottom

Amount of space below the section content.

default: 6

Style
Button color

default: Primary

Button variant

default: Normal

Button size

default: Normal