Flexible "Discount Collection" section: Built with a modular architecture, this section allows displaying a list of discounted products from one or multiple specified collections. Easily customize the number of products to show, layout style (grid, carousel), and product attributes (name, price, image, discount label) via the schema.
1. How to access the Discount Collection section?
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select the Discount Collection.
2. How to customize the Discount Collection section?
2.1. Discount collection section
After adding the Discount collection section, you can customize its settings using the sidebar—located on the right or left side of your screen depending on your device.
2.1.1. Heading options
Heading: Enter the heading text you want to display for this section. This content will help convey the main message or introduce the section's content.
Heading tag: Select the semantic HTML tag for the heading (e.g.,
<h1>,<h2>,<h3>). Choosing the appropriate tag is crucial for SEO and content structureSize: Adjust the font size of the heading to match the overall design and create a visual hierarchy between different elements on the page
Alignment: Align the position of the heading within its container. Common options include left, center alignment, helping to create a balanced and harmonious layout.
Text color: Choose the color for the heading text. Ensure the color is legible and has good contrast with the background color to improve accessibility and aesthetics.
Spacing heading with content: Adjust the spacing (padding or margin bottom) between the heading and the content below it.
2.1.2. General options
Select collection: Allows users to select a specific collection from the list of existing collections in the store
Products list (Replaces collection when selected.): Provides the option to directly select individual products for display. When this option is used, it overrides the collection selection (if any)
Product design: Choose the overall display style for the products within the tab.
Image ratio: Choose the aspect ratio for the product images (Adapt to image, Square, Portrait, ASOS, Landscape, Custom)
Full image: If enabled, the complete product image will be shown without cropping.
Show vendor: Enable to display the vendor name of the product.
2.1.3. Product layout
Maximum items to show per page: Limits the number of products or items displayed on each page, optimizing loading speed and user experience.
Items per row (Desktop): Defines the number of products or items displayed in each row on desktop screens, optimizing the layout for large screens.
Items per row (Tablet): Adjusts the number of products or items displayed in each row on tablet screens, ensuring balanced and easy viewing.
Items per row (Mobile): Optimizes the number of products or items displayed in each row on mobile phone screens, ensuring neat and interactive display.
2.1.4. Slider settings
These options control the behavior and appearance of the carousel navigation.
Use prev/next button: This toggle switch enables or disables the display of the prev/next button on the carousel. When turned off, these buttons will not be visible.
Navigation design: This dropdown menu allows you to choose from different visual designs for the prev/next button. Options included Default, Outline, and Simple
Navigation position: This dropdown menu controls the placement of the prev/next button. Option included:
Inside content: The prev/next buttons are displayed overlaid on top of the carousel's content.
Outside content: The prev/next buttons are positioned to the left and right of the carousel's items, in the surrounding container.
On the border: The prev/next buttons are placed along the edges or borders of the carousel container.
Navigation icon: This set of buttons allows you to choose the type of icon used for The prev/next buttons. You can select either "Chevron" (arrow-like symbols, often angled) or "Arrow" (more traditional straight arrows).
Use dots: This toggle switch enables or disables the display of pagination dots below the carousel. When turned off, pagination dots will not be visible.
2.1.5. Options for layout section
Enable section full width: This toggle switch, when turned on, will make the entire section span the full width of the browser window. When turned off, the section will likely be constrained to the website's main content width.
Color scheme: This dropdown menu allows you to select a predefined color scheme for the section. Clicking the dropdown will likely reveal other color palettes that you can apply to the background, text, and other elements within this section for a consistent look.
Box layout (Layout 1, Layout 2): Select the boxed layout style for the section. Each layout defines how the internal elements (e.g., image, text, button) are arranged and displayed.
2.1.6. Section padding
Top padding: This option allows you to set the amount of space (padding) at the top of the slider section. You can drag the slider or directly enter a numerical value to adjust this spacing
Bottom padding: This option allows you to set the amount of space (padding) at the bottom of the slider section. You can drag the slider or directly enter a numerical value to adjust this spacing
Rate padding (mobile): This option allows you to set the aspect ratio-based padding for mobile view (in percentage). For example, 75% means the height will be 75% of the width.
2.1.7. Theme Settings
Page width: Defines the maximum width of the page content, influencing layout and display on various devices.
Wishlist mode: Enables or disables the wishlist feature, providing users with a function to save favorite products.
You can Disable, Enable wishlist local, Enable wishlist account Install EcomRise free, Enable Growave wishlist
Remove collection URL: Eliminates the collection URL from the product page path, optimizing SEO and creating shorter URLs.
Remove the collection portion from product URLs for better SEO
Color display mode: Selects the product color display method, such as color list or count
Show color type: Displays All colors or Only color available. This option allows customers to see the complete color range of a product or focus solely on colors currently in stock.
Size display mode: Choose how the product size options are displayed.
Show size type: Choose which product sizes to display (All sizes, Only available sizes).
Show secondary image on hover: Displays a secondary product image when hovering over it, giving customers a multi-dimensional view of the product.
Use new badge: Enables or disables the display of a "new" badge on new products, attracting customer attention.
Use on sale badge: Enables or disables the display of an "on sale" badge on discounted products, stimulating purchases.
On sale badge display style: Selects the display style "Text" or "Percentage" for the "on sale" badge
Use pre-order badge: Enables or disables the display of a "pre-order" badge on upcoming products, informing customers of pre-order availability.
Use sold out badge: Enables or disables the display of a "sold out" badge on out-of-stock products, notifying customers of product availability.
Compare mode: Enables or disables the product comparison mode, allowing customers to compare products side-by-side for informed purchasing decisions.
You can Disable, Enable compare local, Enable compare account
Max products compare: 6
Show quick view: Enables or disables the "quick view" button, allowing customers to view product details without leaving the current page.
Enable size limit: Enables or disables the limit on the number of product sizes displayed
Maximum size to show: Limits the number of product sizes displayed, with "0" for responsive auto-adjustment based on screen resolution. (Requires size limit to be enabled.)
Text alignment: Adjusts the text alignment of products (left, right, center), customizing the display layout.
Show rating: Enables or disables the display of product ratings, providing customer feedback information.
To display a rating, add a product rating app.
Title font size: Adjusts the font size of the product title, ensuring readability and compatibility with the website design
Title font weight: Selects the font weight of the product title, creating emphasis and attracting attention.
Show full title: Enables or disables the display of the full product title, preventing title truncation and ensuring complete information.
Show currency codes: Enables or disables the display of currency codes next to product prices, providing clear currency information.
Maximum color to show: Limits the number of product colors displayed
0 to responsive auto number. Requires color limit is enabled.
Enable color limit: Enables or disables the limit on the number of product colors displayed, allowing control over the color count shown on the product page.
Enable scrolling badge: Enables or disables scrolling badges, allowing badges to move with the page
Icon SVG (If you want to download svg Remixicon): Use icon from Remixicon to enhance visual appeal and personalize the interface.
Text: Enter custom text to display alongside icons or other information, creating clear and engaging messages.
Show sale percentage: Enables or disables the display of the sale percentage on products, helping customers easily identify discounts.
Show sale text: Enables or disables the display of sale text (e.g., "Sale"), providing clear information about promotional offers.
Follow this document to know more about the Srcolling badge
Change product image when click swatch on event: Allows the product image to change when a user clicks on a color swatch, creating a more interactive and visual experience.
Click mode is forced on touch devices.
Color list style: Selects the display style for the product color list
Color image source: Selects the image source for product colors, allowing the use of actual product images or standard color images for display (Custom images or variant images)
Color shape: Selects the display shape for product colors (e.g., square, circle), customizing the color display interface.
Price varies style: Choose a display style for variable product prices (e.g. "From [price]"), which helps customers understand the price range.
Action after color view more is clicked: Defines the action that occurs when a user clicks the "view more colors" button, such as showing all colors or redirecting to a more detailed page (Expand all colors, Go to product page)
Requires color limit is enabled.
2.1.8. Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to theme settings.
2.2. Countdown time block
To add a Countdown time block to the Discount collection, click the Add Countdown time button (plus icon ➕) under the Discount collection.
After adding the Countdown time block, you can adjust its settings using the sidebar—located on the right or left side of your screen depending on your device
Year (Display 99 days max): Enables the display of the year in the timer or date/time information
Month: Enables the display of the month
Day: Enables the display of the day of the month
Hour: Enables the display of the hour
Minute: Enables the display of the minute
