How to customize the Dawn theme slider to show sale badges?

[BSS-Commerce]

Hi @Deoxes

I find creating srcoll on desktop is not feasible compared to mobile because mobile touches the screen to scroll and desktop mouse pointer won’t do that. It needs to create more buttons to scroll or show a horizontal slider but it will be very ugly.
Here is the scroll creation for product recommendations on the mobile:

1. From Shopify admin → Online store → Edit code:

2. You find the file base.css and add the following code at the end of the file:

@media screen and (max-width: 768px){
  .product-recommendations ul.product-grid {
    margin-bottom: 0;
    position: relative;
    flex-wrap: inherit;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 100%;
    scroll-padding-left: 1.5rem;
  }
  .product-recommendations .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

I hope that it will work for your site.

[Deoxes]

@BSS-Commerce Thank you very much mate, it’s working. Sorry for disturbing you but I have wrote one more post about lazy load, I got one the answer, but for really I try to read my theme is dawn and I don’t understand what and where I need to create, maybe can you read my post and give me the correct step by step answer? I very much appreciate that.

My second post: https://community.shopify.com/c/shopify-design/daswn-lazyload-images/m-p/1911163#M509724

Thanks

[Deoxes]

@BSS-Commerce

Hi,

Maybe you can add a code how I can change the recommendation slider price size? Just in that section?

Thanks

[BSS-Commerce]

Hi @Deoxes

We see that you can customize the size price yourself, right?

After checking we found the code in the homeda.css file:

/* Product-recommendations price size */
product-recommendations span.price-item.price-item--regular {
    font-size: 20px !important;
}
/* ----------End-code------------- */

Please let us know if you need further help.

[Deoxes]

@BSS-Commerce

Yes, I already added it.

Thanks for the help.

[Deoxes]

@BSS-Commerce

Can I ask you, if maybe you can do it because I don’t know if it’s possible at all?

I wanna add to my variant picker metafield section to open each color in a new link, all product variants wanna create separately, and in the color section, each color opens in a new link.

You see from the first image is in the top right corner metafield section, is it possible to make it on dawn theme variant picker?

It’s will be wonderful if you can help me with each color opens in separate link.

homeda.co.uk

psw: picture

Thanks

[BSS-Commerce]

Hi @Deoxes

Creating links with variants can be done as follows:

{% for variant in product.variants %}
  {{ variant.title }}

{% endfor %}

• Assigning colors to those links will only be able to generate a random color code, but not select the corresponding color code and assign it to the variant.

• If you want to choose to customize each variant according to a specified color code, you may need to install an additional app.

I hope that this can help you.

[Deoxes]

@BSS-Commerce

Thanks, but I don’t understand where I need to past this code…

I wanna “Show Variants as Separate Product in the Collection”

[BSS-Commerce]

Hi @Deoxes

Customization will be quite complicated to separate variant products. Is it possible to create a separate product for each variant. However, we think that the best way is to find a third-party app that supports this.

[Deoxes]

@BSS-Commerce

Hi

I will add my establishing delivery time code in HTML, my question will be:

Is it possible to modify, here say delivery time from 9 days to 12 days excluding weekends, it works, but for example:

when it starts calculating and if ends on Saturday or Sunday it shows on Monday, that is fine, but it is possible to make the calculation work without weekends calculating days just monday-friday and starts from monday-friday like working days. Because if calculating with weekends it does not correctly calculate days.

To more understand about I’m talking here is almost same issue:

https://stackoverflow.com/questions/3464268/find-day-difference-between-two-dates-excluding-weekend-…

Thanks, I hope you understand.

Get it between -

{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}

I found some code but don’t know or it is correct and where I need to add it:

=WORKDAY(start_date, days, [holidays])

Not sure or this HTML code works here.

Thanks for the help.

[BSS-Commerce]

Hi @Deoxes

You can try using the following code instead:

We think that delivery dates on Saturday and Sunday will be rolled over to next week.

I hope this can help you.

[Deoxes]

@BSS-Commerce

It anyway calculate with weekends, I add all my code with your script:

Get it between -

{{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}

Thanks for the help.

[Deoxes]

@BSS-Commerce

I wanna if it’s possible to calculate just working days, without weekends. Because if calculate with weekends and just goes from Sunday till Monday, it’s not the correct day in the end.

My one more post about this:
https://community.shopify.com/c/shopify-design/establishing-time-modify-the-code/td-p/1937953

[BSS-Commerce]

Hi @Deoxes

Hope we didn’t misunderstand what you mean: 9 days here are only days except for weekends

You can use the following code:

 **-** 

  {{ '//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js' | script_tag }}
  

[Deoxes]

@BSS-Commerce Amazing, it works, thank you very much!